/* ============================================================ FRAME/SHIFT design tokens Single source of truth. Three themes, selected via and persisted in localStorage (fs_theme). Components NEVER hardcode colours — they consume these tokens. ============================================================ */ /* ---------- Theme-independent primitives ---------- */ :root { /* Type — system stacks, fully offline (no CDNs, no bundled binaries). Mono is the voice of machine data: timecodes, VFX IDs, frame counts, filenames, clip names. Always tabular numerals. */ --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace; /* Type scale — 5 sizes only */ --text-xs: 11px; /* labels, kickers, meta */ --text-sm: 12.5px; /* body, table cells, inputs */ --text-md: 14px; /* emphasised values, section heads */ --text-lg: 18px; /* page titles */ --text-xl: 28px; /* the shot-ID hero */ --label-tracking: 0.07em; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; /* ---------- Status palette ---------- Status colours are DATA, not decoration. One fixed hue per status, perceptually consistent across all three themes; themes may only adjust the surface/text pairing for contrast, never the hue family. Every status is always paired with a text label in the UI. */ --status-new-bg: color-mix(in srgb, var(--ink) 12%, var(--surface-1)); --status-new-fg: var(--ink-muted); --status-turned-bg: #1D9E75; --status-turned-fg: #ffffff; --status-hold-bg: #EF9F27; --status-hold-fg: #412402; --status-omit-bg: #888780; --status-omit-fg: #ffffff; --status-approved-bg: #639922; --status-approved-fg: #ffffff; --status-review-bg: #D85A30; --status-review-fg: #ffffff; /* Audit change-kinds reuse status hues */ --diff-changed: var(--status-hold-bg); --diff-omitted: var(--status-review-bg); --diff-new: var(--status-turned-bg); /* Legacy aliases still referenced by inline statusStyle() maps */ --status-new-text: var(--status-new-fg); --status-turned-over: var(--status-turned-bg); --status-on-hold: var(--status-hold-bg); --status-on-hold-text: var(--status-hold-fg); --status-omit: var(--status-omit-bg); --status-approved: var(--status-approved-bg); --status-review: var(--status-review-bg); /* Legacy aliases referenced by page-script inline styles (main.css era). Remove once the scripts stop emitting them. */ --bg-page: var(--bg); --bg-card: var(--surface-1); --bg-secondary: var(--surface-2); --border: var(--line); --text-primary: var(--ink); --text-secondary: var(--ink-muted); --text-tertiary: var(--ink-faint); --text-muted: var(--ink-muted); --muted: var(--ink-muted); --panel: var(--surface-1); --accent-blue: var(--accent); --accent-green: var(--status-turned-bg); --accent-danger: var(--danger); } /* ============================================================ THEME 1 — Deep Focus (default) Near-black, cool grey surfaces, restrained blue accent. The working-in-a-dark-suite theme. ============================================================ */ :root, [data-theme='deep-focus'] { --bg: #0d0e10; /* page background */ --surface-1: #15171a; /* panels, nav, cards */ --surface-2: #1d2024; /* inputs, hover, nested emphasis */ --ink: #e8e9eb; /* primary text / values */ --ink-muted: #9aa0a8; /* labels, secondary */ --ink-faint: #5d646d; /* tertiary, placeholders */ --line: #26292e; /* hairline separators (used sparingly) */ --accent: #4a8fe0; /* primary actions + active states ONLY */ --accent-fg: #ffffff; --accent-soft: rgba(74, 143, 224, 0.14); --danger: #c4554d; /* muted red — destructive, quiet at rest */ --danger-fg: #ffffff; --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* ============================================================ THEME 2 — Quiet Mind Softer dark: slate/charcoal, lifted surfaces, muted periwinkle. Lower contrast for long sessions. ============================================================ */ [data-theme='quiet-mind'] { --bg: #1b1e26; --surface-1: #232733; --surface-2: #2b3040; --ink: #d8dae2; --ink-muted: #989eb0; --ink-faint: #646b80; --line: #313748; --accent: #8c93d8; --accent-fg: #14161f; --accent-soft: rgba(140, 147, 216, 0.16); --danger: #bd6059; --danger-fg: #ffffff; --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --shadow-pop: 0 8px 28px rgba(8, 10, 18, 0.5); color-scheme: dark; } /* ============================================================ THEME 3 — Soft Morning Warm off-white, ink text, warm bronze accent. Daylight / review-room use. ============================================================ */ [data-theme='soft-morning'] { --bg: #f4f1ea; --surface-1: #fbf9f4; --surface-2: #edeae0; --ink: #26241f; --ink-muted: #6e6a60; --ink-faint: #a39e92; --line: #ddd8cc; --accent: #a4742c; --accent-fg: #ffffff; --accent-soft: rgba(164, 116, 44, 0.13); --danger: #b04a42; --danger-fg: #ffffff; /* Status contrast adjustments for light surfaces — same hues */ --status-hold-bg: #e3941c; --status-omit-bg: #7c7b74; --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --shadow-pop: 0 8px 24px rgba(60, 50, 30, 0.14); color-scheme: light; }