/* Glaise design tokens — canonical technical source. Edit values HERE. design.md is the human/semantic doc kept in sync. Consumed directly (non-Tailwind) or via theme.css (Tailwind v4). Light is the default face (:root); dark is the second state, applied via . */ :root { /* Brand & accent — monochrome by default: a washed near-black that reads as functional ink, not a decorative color. A pigment or brand pack re-values it to bring chroma; the default skin has none. */ --glaise-primary: #26272b; --glaise-on-primary: #ffffff; --glaise-primary-hover: #3a3b41; --glaise-primary-focus: #26272b; --glaise-brand-secure: #6e737e; /* Text */ --glaise-ink: #1c1d21; --glaise-ink-muted: #44474f; --glaise-ink-subtle: #6c7079; --glaise-ink-tertiary: #9499a2; /* Surfaces */ --glaise-canvas: #f4f5f7; /* off-white workspace "whitespace", not pure white */ --glaise-chrome: #ebedf1; /* sidebar/chrome — a touch darker than canvas, never equal */ --glaise-surface-1: #ffffff; /* cards lift to white */ --glaise-surface-2: #f7f8fa; --glaise-surface-3: #eef0f3; --glaise-surface-4: #e8eaee; /* Hairlines */ --glaise-hairline: #e6e8ec; --glaise-hairline-strong: #d5d8de; --glaise-hairline-tertiary: #c2c6ce; /* Inverse — the other side of the skin, for inverse CTAs/section openers */ --glaise-inverse-canvas: #131316; --glaise-inverse-surface-1: #202024; --glaise-inverse-surface-2: #26262a; --glaise-inverse-ink: #ffffff; /* Semantic — earned by meaning, never decorative (they are not accents). success is only ever a dot/pill, so it holds the 3:1 floor; danger carries body text (field errors, a data view's error state), so it holds 4.5:1 on both themes against canvas and the card surfaces. */ --glaise-success: #1d7c33; --glaise-danger: #c62828; --glaise-overlay: #000000; /* Radius — generous by default: floating panels and cards sit at lg/xl */ --glaise-radius-xs: 4px; --glaise-radius-sm: 6px; --glaise-radius-md: 8px; --glaise-radius-lg: 16px; --glaise-radius-xl: 20px; --glaise-radius-xxl: 24px; --glaise-radius-pill: 9999px; --glaise-radius-full: 9999px; /* Spacing (4px base) */ --glaise-space-xxs: 4px; --glaise-space-xs: 8px; --glaise-space-sm: 12px; --glaise-space-md: 16px; --glaise-space-lg: 24px; --glaise-space-xl: 32px; --glaise-space-xxl: 48px; --glaise-space-section: 96px; /* Type families */ --glaise-font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --glaise-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale (font-size) */ --glaise-text-display-xl: 80px; --glaise-text-display-lg: 56px; --glaise-text-display-md: 40px; --glaise-text-metric: 30px; /* stat-card metric number — weight 600, ink */ --glaise-text-headline: 28px; --glaise-text-card-title: 22px; --glaise-text-subhead: 20px; --glaise-text-body-lg: 18px; --glaise-text-body: 16px; --glaise-text-body-sm: 14px; --glaise-text-caption: 12px; --glaise-text-eyebrow: 13px; --glaise-text-mono: 13px; --glaise-text-microlabel: 11px; /* UPPERCASE micro-labels/column headers — 600, ink-subtle, 0.06em */ /* Motion — strong custom curves (built-in CSS easings are too weak) + a duration ladder. UI motion stays under 300ms; --duration-drawer is the deliberate exception for drawers/modals. Never use ease-in on UI. */ --glaise-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* enter/exit — feels responsive */ --glaise-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* on-screen move/morph */ --glaise-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve (Ionic) */ --glaise-duration-fast: 120ms; /* button press, small tooltips/popovers */ --glaise-duration-base: 200ms; /* dropdowns, selects, default UI */ --glaise-duration-slow: 280ms; /* heavier UI, still under 300 */ --glaise-duration-drawer: 400ms; /* drawers/modals — the physical exception */ /* Theme control + elevation. Cards carry box-shadow: var(--glaise-shadow-1) and NOTHING else (no border stacked on top). On light it resolves to NONE — a card separates from the canvas by value alone (white on off-white); on dark it resolves to a hairline ring. shadow-2 is for OVERLAYS only (menus, popovers, modals) — the one real shadow on light. */ color-scheme: light; --glaise-shadow-1: none; --glaise-shadow-2: 0 0 0 1px rgba(18, 20, 24, 0.05), 0 8px 24px -6px rgba(18, 20, 24, 0.10); /* Interactive state fills — hover / selected / pressed for nav items, rows, menu options. Neutral overlays (not surface steps) so they read on any surface and in both themes. The selected state is a perceptible fill, never a side-stripe; any accent lives in the item's icon, not a bar. */ --glaise-fill-hover: rgba(17, 20, 28, 0.045); --glaise-fill-selected: rgba(17, 20, 28, 0.075); --glaise-fill-pressed: rgba(17, 20, 28, 0.10); } /* ── Dark theme ─────────────────────────────────────────────────────────── The inverted, in-family counterpart: same Inter, same monochrome primary (washed white here — a near-black fill would vanish), same surface-ladder + hairline model, elevation by borders instead of shadow. Applied via ; light is the default (no attribute). */ :root[data-theme="dark"] { --glaise-primary: #e6e7e9; --glaise-on-primary: #111113; --glaise-primary-hover: #ffffff; --glaise-primary-focus: #e6e7e9; --glaise-brand-secure: #8a8f9a; --glaise-ink: #f7f8f8; --glaise-ink-muted: #d0d6e0; --glaise-ink-subtle: #8a8f98; --glaise-ink-tertiary: #62666d; /* The dark ladder carries a wider canvas→surface delta than light needs: cards are edge-free by default (shadow-1: none), so value alone must hold the card edge. */ --glaise-canvas: #131316; /* soft dark gray — deep, but not near-black */ --glaise-chrome: #18181b; /* sidebar/chrome — a subtle lift, never equal to canvas */ --glaise-surface-1: #202024; --glaise-surface-2: #26262a; --glaise-surface-3: #2b2b30; --glaise-surface-4: #2e2e33; --glaise-hairline: #303036; --glaise-hairline-strong: #3e3e46; --glaise-hairline-tertiary: #48484f; --glaise-inverse-canvas: #ffffff; --glaise-inverse-surface-1: #f5f6f6; --glaise-inverse-surface-2: #f6f7f7; --glaise-inverse-ink: #000000; /* Semantic brightened for AA on dark (the light values sink into the canvas). Hue preserved; value carries the function. */ --glaise-success: #27a644; --glaise-danger: #eb5757; /* Elevation on dark: edge-free by default, like light — the widened ladder delta holds the card edge by value alone. A project that prefers outlined dark cards opts in at discovery and re-values shadow-1 to a hairline ring (0 0 0 1px var(--glaise-hairline)) in its own CSS. Overlays keep a ring: a floating menu over a card needs an edge that value can't give. */ --glaise-shadow-1: none; --glaise-shadow-2: 0 0 0 1px #42424a; /* Interactive state fills — lighter overlays for dark surfaces */ --glaise-fill-hover: rgba(255, 255, 255, 0.05); --glaise-fill-selected: rgba(255, 255, 255, 0.09); --glaise-fill-pressed: rgba(255, 255, 255, 0.13); color-scheme: dark; }