/* GAGENCY design tokens — the only place colours, type, spacing, radii, shadows and motion are defined. Rules live in DESIGN.md. Light is the default. Public pages pin it with data-theme="light" on (base.html); dark applies only where nothing pins it (the styleguide follows the system preference) or with an explicit data-theme="dark". */ :root { color-scheme: light dark; /* ---- Raw palette (OKLCH) ------------------------------------------------------------- */ --ink-900: oklch(23% 0.03 268); /* graphite-indigo: headings, primary surfaces */ --ink-700: oklch(35% 0.04 268); --ink-500: oklch(52% 0.025 268); --primary-600: oklch(36% 0.10 268); --primary-500: oklch(43% 0.10 268); /* interactive indigo */ --primary-300: oklch(75% 0.09 268); --primary-100: oklch(94% 0.025 268); --sand-50: oklch(98.3% 0.006 85); /* warm off-white page */ --sand-100: oklch(96% 0.008 85); --sand-200: oklch(90% 0.012 85); --sand-300: oklch(80% 0.015 85); --gold-300: oklch(84% 0.11 82); --gold-400: oklch(78% 0.11 82); /* sand-gold accent */ --gold-600: oklch(52% 0.11 78); /* gold that passes AA on light */ --white: oklch(100% 0 0); --night-950: oklch(12% 0.02 268); --night-900: oklch(17% 0.02 268); --night-800: oklch(20% 0.02 268); --night-700: oklch(23% 0.025 268); --night-600: oklch(30% 0.02 268); --night-400: oklch(45% 0.02 268); --paper-100: oklch(93% 0.01 85); --paper-200: oklch(80% 0.015 85); --paper-300: oklch(72% 0.015 85); /* ---- Semantic pairs ------------------------------------------------------------------ */ --color-bg-light: var(--sand-50); --color-bg-dark: var(--night-900); --color-bg-2-light: var(--sand-100); --color-bg-2-dark: var(--night-800); --color-card-light: var(--white); --color-card-dark: var(--night-700); --color-line-light: var(--sand-200); --color-line-dark: var(--night-600); --color-line-strong-light: var(--sand-300); --color-line-strong-dark: var(--night-400); --color-text-light: var(--ink-900); --color-text-dark: var(--paper-100); --color-text-2-light: var(--ink-700); --color-text-2-dark: var(--paper-200); --color-muted-light: var(--ink-500); --color-muted-dark: var(--paper-300); --color-primary-light: var(--primary-500); --color-primary-dark: var(--primary-300); --color-primary-strong-light: var(--primary-600); --color-primary-strong-dark: oklch(83% 0.08 268); --color-primary-soft-light: var(--primary-100); --color-primary-soft-dark: oklch(28% 0.05 268); --color-on-primary-light: var(--white); --color-on-primary-dark: var(--night-950); --color-ink-surface-light: var(--ink-900); --color-ink-surface-dark: var(--night-950); --color-on-ink-light: var(--sand-50); --color-on-ink-dark: var(--paper-100); --color-accent-light: var(--gold-400); --color-accent-dark: var(--gold-300); --color-accent-ink-light: var(--gold-600); --color-accent-ink-dark: var(--gold-300); --color-success-light: oklch(50% 0.13 152); --color-success-dark: oklch(78% 0.14 152); --color-success-soft-light: oklch(95% 0.04 152); --color-success-soft-dark: oklch(26% 0.05 152); --color-warning-light: oklch(58% 0.13 70); --color-warning-dark: oklch(82% 0.14 80); --color-warning-soft-light: oklch(96% 0.05 85); --color-warning-soft-dark: oklch(30% 0.06 80); --color-danger-light: oklch(52% 0.18 27); --color-danger-dark: oklch(75% 0.16 25); --color-danger-soft-light: oklch(95% 0.03 27); --color-danger-soft-dark: oklch(28% 0.07 27); --color-info-light: oklch(50% 0.11 245); --color-info-dark: oklch(78% 0.10 240); --color-info-soft-light: oklch(95% 0.03 245); --color-info-soft-dark: oklch(27% 0.05 245); --color-focus-light: var(--gold-600); --color-focus-dark: var(--gold-300); --shadow-color-light: oklch(23% 0.03 268 / 0.18); --shadow-color-dark: oklch(0% 0 0 / 0.5); /* ---- Resolved tokens (light) — use these in components ------------------------------- */ --color-bg: var(--color-bg-light); --color-bg-2: var(--color-bg-2-light); --color-card: var(--color-card-light); --color-line: var(--color-line-light); --color-line-strong: var(--color-line-strong-light); --color-text: var(--color-text-light); --color-text-2: var(--color-text-2-light); --color-muted: var(--color-muted-light); --color-primary: var(--color-primary-light); --color-primary-strong: var(--color-primary-strong-light); --color-primary-soft: var(--color-primary-soft-light); --color-on-primary: var(--color-on-primary-light); --color-ink-surface: var(--color-ink-surface-light); --color-on-ink: var(--color-on-ink-light); --color-accent: var(--color-accent-light); --color-accent-ink: var(--color-accent-ink-light); --color-success: var(--color-success-light); --color-success-soft: var(--color-success-soft-light); --color-warning: var(--color-warning-light); --color-warning-soft: var(--color-warning-soft-light); --color-danger: var(--color-danger-light); --color-danger-soft: var(--color-danger-soft-light); --color-info: var(--color-info-light); --color-info-soft: var(--color-info-soft-light); --color-focus: var(--color-focus-light); --shadow-color: var(--shadow-color-light); /* ---- Typography --------------------------------------------------------------------- */ --font-sans: "Manrope", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-0: 0.875rem; /* 14 — captions, helper text */ --fs-1: 1rem; /* 16 — body */ --fs-2: 1.25rem; /* 20 — h3 */ --fs-3: 1.5625rem; /* 25 — h2 */ --fs-4: 1.953rem; /* 31 — h1 */ --fs-5: 2.441rem; /* 39 — display */ --lh-body: 1.5; --lh-tight: 1.2; --tracking-tight: -0.015em; --tracking-caps: 0.06em; /* ---- Space, radii, shadows ---------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --radius-control: 8px; --radius-card: 12px; --radius-pill: 999px; --shadow-1: 0 1px 2px var(--shadow-color); --shadow-2: 0 12px 32px -16px var(--shadow-color); --measure-form: 44rem; /* 704px — questionnaires */ --measure-wide: 75rem; /* 1200px — dashboards, two-column pages */ --control-height: 2.75rem; /* 44px minimum tap target */ /* ---- Motion ------------------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-1: 150ms; --dur-2: 200ms; accent-color: var(--color-primary); } /* Dark: system preference (unless the page pins light) or explicit data-theme="dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--color-bg-dark); --color-bg-2: var(--color-bg-2-dark); --color-card: var(--color-card-dark); --color-line: var(--color-line-dark); --color-line-strong: var(--color-line-strong-dark); --color-text: var(--color-text-dark); --color-text-2: var(--color-text-2-dark); --color-muted: var(--color-muted-dark); --color-primary: var(--color-primary-dark); --color-primary-strong: var(--color-primary-strong-dark); --color-primary-soft: var(--color-primary-soft-dark); --color-on-primary: var(--color-on-primary-dark); --color-ink-surface: var(--color-ink-surface-dark); --color-on-ink: var(--color-on-ink-dark); --color-accent: var(--color-accent-dark); --color-accent-ink: var(--color-accent-ink-dark); --color-success: var(--color-success-dark); --color-success-soft: var(--color-success-soft-dark); --color-warning: var(--color-warning-dark); --color-warning-soft: var(--color-warning-soft-dark); --color-danger: var(--color-danger-dark); --color-danger-soft: var(--color-danger-soft-dark); --color-info: var(--color-info-dark); --color-info-soft: var(--color-info-soft-dark); --color-focus: var(--color-focus-dark); --shadow-color: var(--shadow-color-dark); } } :root[data-theme="dark"] { color-scheme: dark; --color-bg: var(--color-bg-dark); --color-bg-2: var(--color-bg-2-dark); --color-card: var(--color-card-dark); --color-line: var(--color-line-dark); --color-line-strong: var(--color-line-strong-dark); --color-text: var(--color-text-dark); --color-text-2: var(--color-text-2-dark); --color-muted: var(--color-muted-dark); --color-primary: var(--color-primary-dark); --color-primary-strong: var(--color-primary-strong-dark); --color-primary-soft: var(--color-primary-soft-dark); --color-on-primary: var(--color-on-primary-dark); --color-ink-surface: var(--color-ink-surface-dark); --color-on-ink: var(--color-on-ink-dark); --color-accent: var(--color-accent-dark); --color-accent-ink: var(--color-accent-ink-dark); --color-success: var(--color-success-dark); --color-success-soft: var(--color-success-soft-dark); --color-warning: var(--color-warning-dark); --color-warning-soft: var(--color-warning-soft-dark); --color-danger: var(--color-danger-dark); --color-danger-soft: var(--color-danger-soft-dark); --color-info: var(--color-info-dark); --color-info-soft: var(--color-info-soft-dark); --color-focus: var(--color-focus-dark); --shadow-color: var(--shadow-color-dark); } :root[data-theme="light"] { color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; } }