/* ============================================================================ Design foundation — portable tokens ---------------------------------------------------------------------------- A warm, editorial, dark-default system. Two consumption conventions live here, both standard for shadcn/Tailwind projects: • Core palette → `H S% L%` triples, consumed as hsl(var(--token)) or hsl(var(--token) / ). Tailwind-friendly. • Surfaces/text → ready full-color values, consumed as var(--token). (translucent "glass" + text-emphasis levels) Theme is selected by `data-theme="light|dark"` on . `:root` holds the dark theme (the default); `html[data-theme='light']` overrides. Pin the page with an inline script in before paint: ========================================================================== */ :root { color-scheme: dark light; /* ── Type families ────────────────────────────────────────────────────── sans = UI + body. serif = display / titles. mono = numerals, code. (This system was used with Inter or Work Sans for sans; either pairs well with the Cormorant + IBM Plex Mono display/mono set.) */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Cormorant Garamond', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* ── Weights ───────────────────────────────────────────────────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Text ladder — the single source of truth for font sizes ───────────── Two layers: • Fixed steps (px) — UI / body. Body copy must NOT scale with the viewport, so these stay plain px. • Fluid steps (clamp on vmin, the shorter axis) — display / titles. Same shape so they scale together at every breakpoint. `*-sm` and `*-xl` are the originals; `*-md` / `*-lg` interpolate between them to complete the ladder. Re-tune all typography from this block. */ --text-micro: 10px; /* stat labels, finest print */ --text-eyebrow: 11px; /* uppercase overline labels */ --text-caption: 13px; /* secondary / small copy */ --text-body: 14px; /* default body copy */ --text-body-lg: 16px; /* comfortable long-form reading */ --text-fluid: clamp(11px, 2.2vmin, 22px); /* long hints / captions */ --text-display-sm: clamp(22px, 4vmin, 40px); /* card / section titles */ --text-display-md: clamp(30px, 6vmin, 64px); /* sub-hero */ --text-display-lg: clamp(40px, 8vmin, 88px); /* hero */ --text-display-xl: clamp(56px, 12vmin, 128px); /* showcase numeral / hero*/ /* ── Line heights ──────────────────────────────────────────────────────── Tight for display, generous for body. */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; /* ── Letter spacing ────────────────────────────────────────────────────── Display gets a hair of negative tracking; eyebrows are widely tracked. */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-eyebrow: 0.18em; /* paired with uppercase */ /* ── Spacing ───────────────────────────────────────────────────────────── A 4px base step plus a few semantic spaces for layout rhythm. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-page: 2rem; /* outer page gutter */ --space-card: 2rem; /* inner card padding */ /* ── Radii ─────────────────────────────────────────────────────────────── `--radius` is the base knob; md/sm derive from it (shadcn convention). */ --radius: 0.75rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-card: 1rem; --radius-pill: 999px; /* ── Control sizing ────────────────────────────────────────────────────── One source of truth for every pill / icon button. Clamps on `vmin` so portrait and landscape match on the same device and controls grow modestly from phone to desktop. Tweak a knob → every control follows. */ --control-height: clamp(30px, 1vmin + 28px, 48px); --control-padding-x: clamp(10px, 1vmin + 8px, 20px); --control-padding-y: 0.75rem; --control-font-size: clamp(12px, 1vmin + 10px, 16px); --control-radius: var(--radius-pill); /* ============================ DARK (default) ============================ */ /* Core palette — H S% L% triples → hsl(var(--token)) */ --background: 45 6% 7%; --foreground: 38 33% 87%; --background-elevated: 40 5% 11%; /* raised panels */ --background-spotlight: 40 6% 17%; /* highest surface / hover */ --card: 40 5% 11%; --card-foreground: 38 33% 87%; --popover: 40 5% 11%; --popover-foreground: 38 33% 87%; --primary: 38 24% 80%; /* warm sand — main action */ --primary-foreground: 45 6% 7%; --secondary: 38 10% 20%; --secondary-foreground: 38 33% 87%; --muted: 40 6% 15%; --muted-foreground: 38 16% 68%; --accent: 38 14% 27%; /* hover/active — lifted in L, not just S */ --accent-foreground: 38 33% 87%; --destructive: 0 72% 55%; --destructive-foreground:0 0% 100%; --warning: 25 90% 60%; --warning-foreground: 45 6% 7%; --success: 38 24% 80%; --success-foreground: 45 6% 7%; /* Steps are spaced so each reads against its neighbours: card↔border ≈1.6:1, secondary↔accent ≈1.35:1 (hover affordance). */ --border: 38 12% 24%; --input: 38 12% 24%; --border-strong: 38 14% 34%; /* same scale as --border (was translucent) */ --ring: 38 24% 80%; /* Data-viz ramp (warm → terracotta → alert) */ --chart-1: 38 24% 80%; --chart-2: 30 36% 72%; --chart-3: 20 24% 64%; --chart-4: 25 90% 60%; --chart-5: 0 72% 55%; /* Surfaces & text emphasis — full color values → var(--token). Translucent "glass" surfaces pair with backdrop-filter: blur(). (--border-strong now lives with --border above as a triple.) */ --surface: hsl(40 5% 11% / 0.80); --surface-strong: hsl(40 5% 11% / 0.94); --surface-overlay: hsl(40 5% 11% / 0.88); --control-surface: hsl(38 33% 87% / 0.06); --text-muted: hsl(38 16% 72% / 0.85); --text-soft: hsl(38 20% 80% / 0.82); --text-subtle: hsl(45 8% 50%); /* ≥4.5:1 on bg — WCAG AA */ /* Gradients */ --gradient-accent: linear-gradient(90deg, hsl(30 28% 64%) 0%, hsl(42 42% 84%) 100%); --gradient-primary: linear-gradient(135deg, hsl(38 24% 70%) 0%, hsl(38 33% 80%) 100%); --gradient-hero: linear-gradient(135deg, hsl(45 6% 7%) 0%, hsl(40 8% 10%) 50%, hsl(50 6% 8%) 100%); --gradient-glow: radial-gradient(ellipse at 50% 0%, hsl(38 24% 80% / 0.16) 0%, transparent 60%); /* Shadows — warm-black, soft and deep */ --shadow-sm: 0 1px 2px 0 hsl(45 6% 4% / 0.30); --shadow: 0 1px 3px 0 hsl(45 6% 4% / 0.40), 0 1px 2px -1px hsl(45 6% 4% / 0.40); --shadow-md: 0 4px 6px -1px hsl(45 6% 4% / 0.40), 0 2px 4px -2px hsl(45 6% 4% / 0.40); --shadow-lg: 0 10px 15px -3px hsl(45 6% 4% / 0.40), 0 4px 6px -4px hsl(45 6% 4% / 0.40); --shadow-xl: 0 20px 25px -5px hsl(45 6% 4% / 0.40), 0 8px 10px -6px hsl(45 6% 4% / 0.40); --shadow-card: 0 24px 60px hsl(0 0% 0% / 0.35); --shadow-glow: 0 0 40px hsl(38 24% 80% / 0.18); /* Motion durations */ --duration-fast: 5s; --duration-medium: 10s; --duration-slow: 20s; } /* =============================== LIGHT ==================================== */ html[data-theme='light'] { color-scheme: light; --background: 35 33% 94%; --foreground: 35 6% 10%; --background-elevated: 35 33% 97%; --background-spotlight: 0 0% 100%; --card: 0 0% 100%; --card-foreground: 35 6% 10%; --popover: 0 0% 100%; --popover-foreground: 35 6% 10%; --primary: 35 6% 10%; --primary-foreground: 35 33% 96%; --secondary: 35 22% 84%; --secondary-foreground: 35 6% 18%; --muted: 35 22% 90%; --muted-foreground: 35 8% 40%; --accent: 35 20% 76%; /* hover/active — darker step for affordance */ --accent-foreground: 35 6% 18%; --destructive: 0 72% 55%; --destructive-foreground:0 0% 100%; --warning: 25 90% 60%; --warning-foreground: 45 6% 7%; --success: 35 6% 10%; --success-foreground: 35 33% 96%; --border: 35 16% 80%; --input: 35 16% 80%; --border-strong: 35 14% 68%; --ring: 35 6% 10%; /* Data-viz ramp — re-tuned darker so it reads on the light background (the dark ramp's pale pastels wash out here). Same warm→alert order. */ --chart-1: 35 42% 46%; --chart-2: 26 46% 48%; --chart-3: 18 38% 48%; --chart-4: 30 78% 42%; --chart-5: 0 68% 48%; --surface: hsl(0 0% 100% / 0.72); --surface-strong: hsl(0 0% 100% / 0.90); --surface-overlay: hsl(0 0% 100% / 0.86); --control-surface: hsl(35 6% 10% / 0.06); --text-muted: hsl(35 6% 23% / 0.74); --text-soft: hsl(35 6% 23% / 0.82); --text-subtle: hsl(35 12% 40%); /* ≥4.5:1 on bg — WCAG AA */ --gradient-accent: linear-gradient(90deg, hsl(35 18% 26%) 0%, hsl(38 24% 40%) 100%); --gradient-primary: linear-gradient(135deg, hsl(35 18% 26%) 0%, hsl(38 24% 40%) 100%); --gradient-hero: linear-gradient(135deg, hsl(35 33% 94%) 0%, hsl(35 26% 90%) 50%, hsl(38 18% 92%) 100%); --gradient-glow: radial-gradient(ellipse at 50% 0%, hsl(38 24% 45% / 0.14) 0%, transparent 60%); --shadow-sm: 0 1px 2px 0 hsl(35 10% 40% / 0.10); --shadow: 0 1px 3px 0 hsl(35 10% 40% / 0.12), 0 1px 2px -1px hsl(35 10% 40% / 0.12); --shadow-md: 0 4px 6px -1px hsl(35 10% 40% / 0.12), 0 2px 4px -2px hsl(35 10% 40% / 0.12); --shadow-lg: 0 10px 15px -3px hsl(35 10% 40% / 0.12), 0 4px 6px -4px hsl(35 10% 40% / 0.12); --shadow-xl: 0 20px 25px -5px hsl(35 10% 40% / 0.12), 0 8px 10px -6px hsl(35 10% 40% / 0.12); --shadow-card: 0 24px 60px hsl(35 20% 30% / 0.08); --shadow-glow: 0 0 40px hsl(38 24% 45% / 0.14); } /* Fallback for browsers without backdrop-filter (e.g. mobile Firefox by default): without blur the translucent surfaces look broken — in light theme white-rgba over white-bg becomes invisible. Use solid colors. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root, html[data-theme='dark'] { --surface: hsl(40 5% 11%); --surface-strong: hsl(40 5% 12%); --surface-overlay: hsl(40 5% 12%); } html[data-theme='light'] { --surface: hsl(0 0% 100%); --surface-strong: hsl(0 0% 100%); --surface-overlay: hsl(0 0% 100%); } } /* ── Base reset ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); color: hsl(var(--foreground)); background: hsl(var(--background)); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; min-width: 320px; min-height: 100vh; font-size: var(--text-body); line-height: var(--leading-normal); font-weight: var(--weight-regular); } a { color: inherit; text-decoration: none; } /* ============================================================================ Text ladder — ready-to-use classes ---------------------------------------------------------------------------- Each class bundles size + line-height + weight + family + tracking. Use the class names directly, or copy the declarations into component styles. ========================================================================== */ .text-micro { font-size: var(--text-micro); line-height: var(--leading-snug); font-weight: var(--weight-medium); } .text-eyebrow { font-size: var(--text-eyebrow); line-height: var(--leading-snug); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .text-caption { font-size: var(--text-caption); line-height: var(--leading-normal); font-weight: var(--weight-regular); color: var(--text-muted); } .text-body { font-size: var(--text-body); line-height: var(--leading-normal); font-weight: var(--weight-regular); } .text-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); font-weight: var(--weight-regular); } .text-fluid { font-size: var(--text-fluid); line-height: var(--leading-relaxed); font-weight: var(--weight-regular); } /* Display steps default to the serif voice. Drop `font-family` to keep sans. */ .text-display-sm, .text-display-md, .text-display-lg, .text-display-xl { font-family: var(--font-serif); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .text-display-sm { font-size: var(--text-display-sm); } .text-display-md { font-size: var(--text-display-md); } .text-display-lg { font-size: var(--text-display-lg); line-height: var(--leading-none); } .text-display-xl { font-size: var(--text-display-xl); line-height: var(--leading-none); } /* Tabular numerals — for timers, counters, tables. */ .text-numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Helper utilities ─────────────────────────────────────────────────────── */ .gradient-text { background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .glass { background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid hsl(var(--border-strong) / 0.7); } .glow { box-shadow: var(--shadow-glow); }