/* Hutash design tokens — FLATTENED for production. * Previously this file @imported css/tokens/*.css; if those sub-files fail to * load (missing upload, wrong MIME type, path rewrite) every custom property * is undefined and the whole site loses its borders, surfaces and spacing. * Everything is inlined here so one stylesheet request carries all tokens. */ /* ===== tokens/fonts.css ===== */ /* Hutash type system — three families, three roles. * * Fraunces display / brand — headings, hero text, wordmarks, titles * Sora body / UI — everything that is not a heading or code * JetBrains Mono code — code, paths, model IDs, versions, hashes * * All three load from Google Fonts. Fraunces is the variable cut with the * optical-size axis (opsz 9..144), so display sizes render more delicate and * small headings render sturdier — see font-optical-sizing in base.css. * * This replaces Inter, which the source product bundled via @fontsource/inter. * The Inter woff2 binaries remain in assets/fonts/ but are no longer loaded. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;700;800;900&family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ===== tokens/colors.css ===== */ /* Colour system. The shell is achromatic: dark / light / night themes override * only surface + text variables; the accent stays white-on-black (or * black-on-cream). Colour enters the UI through CONTENT — waveforms and * modality badges — never through chrome. */ :root { /* Status — identical in every dark theme. */ --color-success: #34D399; --color-warning: #FBBF24; --color-error: #F87171; /* Destructive confirmable action (uninstall, delete) — deeper than * --color-error, which marks an already-bad state. */ --color-danger: #A32D2D; --color-on-danger: #ffffff; /* OS convention, not brand: Windows titlebar close-button hover. */ --color-titlebar-close-bg-hover: #c42b1c; --color-titlebar-close-fg-hover: #ffffff; /* Per-modality rails — neutral by default; aliasing the platform border * keeps adoption a no-op visual change until a modality tint is wanted. */ --rail-tts: var(--color-border); --rail-music: var(--color-border); --rail-clone: var(--color-border); --rail-stt: var(--color-border); } /* Dark "Neutral Canvas" — the default. Applied unscoped so the app paints * correctly before data-theme lands on . */ :root, :root[data-theme="dark"] { --color-bg: #141414; --color-surface: #1A1A1A; --color-surface-dark: #0F0F0F; --color-surface-raised: #1F1F1F; --color-surface-hover: #242424; --color-text-primary: #E8E8E8; --color-text-secondary: #888888; --color-text-muted: #666666; --color-text-dim: #555555; --color-text-strong: #F5F5F5; --color-accent: #E8E8E8; --color-accent-hover: #FFFFFF; --color-border: rgba(255, 255, 255, 0.06); --color-border-soft: rgba(255, 255, 255, 0.10); --color-border-hover: rgba(255, 255, 255, 0.12); --color-border-strong: rgba(255, 255, 255, 0.15); --color-border-focus: rgba(255, 255, 255, 0.20); --color-nav-active: rgba(255, 255, 255, 0.09); --color-overlay-strong: rgba(0, 0, 0, 0.5); --color-overlay-soft: rgba(0, 0, 0, 0.3); --color-shadow-card: rgba(0, 0, 0, 0.4); /* Short aliases — the majority of component CSS reads these. They share * storage with the canonical names, so theme switches stay atomic. */ --bg: var(--color-bg); --surface: var(--color-surface); --surface-raised: var(--color-surface-raised); --surface-hover: var(--color-surface-hover); --text: var(--color-text-primary); --text-muted: var(--color-text-secondary); --text-bright: var(--color-text-strong); --text-dim: var(--color-text-dim); --active-bg: var(--color-nav-active); --active-bg-strong: rgba(255, 255, 255, 0.12); --accent: var(--color-accent); --accent-hover: var(--color-accent-hover); --muted: var(--color-text-muted); --border: var(--color-border); --border-subtle: var(--color-border); --border-strong: var(--color-border-strong); --brand: var(--color-accent); --success: var(--color-success); --warning: var(--color-warning); --error: var(--color-error); } /* Light — warm cream. Surfaces invert; the accent stays achromatic. */ :root[data-theme="light"] { --color-bg: #FAF7F2; --color-surface: #FFFFFF; --color-surface-dark: #F0EBE3; --color-surface-raised: #FFFFFF; --color-surface-hover: #F5F1EA; --color-text-primary: #1A1410; --color-text-secondary: #4A4540; --color-text-muted: #7A7570; --color-text-dim: #A0A0A0; --color-text-strong: #050000; --color-accent: #1A1410; --color-accent-hover: #000000; --color-border: rgba(0, 0, 0, 0.08); --color-border-soft: rgba(0, 0, 0, 0.12); --color-border-hover: rgba(0, 0, 0, 0.16); --color-border-strong: rgba(0, 0, 0, 0.20); --color-border-focus: rgba(0, 0, 0, 0.25); --color-nav-active: rgba(0, 0, 0, 0.08); --color-overlay-strong: rgba(0, 0, 0, 0.4); --color-overlay-soft: rgba(0, 0, 0, 0.15); --color-shadow-card: rgba(0, 0, 0, 0.1); --bg: var(--color-bg); --surface: var(--color-surface); --surface-raised: var(--color-surface-raised); --surface-hover: var(--color-surface-hover); --text: var(--color-text-primary); --text-muted: var(--color-text-secondary); --text-bright: var(--color-text-strong); --text-dim: var(--color-text-dim); --active-bg: var(--color-nav-active); --active-bg-strong: rgba(0, 0, 0, 0.12); --accent: var(--color-accent); --accent-hover: var(--color-accent-hover); --muted: var(--color-text-muted); --border: var(--color-border); --border-subtle: var(--color-border); --border-strong: var(--color-border-strong); --brand: var(--color-accent); --success: #16A34A; --warning: #D97706; --error: #DC2626; } /* Night — deeper and dimmer than dark. Same hues, lower luminance. */ :root[data-theme="night"] { --color-bg: #0A0A0A; --color-surface: #111111; --color-surface-dark: #080808; --color-surface-raised: #161616; --color-surface-hover: #1A1A1A; --color-text-primary: #B8B8B8; --color-text-secondary: #707070; --color-text-muted: #555555; --color-text-dim: #404040; --color-text-strong: #D8D8D8; --color-accent: #B8B8B8; --color-accent-hover: #D8D8D8; --color-border: rgba(255, 255, 255, 0.07); --color-border-soft: rgba(255, 255, 255, 0.10); --color-border-hover: rgba(255, 255, 255, 0.13); --color-border-strong: rgba(255, 255, 255, 0.15); --color-border-focus: rgba(255, 255, 255, 0.22); --color-nav-active: rgba(255, 255, 255, 0.08); --color-overlay-strong: rgba(0, 0, 0, 0.6); --color-overlay-soft: rgba(0, 0, 0, 0.4); --color-shadow-card: rgba(0, 0, 0, 0.5); --bg: var(--color-bg); --surface: var(--color-surface); --surface-raised: var(--color-surface-raised); --surface-hover: var(--color-surface-hover); --text: var(--color-text-primary); --text-muted: var(--color-text-secondary); --text-bright: var(--color-text-strong); --text-dim: var(--color-text-dim); --active-bg: var(--color-nav-active); --active-bg-strong: rgba(255, 255, 255, 0.10); --accent: var(--color-accent); --accent-hover: var(--color-accent-hover); --muted: var(--color-text-muted); --border: var(--color-border); --border-subtle: var(--color-border); --border-strong: var(--color-border-strong); --brand: var(--color-accent); --success: var(--color-success); --warning: var(--color-warning); --error: var(--color-error); } /* ===== tokens/typography.css ===== */ /* Type. Three families in three roles — Fraunces for display, Sora for body * and UI, JetBrains Mono for code and numeric readouts. The scale is tight * and half-stepped: body is 13px, and nine named sizes sit below the two * headings. Name the intent ("eyebrow", "card-title"), never the pixel value. */ :root { /* Display / brand — headings, hero text, wordmarks, page and card titles. * Never body copy, UI labels, buttons or navigation. */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; /* Body / UI — paragraphs, nav, buttons, labels, inputs, table cells, * captions, meta. The default for everything that is not a heading. */ --font-body: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Code — code blocks, inline code, terminal output, file paths, model IDs, * versions, hashes, durations, slider readouts. Ligatures stay on. */ --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace; /* Back-compat alias. --font-family predates the three-role system and is * still referenced by older component CSS; it resolves to the body font. */ --font-family: var(--font-body); /* Legacy rem scale — still referenced by older component CSS. */ --font-size-xs: 0.7rem; /* 11.2px */ --font-size-sm: 0.8rem; /* 12.8px */ --font-size-base: 0.875rem; /* 14px */ --font-size-md: 0.95rem; /* 15.2px */ --font-size-lg: 1.1rem; /* 17.6px */ --font-size-xl: 1.3rem; /* 20.8px */ /* Named scale — every value maps 1:1 to the reference prototype. */ --font-size-body: 0.8125rem; /* 13px — body, nav label, textarea */ --font-size-h1: 1.375rem; /* 22px — page / generator H1 */ --font-size-page-title: 1.625rem; /* 26px — topbar page heading */ --font-size-generator-title: 1.1875rem; /* 19px — generator panel title */ --font-size-h2: 1.0625rem; /* 17px — section H2 */ --font-size-h3: 0.875rem; /* 14px — brand, model name, library title */ --font-size-card-title: 0.78125rem; /* 12.5px — asset card name */ --font-size-chip: 0.75rem; /* 12px — preset chips, pills */ --font-size-slider: 0.71875rem; /* 11.5px — slider value, ghost button */ --font-size-pill: 0.6875rem; /* 11px — model pill, advanced header */ --font-size-counter: 0.65625rem; /* 10.5px — prompt counter */ --font-size-eyebrow: 0.625rem; /* 10px — section labels */ --font-size-badge: 0.59375rem; /* 9.5px — modality badge */ --font-size-micro: 0.5625rem; /* 9px — sub-badge micro labels */ --line-height-body: 1.21875rem; /* 19.5px */ --line-height-h2: 1.59375rem; /* 25.5px */ --line-height-h3: 1.3125rem; /* 21px */ --line-height-card-title: 1.171875rem; /* 18.75px */ --line-height-chip: 1.125rem; /* 18px */ --line-height-slider: 1.078125rem; /* 17.25px */ --line-height-pill: 1.03125rem; /* 16.5px */ --line-height-counter: 0.984375rem; /* 15.75px */ --line-height-eyebrow: 0.9375rem; /* 15px */ --line-height-badge: 0.890625rem; /* 14.25px */ /* Body/UI weights — Sora. */ --font-weight-body: 400; --font-weight-mid: 450; /* between body and label — inactive chips, nav labels */ --font-weight-label: 500; --font-weight-medium: 500; --font-weight-nav: 500; --font-weight-button: 600; --font-weight-strong: 700; /* bold emphasis in running text */ /* Display weights — Fraunces. --font-weight-heading is the h2–h6 default; * h1 and hero text take --font-weight-display. */ --font-weight-heading: 700; --font-weight-display: 800; --font-weight-black: 900; --letter-spacing-body: -0.005em; --letter-spacing-tight: -0.01em; --letter-spacing-tighter: -0.015em; --letter-spacing-wide: 0.08em; --letter-spacing-wider: 0.1em; --letter-spacing-badge: 0.06em; /* Section / eyebrow label vocabulary — shared by every page. */ --section-label-size: 10px; --section-label-weight: 600; --section-label-spacing: 0.1em; --section-label-transform: uppercase; /* @kind other */ --label-font-size: var(--font-size-eyebrow); --label-color: var(--color-text-muted); --label-letter-spacing: var(--letter-spacing-wide); --label-margin-bottom: var(--space-1); } /* ===== tokens/spacing.css ===== */ /* Spacing, structural widths, and the asset-card geometry system. * Spacing is rem-based so a future user font-size preference scales the * whole UI uniformly. The 8-pt grid is the spine; the half-steps * (10 / 14 / 18 / 28px) exist because the reference layout needs them. */ :root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-2-5: 0.625rem; /* 10px */ --space-3-5: 0.875rem; /* 14px */ --space-4-5: 1.125rem; /* 18px */ --space-7: 1.75rem; /* 28px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Structural widths — these size the page skeleton, not gaps. */ --titlebar-height: 36px; --layout-sidebar: 14rem; /* 224px, 3.5rem collapsed */ --layout-sidebar-collapsed: 3.5rem; --layout-settings-nav: 12.5rem; --layout-marketplace-features: 20rem; --layout-generator-panel: clamp(23.75rem, 28vw, 28.75rem); /* @kind spacing */ --layout-settings-content-max: 45rem; --layout-community-content-max: 47.5rem; /* Asset card system. The library's zoom slider mutates --card-width only * (160–320px, 8px step); everything else derives from it or stays fixed * on the 8-pt grid. */ --card-width: 240px; --card-min-width: 170px; --card-compact-threshold: calc(var(--card-min-width) + 40px); --card-visual-height: calc(var(--card-width) * 9 / 16); /* 135px @ 240 */ --card-info-height: 56px; --card-total-height: calc(var(--card-visual-height) + var(--card-info-height)); --card-gap: 16px; /* List view — scales in lockstep with the card width. */ --list-thumb-width: calc(var(--card-width) * 0.18); --list-thumb-height: calc(var(--list-thumb-width) * 9 / 16); --list-row-height: calc(var(--card-width) * 0.25); /* Page + panel padding rhythms. */ --topbar-padding: 1.125rem 1.75rem; --gen-header-padding: 1.25rem 1.375rem 0.875rem; --gen-section-padding: 1.125rem 1.5rem; --gen-footer-padding: 0.875rem 1.25rem 1.125rem; } /* ===== tokens/radius.css ===== */ /* Radii and elevation. Corners are small and consistent: 6px controls, * 8px buttons and cards, 10px asset/settings cards, 12px modals and * platform tiles, and a 100px pill for badges and chips. * Shadow is reserved for things that float — dropdowns, modals, FABs. * Flat surfaces are separated by a hairline border, never a shadow. */ :root { --radius-sm: 0.25rem; /* 4px — micro pills, menu items */ --radius-input: 0.375rem; /* 6px — inputs, small buttons */ --radius-button: 0.5rem; /* 8px */ --radius-card: 0.5rem; /* 8px */ --radius-pill: 6.25rem; /* 100px */ /* Larger container radii used verbatim by the product's surfaces. */ --radius-asset-card: 0.625rem; /* 10px — asset / model / settings cards */ --radius-modal: 0.75rem; /* 12px — modals, platform tiles */ /* Elevation — floating controls only. */ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-popover: 0 8px 24px var(--color-shadow-card); } /* ===== tokens/controls.css ===== */ /* Component-level tokens (Level 3). Change these to restyle every control * in the product at once — inputs, selects, sliders all reference these * rather than the raw colour/spacing tokens. */ :root { --control-height-sm: 1.75rem; /* 28px */ --control-height-md: 2rem; /* 32px */ --control-height-lg: 2.5rem; /* 40px */ --control-font-size: var(--font-size-body); --control-font-family: inherit; --control-radius: 6px; --control-padding-x: 10px; --control-bg: var(--color-surface); --control-bg-hover: var(--color-surface-raised); --control-border: var(--color-border); --control-border-hover: var(--color-border-hover); --control-border-focus: var(--color-border-focus); --control-text: var(--color-text-primary); --control-text-secondary: var(--color-text-secondary); --control-text-placeholder: var(--color-text-muted); --control-text-disabled: var(--color-text-dim); --primary-hover: var(--accent-hover); --border-bright: var(--border-strong); --slider-track-height: 4px; --slider-track-bg: var(--color-border); --slider-thumb-size: 14px; --slider-thumb-bg: var(--color-accent); --slider-thumb-border: var(--color-surface); } /* ===== tokens/base.css ===== */ /* Minimal base layer — the root contract every surface inherits, plus the * two global affordances the product defines app-wide (scrollbars and the * keyboard focus ring). Component styling lives in the components, not here. */ html { font-size: 16px } body, button, input, select, textarea { font-family: var(--font-body); font-weight: var(--font-weight-body); } body { font-size: var(--font-size-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings are Fraunces. font-optical-sizing keeps the opsz axis live, so a * 48px hero renders more delicate than a 20px h3 without any extra rule. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-weight-heading); font-optical-sizing: auto; } h1 { font-weight: var(--font-weight-display) } /* Code keeps JetBrains Mono's programming ligatures. */ code, pre, kbd, samp, .mono, .code { font-family: var(--font-mono); font-weight: 400; font-variant-ligatures: contextual common-ligatures; } button, [role="button"], .btn { font-weight: var(--font-weight-button) } nav, nav a, .nav-link { font-family: var(--font-body); font-weight: var(--font-weight-nav) } strong, b { font-weight: var(--font-weight-strong) } a { color: var(--color-text-strong); text-decoration: none } a:hover { color: var(--color-accent-hover); text-decoration: underline } /* Thin, quiet, theme-aware scrollbars on every scroll surface. */ * { scrollbar-width: thin; scrollbar-color: var(--color-border-hover) transparent } ::-webkit-scrollbar { width: 0.25rem; height: 0.25rem } ::-webkit-scrollbar-track { background: transparent } ::-webkit-scrollbar-thumb { background: var(--color-border-hover); border-radius: 0.125rem } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted) } /* Keyboard-only focus ring. :focus-visible, never :focus — a mouse click * must not paint the ring. */ button:focus-visible, [role="button"]:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }