/* ============================================================================ RETRIVIUM — design tokens ---------------------------------------------------------------------------- Three tiers, in order. Never reference a tier-1 value from a component; always go through the semantic alias, so themes stay swappable. tier 1 --rv-* raw palette and raw scales. No meaning attached. tier 2 --color-* semantic. What the value is FOR. --text-*, --space-*, --radius-*, --shadow-*, --dur-*, --ease-* tier 3 --btn-*, --band-*, … component-scoped, defined in components.css Theme mechanism: `light-dark()` resolves against the used `color-scheme`. The OS preference is carried by `color-scheme: light dark` on :root; the in-app toggle stamps [data-theme] which pins `color-scheme` and therefore wins in both directions. There is no second copy of the palette. Baseline since 2024 (Chrome 123 / Safari 17.5 / Firefox 120). ============================================================================ */ :root { color-scheme: light dark; /* ========================================================================== TIER 1 — RAW PALETTE ========================================================================== */ /* Mineral — the neutral ramp. Green-biased on purpose: a pure grey reads as unconsidered, and the bias ties the neutrals to the ink. */ --rv-mineral-50: #F6F8F7; --rv-mineral-100: #F3F6F4; --rv-mineral-200: #E8EDEA; --rv-mineral-300: #DFE3E1; --rv-mineral-400: #D8DFDB; --rv-mineral-500: #C7CFCB; --rv-mineral-600: #9BAAA4; --rv-mineral-650: #7E918A; --rv-mineral-700: #5E7269; --rv-mineral-800: #455953; --rv-mineral-850: #2C3936; --rv-mineral-880: #26312E; --rv-mineral-900: #222D2A; --rv-mineral-920: #1E2725; --rv-mineral-940: #1B2422; --rv-mineral-960: #141B19; --rv-mineral-980: #0E1514; --rv-mineral-990: #0A0F0E; --rv-ink: #0E1A17; /* green-black; the darkest ink, not pure black */ --rv-ink-inverse: #E4EBE7; /* Garnet — the accent. Ruby's own stone, which is what the app mostly teaches. Two meanings only: THE ONE ACTION, and A LOSS. Never anything else. */ --rv-garnet-300: #E88B9C; /* dark-theme action */ --rv-garnet-400: #C4707F; --rv-garnet-500: #B4485C; --rv-garnet-600: #8E2438; /* light-theme action */ --rv-garnet-700: #6E1A2B; /* Slate — state. Rungs held, sessions at the cue, the demand under focus. */ --rv-slate-300: #A2C4D2; --rv-slate-500: #4A7A8C; --rv-slate-700: #2A4E5E; /* Amber — attention, and numeric literals in code. Never a reward. */ --rv-amber-400: #E0A54A; --rv-amber-700: #8A5410; /* Moss — string literals, and "counted" marks in the evidence ledger. */ --rv-moss-300: #8CC0A2; --rv-moss-700: #356449; /* ========================================================================== TIER 2 — SEMANTIC COLOUR ========================================================================== */ /* Ground and surfaces. Elevation goes UP by getting lighter in dark theme, which is why these are not a symmetric inversion. */ --color-ground: light-dark(var(--rv-mineral-300), var(--rv-mineral-990)); --color-surface: light-dark(var(--rv-mineral-100), var(--rv-mineral-960)); --color-surface-sunk: light-dark(var(--rv-mineral-200), var(--rv-mineral-940)); --color-surface-high: light-dark(var(--rv-mineral-400), var(--rv-mineral-900)); /* Text. Four levels, and that is the whole set. Every level clears 4.5:1 on --color-surface in both themes, including --text-subtle at 10px — which is why it is darker than it looks like it wants to be. Do not lighten it back. */ --color-text: light-dark(var(--rv-ink), var(--rv-ink-inverse)); --color-text-muted: light-dark(var(--rv-mineral-800), #91A49C); --color-text-subtle: light-dark(var(--rv-mineral-700), #7A8D86); --color-text-inverse: light-dark(var(--rv-mineral-100), var(--rv-mineral-990)); /* Lines. Two jobs, and they are not interchangeable: --color-border separators and card outlines. Decorative; no contrast floor applies. --color-border-strong the visible boundary of an INTERACTIVE control — field, ghost button, chip, rung cell. WCAG 1.4.11 wants 3:1 for these, so they get their own token. */ --color-border: light-dark(var(--rv-mineral-500), var(--rv-mineral-880)); --color-border-soft: light-dark(var(--rv-mineral-400), var(--rv-mineral-920)); --color-border-strong: light-dark(var(--rv-mineral-650), #657872); /* Signal. Read the names literally — they are the whole colour policy. There is no --color-success. Correctness has no colour of its own, because the product never celebrates a right answer (C6). */ --color-action: light-dark(var(--rv-garnet-600), var(--rv-garnet-300)); --color-action-text: light-dark(#FFFFFF, #12100F); --color-loss: var(--color-action); /* deliberately the same hue */ --color-state: light-dark(var(--rv-slate-700), var(--rv-slate-300)); --color-state-text: light-dark(var(--rv-mineral-100), var(--rv-mineral-990)); --color-state-wash: light-dark(rgba(42, 78, 94, .10), rgba(162, 196, 210, .11)); --color-attention: light-dark(var(--rv-amber-700), var(--rv-amber-400)); --color-counted: light-dark(var(--rv-moss-700), var(--rv-moss-300)); --color-focus: var(--color-state); /* Code */ --color-code-bg: light-dark(#E4EAE7, var(--rv-mineral-980)); --color-code-text: var(--color-text); --color-code-keyword: var(--color-state); --color-code-string: var(--color-counted); --color-code-number: var(--color-attention); --color-code-comment: var(--color-text-subtle); --color-code-live: var(--color-state-wash); /* ========================================================================== TIER 2 — TYPE -------------------------------------------------------------------------- System stacks by choice. Typography here is load management, not personality: legibility, spacing and hierarchy are the job. If a licensed face is bought later it replaces --font-sans only; nothing else moves. ========================================================================== */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Eight steps. Each has exactly one job — see COMPONENTS.md. Do not introduce a ninth without deleting one. */ --text-2xs: 0.625rem; /* 10px · eyebrow, micro label. mono + uppercase + tracking */ --text-xs: 0.6875rem; /* 11px · section label, chip */ --text-sm: 0.75rem; /* 12px · block chips, hint rows, table cells */ --text-md: 0.8125rem; /* 13px · secondary body, captions, .note */ --text-lg: 0.875rem; /* 14px · feedback body, evidence rows */ --text-base: 1rem; /* 16px · UI body, the learning goal, buttons */ --text-xl: 1.0625rem; /* 17px · reading — capability statements, prose */ --text-2xl: 1.375rem; /* 22px · THE plan sentence and THE item prompt. Nothing else. */ --text-heading: clamp(1.5rem, 3vw, 2rem); --text-display: clamp(2.25rem, 7.4vw, 4.5rem); --weight-normal: 400; --weight-medium: 560; --weight-semi: 620; --weight-bold: 650; --leading-tight: 1.22; --leading-snug: 1.34; --leading-normal: 1.5; --leading-body: 1.55; --leading-code: 1.75; --tracking-display: -0.026em; --tracking-tight: -0.012em; --tracking-normal: 0; --tracking-label: 0.14em; /* uppercase micro labels only */ --tracking-wordmark:0.13em; --measure: 62ch; /* max line length for running prose */ /* ========================================================================== TIER 2 — SPACE (4px base) ========================================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Contextual */ --band-inset: var(--space-4) var(--space-5); --action-inset: var(--space-4) var(--space-5) var(--space-5); /* ========================================================================== TIER 2 — RADIUS, ELEVATION, MOTION, LAYERS ========================================================================== */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px; --radius-app: 26px; /* the app shell */ --radius-pill: 999px; --shadow-1: 0 1px 2px light-dark(rgba(14,26,23,.06), rgba(0,0,0,.5)); --shadow-2: 0 1px 2px light-dark(rgba(14,26,23,.05), rgba(0,0,0,.45)), 0 10px 28px -10px light-dark(rgba(14,26,23,.22), rgba(0,0,0,.7)); --shadow-3: 0 2px 4px light-dark(rgba(14,26,23,.05), rgba(0,0,0,.4)), 0 22px 48px -16px light-dark(rgba(14,26,23,.26), rgba(0,0,0,.75)); --shadow-hairline: inset 0 1px 0 light-dark(rgba(255,255,255,.7), rgba(255,255,255,.045)); /* Motion exists for exactly two things: the representational trace, and receding chrome. See MOTION.md before using any of these anywhere else. */ --dur-fast: 150ms; --dur-base: 200ms; --dur-trace: 1100ms; /* auto-step interval for the trace player */ --dur-reveal: 600ms; /* §7.9 delay between commit and reveal */ --ease-out: cubic-bezier(.2, .8, .3, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --z-base: 0; --z-sticky: 10; --z-action: 20; --z-overlay: 50; --app-max: 30rem; /* the session surface never gets wider than this */ --page-max: 76rem; /* records, map, instrumentation */ } /* The in-app toggle. Pinning color-scheme is what makes light-dark() obey it. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; }