/* ========================================================================== Quarry — Design Tokens (v1, both themes) — CSS MIRROR -------------------------------------------------------------------------- COMMITTED SOURCE OF TRUTH (mirror of quarry-design-tokens.ts). This file and its TS twin are canonical; a Figma foundations file and the Quarry MVP repo both MIRROR these values. Change TS first, then mirror here (dual-SoT). Fonts (locked): Cormorant Garamond = wordmark / top-level display only (Cinzel retired 2026-07-22); Inter = UI/body. Display weight rule: Cormorant Garamond is lighter / higher-contrast than Cinzel was — display sets at 600 (semibold) minimum at small sizes, 500-600 at hero sizes, NEVER below 500 (light weights go spindly at display scale). Theme (locked): dual. Dark ("quarried stone") is the default :root; light ("cut face") is opt-in via [data-theme="light"]. Accent-as-text (locked, WCAG AA): --qy-accent-text = ore-300 on dark, ore-700 on light. Copper ore-500/600 is FILL / large-UI only, never body text. Components style THROUGH the semantic --qy-* vars, never the raw ramps. ========================================================================== */ :root { /* ---- PRIMITIVES: Quarried stone (base / ground / surface) ------------- */ --stone-950: #0F1114; --stone-900: #16181C; --stone-800: #1E2127; --stone-700: #272B32; --stone-600: #333841; --stone-500: #4A515B; --stone-400: #6B7280; --stone-300: #9AA3AE; /* dark-mode muted text — WCAG AA (a11y pass 7/25) */ --stone-200: #C9CDD3; --stone-050: #EDEFF2; /* ---- PRIMITIVES: Struck ore (the single accent) ---------------------- */ --ore-700: #7E4A22; --ore-600: #A5652E; --ore-500: #C1793A; --ore-400: #D6924E; --ore-300: #E6A968; --ore-200: #F0C58E; /* ---- PRIMITIVES: Cut face (light neutral / clarity) ------------------ */ --face-000: #FFFFFF; --face-050: #F8F5EF; --face-100: #F1ECE2; --face-200: #E4DDCF; --face-300: #D2C9B6; --face-700: #4A463D; --face-900: #26231D; /* ---- PRIMITIVES: Status ramp (kept distinct from ore.*) -------------- */ --status-strong: #4FA96D; --status-watch: #C98A12; --status-cold: #D97569; --status-info: #679BCC; /* ---- TYPOGRAPHY ------------------------------------------------------- */ --qy-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --qy-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --qy-weight-regular: 400; --qy-weight-medium: 500; --qy-weight-semibold: 600; --qy-weight-bold: 700; --qy-weight-black: 900; /* Inter only — display face follows the rule below */ /* Display weight rule (Cormorant Garamond only): 600 minimum at small display sizes, 500-600 at hero sizes, never below 500 at any size. */ --qy-weight-display-floor: 500; --qy-weight-display-small: 600; --qy-tracking-tight: -0.02em; --qy-tracking-snug: -0.01em; --qy-tracking-normal: 0em; --qy-tracking-wide: 0.02em; --qy-tracking-wider: 0.06em; --qy-tracking-widest: 0.12em; --qy-leading-display: 1.15; --qy-leading-heading: 1.25; --qy-leading-snug: 1.35; --qy-leading-body: 1.5; /* Type scale (size / recommended line-height). display* = Cormorant Garamond, weight per the display weight rule above. */ --qy-text-display-xl: 64px; --qy-text-display-lg: 48px; --qy-text-display-md: 36px; --qy-text-h1: 32px; --qy-text-h2: 24px; --qy-text-h3: 20px; --qy-text-body-lg: 18px; --qy-text-body: 16px; --qy-text-body-sm: 14px; --qy-text-label: 14px; --qy-text-caption: 13px; --qy-text-micro: 12px; /* ---- SPACE (8pt grid) ------------------------------------------------- */ --qy-space-0: 0px; --qy-space-1: 4px; --qy-space-2: 8px; --qy-space-3: 12px; --qy-space-4: 16px; --qy-space-6: 24px; --qy-space-8: 32px; --qy-space-12: 48px; --qy-space-16: 64px; --qy-space-24: 96px; --qy-space-32: 128px; --qy-measure-prose: 72ch; /* ---- RADIUS (crisp, cut-stone) --------------------------------------- */ --qy-radius-none: 0px; --qy-radius-sm: 2px; --qy-radius-md: 4px; --qy-radius-lg: 8px; --qy-radius-xl: 12px; --qy-radius-pill: 9999px; /* ---- MOTION (settle, never bounce) ----------------------------------- */ --qy-dur-micro: 120ms; --qy-dur-base: 200ms; --qy-dur-settle: 320ms; --qy-dur-disclosure: 420ms; --qy-ease-disclosure: cubic-bezier(0.22, 0.8, 0.2, 1); --qy-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --qy-ease-settle: cubic-bezier(0.16, 1, 0.3, 1); /* NO overshoot */ --qy-ease-exit: cubic-bezier(0.4, 0, 1, 1); } /* ========================================================================== SEMANTIC LAYER — components consume these. Dark ("quarried stone") is the DEFAULT on :root. Light is the toggle. ========================================================================== */ :root, :root[data-theme="dark"] { --qy-bg: var(--stone-950); --qy-surface: var(--stone-800); --qy-raised: var(--stone-700); --qy-border: var(--stone-600); --qy-border-subtle: var(--stone-700); --qy-text: var(--stone-050); --qy-text-muted: var(--stone-300); --qy-accent: var(--ore-500); /* brand copper FILL / large-UI only */ --qy-accent-text: var(--ore-300); /* AA-safe accent-as-text on dark */ --qy-accent-hover: var(--ore-400); --qy-accent-pressed:var(--ore-700); --qy-focus-ring: var(--ore-200); --qy-on-accent: var(--stone-950); --qy-status-strong: var(--status-strong); --qy-status-watch: var(--status-watch); --qy-status-cold: var(--status-cold); --qy-status-info: var(--status-info); } :root[data-theme="light"] { --qy-bg: var(--face-050); --qy-surface: var(--face-000); --qy-raised: var(--face-000); --qy-border: var(--face-200); --qy-border-subtle: var(--face-100); --qy-text: var(--face-900); --qy-text-muted: var(--face-700); --qy-accent: var(--ore-600); /* copper fill, darkened for paper */ --qy-accent-text: var(--ore-700); /* AA-safe accent-as-text on light */ --qy-accent-hover: var(--ore-500); --qy-accent-pressed:var(--ore-700); --qy-focus-ring: var(--ore-500); --qy-on-accent: var(--face-000); --qy-status-strong: var(--status-strong); --qy-status-watch: var(--status-watch); --qy-status-cold: var(--status-cold); --qy-status-info: var(--status-info); }