/* Design tokens shared across all dashboard pages. */ /* Loaded BEFORE per-page styles so any per-page rule still wins. */ /* ────────────────────────────────────────────────────────────────── Redesign token system (see tasks/handover/02-design-system.md). Source of truth: warm-neutral dark surfaces + a mana-color accent. All colors OKLCH (Caddy serves modern browsers; OKLCH support is fine). The block below defines the NEW tokens (--bg, --text, --accent, --r-*). Legacy names (--color-*, --radius-*) are kept as ALIASES at the bottom of :root so the ~1,300 existing references keep working and retint until each section is migrated to bare tokens. Do NOT remove an alias until grep shows zero references to it outside this file. ────────────────────────────────────────────────────────────────── */ :root { /* ── Surfaces (warm neutral, hue 60) ── */ --bg: oklch(0.165 0.005 60); --bg-elev-1: oklch(0.205 0.005 60); --bg-elev-2: oklch(0.245 0.006 60); --bg-hover: oklch(0.285 0.007 60); --border: oklch(0.32 0.006 60); --border-soft: oklch(0.26 0.006 60); --border-strong: oklch(0.42 0.008 60); /* ── Text ── */ --text: oklch(0.96 0.004 60); --text-2: oklch(0.78 0.005 60); --text-3: oklch(0.60 0.006 60); --text-4: oklch(0.46 0.006 60); /* ── Accent (mana-color driven; default G/jade until prefs load). theme.js overrides these on :root from the user's preference. ── */ --accent: oklch(0.72 0.12 165); --accent-hover: oklch(0.78 0.12 165); --accent-dim: oklch(0.48 0.10 165); --accent-soft: oklch(0.72 0.12 165 / 0.16); --accent-ring: oklch(0.72 0.12 165 / 0.40); --on-accent: oklch(0.16 0.012 165); /* Style Assistant + chat dock + a few other sections reference these as compound names with fallbacks to legacy aliases. Define them properly so the mana-accent system actually drives the treatments. */ --accent-bg: var(--accent-soft); /* subtle alpha tint for active chips */ --accent-fg: var(--text); /* readable text on the soft tint */ --accent-border: var(--accent); /* full-strength accent for borders/rings */ /* ── Status (semantic, fixed — NOT mana-driven) ── */ --success: oklch(0.78 0.14 150); --warning: oklch(0.82 0.14 80); --danger: oklch(0.72 0.18 25); --info: oklch(0.78 0.10 230); /* ── MTG color identity pips (printed-card colors, independent of theme) ── */ --mtg-w: #f4ecd3; --mtg-u: #4a8bce; --mtg-b: #2a2424; --mtg-r: #d76250; --mtg-g: #5fa472; /* ── Type stacks (loaded via in shell.html, CDN — never self-hosted @font-face, which fails inside the proxy preview iframes) ── */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; --font-display: 'Instrument Serif', 'Times New Roman', serif; /* ── Radii (redesign scale) ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ── Shadows ── */ --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 14px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4); --shadow-pop: 0 20px 50px -10px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35); /* v4 Phase G1 #35: upward-cast shadow for sticky save bars / bottom-anchored panels that float above scrolling content. Replaces hardcoded `box-shadow rgba(0, 0, 0, 0.2)` literals in section CSS. */ --shadow-up: 0 -4px 12px rgba(0,0,0,.2); /* v4 Phase G1 #35: image-overlay tokens for hero / cover captions and chips that sit on top of arbitrary art. The scrim is a dark-on-dark alpha tint (the underlying image dominates the hue), and the on-overlay text uses a reliable near-white. These intentionally don't flip with theme -- the scrim is over user-rendered art, so the foreground must read regardless of which theme the dashboard is in. */ --color-overlay-scrim: rgba(0, 0, 0, 0.55); --color-on-overlay: #fff; /* Density multiplier (redesign). Sections that honor it read var(--density); 1 = comfortable. The legacy data-density="compact" path (theme.css) still rewrites --space-* for now; reconcile in Phase 3/4. */ --density: 1; /* ── Global UI scale ────────────────────────────────────────────────── The whole dashboard renders at this factor via `body { zoom }` (shell.css), so the entire UI -- px-based type, spacing, chrome, art -- scales uniformly. 1 = native. Mobile-first: native (1) below --bp-md so phones get full width; desktop opts into the larger 1.204 chrome at --bp-md+ (see the override below :root). INVARIANT: `zoom` scales explicit VIEWPORT UNITS too, so a raw `100dvh` would render at ~120dvh and overflow the fixed-height shell. Every viewport- unit length (dvh / svh / lvh / vh / vw / vmin / vmax) MUST be divided by this scale so it renders at its intended fraction of the real viewport, e.g. height: calc(100dvh / var(--ui-scale, 1)); max-height: calc(88dvh / var(--ui-scale, 1)); width: min(460px, calc(92vw / var(--ui-scale, 1))); Percentages, flex, and auto sizing are UNAFFECTED (they resolve against the already-zoomed box) -- do not divide those. Media queries evaluate against the real viewport, so breakpoints are unchanged (desktop stays desktop, just larger). To revert the whole UI to native size on desktop too, set the override below to 1. */ --ui-scale: 1; /* ───────────────── Structural tokens (kept from the original system — the redesign defines no spacing/breakpoint/page/z tokens, and sections depend on these. Do not alias these to anything; keep literal. ── */ /* Spacing scale (4-px rhythm) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; /* Type scale. Sections reference --font-size-* pervasively but the scale wasn't declared; every reference fell back to inherited body size. Style Assistant + chat dock were the loudest victims. Modest scale because we use the warmer dense base; bump base by adjusting body. */ --font-size-xs: 11px; --font-size-sm: 13px; --font-size-md: 15px; --font-size-lg: 17px; --font-size-xl: 20px; --font-size-2xl: 26px; /* Page widths */ --page-narrow: 78ch; --page-medium: 1100px; --page-wide: 1200px; --page-xwide: 1800px; --page-pad: 24px; /* Content max-widths for readable columns + card grids. These replace ad-hoc 640/720 literals (studio empty-state + preview grid, decks light tabs); they are content constraints, NOT @media breakpoints. */ --w-readable: 640px; --w-grid: 720px; /* Layout breakpoints (mobile-first; see .claude/rules/mobile-first.md) */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* Legacy aliases (do not use in new code) */ --bp-phone: 480px; --bp-mobile: 640px; --bp-narrow: 768px; --bp-medium: 1100px; --bp-wide: 1440px; /* Touch targets (Apple HIG / Material guideline) */ --touch-target: 44px; --touch-target-lg: 48px; /* Z-index ladder (primitives-spec section 6: content, sticky chrome, drawer scrim, drawers, palette, toasts -- tokens, never literals). One ladder: the Phase 3 primitives use the named rungs below; --z-modal / --z-fullscreen are kept as aliases so the Phase 2 tray + region CSS keeps resolving. */ --z-sticky: 30; /* sticky chrome: topbar, sidebar, context strip */ --z-drawer-scrim: 80; /* scrim behind drawers + the Activity/Shortlist trays */ --z-bottom-sheet: 90; /* phone bottom sheet floor (one sheet, never stacked) */ --z-dock: 95; /* assistant dock: above content, yields to the drawer + palette + toasts */ --z-drawer: 100; /* detail-drawer stack + the trays */ --z-palette: 200; /* command palette, sits above any open drawer */ --z-toast: 300; /* receipts/undo toasts, top of the ladder */ --z-modal: var(--z-drawer); /* legacy alias -> drawer rung */ --z-fullscreen: var(--z-palette); /* legacy alias -> palette rung */ /* Transitions */ --transition-fast: 150ms ease; --transition-snap: 180ms ease-out; --transition-slide: 220ms ease-out; /* ───────────────── Legacy color/radius aliases ───────────────── Map the old variable names onto the new tokens so existing section CSS keeps working and retints. Retire each, section by section, in Phase 3. */ --color-bg: var(--bg); --color-surface: var(--bg-elev-1); --color-surface-2: var(--bg-elev-2); --color-surface-3: var(--bg-hover); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-border-soft: var(--border-soft); --color-text: var(--text); --color-text-dim: var(--text-2); --color-text-muted: var(--text-3); --color-text-faint: var(--text-4); --color-text-disabled: var(--text-4); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); /* old --color-accent-soft was a lighter SOLID accent used as a fill/ring; the new --accent-soft is an alpha. Use the solid accent as the safe map. */ --color-accent-soft: var(--accent); --color-purple: oklch(0.62 0.16 300); --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger); --color-danger-strong: oklch(0.58 0.20 25); --color-danger-bg: oklch(0.34 0.10 25); --radius-sm: var(--r-sm); --radius-md: var(--r-sm); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-pill: var(--r-pill); /* ── Orphan-token compatibility aliases ────────────────────────────── These names were referenced by sections (chat dock, chat page history panel, Rules TOC + rule detail) but never defined, so every reference silently fell back to a hardcoded dark literal and the panel stayed dark in light/sepia mode. Mapping them onto the canonical theme-aware tokens lets them retint. (Intentionally NOT defining --text-primary/--bg-primary/ --bg-secondary/--border-default/--accent-primary: those belong to the proxy deck-review-doc, which is deliberately dark on every theme.) */ --color-surface-1: var(--bg-elev-1); --bg-elevated: var(--bg-elev-1); --fg: var(--text); --fg-muted: var(--text-3); --surface-2: var(--bg-elev-2); --surface-3: var(--bg-hover); --color-accent-subtle: var(--accent-soft); --color-warning-subtle: oklch(0.82 0.14 80 / 0.16); /* ── Semantic status pill tokens (info / success / warning / danger / purple). Used to retint the colored status pills that were previously hardcoded as dark-tint-bg + light-text (illegible-feeling on a light surface). `-soft` and `-border` mix the status hue over --bg-elev-1, so they flip automatically with the theme (dark tint on dark, pale tint on light). `-text` needs a light-theme override (see below) because the status hues are tuned light for dark surfaces and would be too pale to read on a light pill. */ --info-soft: color-mix(in oklab, var(--info) 15%, var(--bg-elev-1)); --info-border: color-mix(in oklab, var(--info) 42%, var(--bg-elev-1)); --info-text: var(--info); --success-soft: color-mix(in oklab, var(--success) 15%, var(--bg-elev-1)); --success-border: color-mix(in oklab, var(--success) 42%, var(--bg-elev-1)); --success-text: var(--success); --warning-soft: color-mix(in oklab, var(--warning) 15%, var(--bg-elev-1)); --warning-border: color-mix(in oklab, var(--warning) 42%, var(--bg-elev-1)); --warning-text: var(--warning); --danger-soft: color-mix(in oklab, var(--danger) 15%, var(--bg-elev-1)); --danger-border: color-mix(in oklab, var(--danger) 42%, var(--bg-elev-1)); --danger-text: var(--danger); --purple-soft: color-mix(in oklab, var(--color-purple) 15%, var(--bg-elev-1)); --purple-border: color-mix(in oklab, var(--color-purple) 42%, var(--bg-elev-1)); --purple-text: var(--color-purple); /* ── redesign-2026 styling pass: deeper surfaces + stronger borders so cards read as cards (bg<->card were only ~4% L apart before), brighter secondary/ tertiary text, and a single --focus-ring token consumed by ds/interactions.css. Additive overrides of the surface/text/border tokens declared above (later in :root wins on equal specificity); the [data-theme="light"/"oled"] blocks below still override these for those themes. Hue nudged 60 -> 56 (slightly cooler warm-neutral). Non-destructive: the originals stay above for easy revert. ── */ --bg: oklch(0.142 0.006 56); --bg-elev-1: oklch(0.196 0.007 56); --bg-elev-2: oklch(0.236 0.008 56); --bg-hover: oklch(0.275 0.009 56); --border-soft: oklch(0.285 0.008 56); --border: oklch(0.345 0.008 56); --border-strong: oklch(0.44 0.010 56); --text-2: oklch(0.80 0.005 56); --text-3: oklch(0.635 0.007 56); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring); } /* Desktop opts into the larger chrome; phones stay at native scale (--bp-md, 768px). The min-height term (Phase 3, Commander Companion RESPONSIVE-AUDIT finding 5): a width-only gate scaled LANDSCAPE PHONES (844x390, 896x414) up like tablets, shrinking effective layout space exactly where it is scarcest -- a landscape phone must stay at native scale. Real desktops and tablets are always taller than 500px, so they are unaffected. */ @media (min-width: 768px) and (min-height: 500px) { :root { --ui-scale: 1.204; } } /* ── Light theme — inverse warm surfaces. Overrides the NEW tokens; the legacy --color-* aliases in :root cascade automatically, so theme.css no longer needs to redeclare them for light. ── */ [data-theme="light"] { --bg: oklch(0.985 0.003 70); --bg-elev-1: oklch(1.00 0 0); --bg-elev-2: oklch(0.97 0.004 70); --bg-hover: oklch(0.94 0.005 70); --border: oklch(0.88 0.005 70); --border-soft: oklch(0.92 0.004 70); --border-strong: oklch(0.78 0.006 70); --text: oklch(0.18 0.008 60); --text-2: oklch(0.36 0.008 60); --text-3: oklch(0.52 0.008 60); --text-4: oklch(0.68 0.006 60); --shadow-1: 0 1px 2px rgba(20,15,10,.04); --shadow-2: 0 6px 18px -4px rgba(20,15,10,.08), 0 1px 2px rgba(20,15,10,.05); --shadow-pop: 0 24px 60px -16px rgba(20,15,10,.18), 0 4px 12px rgba(20,15,10,.08); /* Darker status-text so colored pill labels stay legible on the pale light-theme `-soft` fills (the default light hues are too bright here). */ --info-text: oklch(0.48 0.15 250); --success-text: oklch(0.45 0.14 150); --warning-text: oklch(0.47 0.12 70); --danger-text: oklch(0.50 0.20 25); --purple-text: oklch(0.48 0.18 300); } /* ── OLED theme — true-black variant of dark (battery-saving on AMOLED). Mirrors theme.css's legacy --color-* OLED palette onto the new tokens so the redesigned shell/components also go true-black under [data-theme=oled]. ── */ [data-theme="oled"] { --bg: #000000; --bg-elev-1: #0a0a0a; --bg-elev-2: #141414; --bg-hover: #1c1c1c; --border: #2a2a2a; --border-soft: #1c1c1c; --border-strong: #3d3d3d; --text: #f0f0f0; --text-2: #d4d4d4; --text-3: #b4b4b4; --text-4: #909090; }