/* ============================================================ xmesh DS · _primitives.css — raw `--x-*` literals. Theme overrides at the bottom switch primitives in place; semantic tokens (in _semantic.css) reference these and stay constant. DO NOT reference --x-* from components — use --c-* instead. ============================================================ */ /* ---------- DARK (default) ---------- */ :root { /* Canvas — the dark "desk" the chat sits on. Ramp starts at 0.22 (the previous canvas-2) so the default surface reads as a softer dark rather than near-black, then walks ~0.04 per step. Steps 0–4 carry the interactive band (default / raised / hover / active); 5–8 fan out for borders and elevated chrome. `--x-canvas-deep` sits below step 0 — the near-black "trough" used by recessed chrome (e.g. neutral pill) that should read deeper than the canvas itself. */ --x-canvas-deep: oklch(0.132 0.003 60); --x-canvas-0: oklch(0.212 0.003 60); --x-canvas-1: oklch(0.252 0.003 60); --x-canvas-2: oklch(0.292 0.003 60); /* #2c2c2a anchor */ --x-canvas-3: oklch(0.332 0.003 60); --x-canvas-4: oklch(0.372 0.003 60); --x-canvas-5: oklch(0.412 0.003 60); --x-canvas-6: oklch(0.452 0.003 60); --x-canvas-7: oklch(0.492 0.003 60); --x-canvas-8: oklch(0.532 0.003 60); /* Surface — the white / near-white ramp. The card stack in LIGHT theme (dark theme's card now rides the canvas ramp — ADR 0006), plus the muted neutrals (switch / slider tracks) that sit on the card. Steps 0–4 widened so the card / soft-card / border tier separates visually. */ --x-surface-0: #ffffff; --x-surface-1: oklch(0.97 0.003 70); --x-surface-2: oklch(0.93 0.005 70); --x-surface-3: oklch(0.88 0.005 70); --x-surface-4: oklch(0.82 0.006 70); --x-surface-5: oklch(0.74 0.008 70); --x-surface-6: oklch(0.66 0.010 70); --x-surface-7: oklch(0.58 0.012 70); --x-surface-8: oklch(0.50 0.012 70); /* Paper — warm cream sheet for artboards */ --x-paper: oklch(0.95 0.014 78); /* Ink — text on light surfaces */ --x-ink-0: oklch(0.22 0.01 60); --x-ink-1: oklch(0.32 0.01 60); --x-ink-2: oklch(0.42 0.01 60); --x-ink-3: oklch(0.58 0.01 60); --x-ink-4: oklch(0.70 0.01 60); /* Inverse ink — text on canvas surface */ --x-ink-canvas-0: oklch(0.99 0.005 70); --x-ink-canvas-1: oklch(0.92 0.005 70); --x-ink-canvas-2: oklch(0.78 0.01 60); --x-ink-canvas-3: oklch(0.55 0.01 60); --x-ink-canvas-4: oklch(0.40 0.01 60); /* Brand — coral (Claude-aligned ~40° hue, narrower than terracotta) */ --x-accent-soft: #f0d4c5; --x-accent: #cc785c; --x-accent-strong: #a9583e; --x-accent-ink: #ffffff; --x-accent-disabled: #e6dfd8; /* Primary alias of accent — main CTA */ --x-primary-soft: #f0d4c5; --x-primary: #cc785c; --x-primary-strong: #a9583e; --x-primary-ink: #ffffff; --x-primary-disabled: #e6dfd8; /* Secondary — deep olive */ --x-secondary-soft: #c4cdb0; --x-secondary: #5f6e46; --x-secondary-strong: #475333; --x-secondary-ink: #ffffff; } /* ---------- LIGHT theme override ---------- Inverted ramp: canvas = warm cream backdrop (page/sidebar), surface = near-white raised cards on top. Surface is always lighter than canvas so cards/composers/buttons read as elevated on the cream backdrop — mirroring the dark theme's "dark canvas + light card" relationship. Hue shifted 70 → 85 for the editorial cream cast. */ :root[data-theme="light"] { /* Canvas — the warm cream "desk" the cards sit on (page chrome, sidebar). Step 0 is a near-white cool off-cream (#f8f8f6); 1..4 interpolate into the warm-cream family; 5..7 are the existing deep-cream tail; 8 extends the ramp one step darker. In light theme `--x-canvas-deep` is pure white (#fff) — it sits *above* the cream canvas as a raised card-tier well, used by sidebar hover/active fills and the user bubble to read as elevated against the warm cream backdrop. (Dark theme keeps the opposite semantic — `deep` is the darkest trough.) */ --x-canvas-deep: #ffffff; --x-canvas-0: #f8f8f6; --x-canvas-1: oklch(0.96 0.006 90); --x-canvas-2: oklch(0.94 0.010 88); --x-canvas-3: oklch(0.92 0.013 87); --x-canvas-4: oklch(0.89 0.015 86); --x-canvas-5: oklch(0.85 0.017 85); --x-canvas-6: oklch(0.78 0.018 85); --x-canvas-7: oklch(0.70 0.018 85); --x-canvas-8: oklch(0.62 0.018 85); /* Surface — the near-white card stack raised above canvas */ --x-surface-0: #ffffff; --x-surface-1: oklch(0.995 0.002 85); --x-surface-2: oklch(0.985 0.004 85); --x-surface-3: oklch(0.97 0.006 85); --x-surface-4: oklch(0.91 0.010 85); --x-surface-5: oklch(0.86 0.013 85); --x-surface-6: oklch(0.78 0.015 85); --x-surface-7: oklch(0.66 0.018 85); --x-surface-8: oklch(0.58 0.020 85); --x-paper: oklch(0.99 0.005 85); /* Ink on cards (light theme) — same role as dark theme's --x-ink-* */ --x-ink-0: oklch(0.20 0.010 60); --x-ink-1: oklch(0.30 0.010 60); --x-ink-2: oklch(0.42 0.010 60); --x-ink-3: oklch(0.55 0.010 60); --x-ink-4: oklch(0.68 0.010 60); /* Inverse ink — text on the warm cream canvas in light theme */ --x-ink-canvas-0: oklch(0.18 0.005 80); --x-ink-canvas-1: oklch(0.28 0.005 80); --x-ink-canvas-2: oklch(0.42 0.005 80); --x-ink-canvas-3: oklch(0.55 0.006 80); --x-ink-canvas-4: oklch(0.68 0.006 80); /* Brand — coral, slightly deeper for higher contrast on cream canvas */ --x-accent-soft: oklch(0.92 0.045 45); --x-accent: oklch(0.62 0.110 40); --x-accent-strong: oklch(0.50 0.115 38); --x-accent-ink: #ffffff; --x-accent-disabled: oklch(0.88 0.015 60); --x-primary-soft: oklch(0.92 0.045 45); --x-primary: oklch(0.62 0.110 40); --x-primary-strong: oklch(0.50 0.115 38); --x-primary-ink: #ffffff; --x-primary-disabled: oklch(0.88 0.015 60); /* Secondary — deep olive, pulled darker for cream-canvas contrast */ --x-secondary-soft: oklch(0.88 0.045 120); --x-secondary: oklch(0.42 0.055 125); --x-secondary-strong: oklch(0.32 0.050 125); --x-secondary-ink: #ffffff; } /* OS-preference default (ADR 0013): with no `data-theme` pinned, follow the OS. The declarations below MUST stay identical to the `:root[data-theme="light"]` block above — enforced by scripts/check-theme-parity.mjs. An explicit `data-theme` always wins because this selector only matches when the attribute is absent (`:not([data-theme])`). */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --x-canvas-deep: #ffffff; --x-canvas-0: #f8f8f6; --x-canvas-1: oklch(0.96 0.006 90); --x-canvas-2: oklch(0.94 0.010 88); --x-canvas-3: oklch(0.92 0.013 87); --x-canvas-4: oklch(0.89 0.015 86); --x-canvas-5: oklch(0.85 0.017 85); --x-canvas-6: oklch(0.78 0.018 85); --x-canvas-7: oklch(0.70 0.018 85); --x-canvas-8: oklch(0.62 0.018 85); --x-surface-0: #ffffff; --x-surface-1: oklch(0.995 0.002 85); --x-surface-2: oklch(0.985 0.004 85); --x-surface-3: oklch(0.97 0.006 85); --x-surface-4: oklch(0.91 0.010 85); --x-surface-5: oklch(0.86 0.013 85); --x-surface-6: oklch(0.78 0.015 85); --x-surface-7: oklch(0.66 0.018 85); --x-surface-8: oklch(0.58 0.020 85); --x-paper: oklch(0.99 0.005 85); --x-ink-0: oklch(0.20 0.010 60); --x-ink-1: oklch(0.30 0.010 60); --x-ink-2: oklch(0.42 0.010 60); --x-ink-3: oklch(0.55 0.010 60); --x-ink-4: oklch(0.68 0.010 60); --x-ink-canvas-0: oklch(0.18 0.005 80); --x-ink-canvas-1: oklch(0.28 0.005 80); --x-ink-canvas-2: oklch(0.42 0.005 80); --x-ink-canvas-3: oklch(0.55 0.006 80); --x-ink-canvas-4: oklch(0.68 0.006 80); --x-accent-soft: oklch(0.92 0.045 45); --x-accent: oklch(0.62 0.110 40); --x-accent-strong: oklch(0.50 0.115 38); --x-accent-ink: #ffffff; --x-accent-disabled: oklch(0.88 0.015 60); --x-primary-soft: oklch(0.92 0.045 45); --x-primary: oklch(0.62 0.110 40); --x-primary-strong: oklch(0.50 0.115 38); --x-primary-ink: #ffffff; --x-primary-disabled: oklch(0.88 0.015 60); --x-secondary-soft: oklch(0.88 0.045 120); --x-secondary: oklch(0.42 0.055 125); --x-secondary-strong: oklch(0.32 0.050 125); --x-secondary-ink: #ffffff; } }