/* ============================================================ Media Organizer — Design Tokens Editorial cinema archive. Modern · Sharp · Confident. See .impeccable.md for the full design brief. ============================================================ */ :root { /* ---------- Type families ---------- */ --font-display: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Spectral", ui-serif, Georgia, "Times New Roman", serif; --font-mono: "Commit Mono", ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", Consolas, monospace; /* ---------- Modular type scale (1.25 minor third) ---------- */ --text-2xs: 0.6875rem; /* 11px — micro labels */ --text-xs: 0.75rem; /* 12px — small UI */ --text-sm: 0.875rem; /* 14px — secondary UI */ --text-base: 1rem; /* 16px — UI body */ --text-md: 1.125rem; /* 18px — emphasis body */ --text-lg: 1.4375rem; /* 23px — sub headings */ --text-xl: 1.875rem; /* 30px — section headings */ --text-2xl: 2.4375rem; /* 39px — page headings */ --text-3xl: 3.1875rem; /* 51px — hero */ /* Line heights — tight on display, generous on body */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-base: 1.45; --leading-loose: 1.65; /* Tracking — display tight, body neutral, micro slightly opened */ --tracking-tight: -0.02em; --tracking-snug: -0.005em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* Weights — Familjen Grotesk variable axis 300–700 */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ---------- Spacing scale (4pt base) ---------- */ --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* ---------- Radii — restrained, editorial ---------- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */ --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* ---------- Layout ---------- */ --shell-max-width: 1480px; --shell-pad-x: clamp(1.25rem, 3vw, 2.5rem); --shell-pad-y: clamp(1rem, 2vw, 1.75rem); --readable-measure: 68ch; /* ---------- Scrims & shadow tints ---------- Fixed-darkness overlays that work in both themes. The scrim dims the page behind a sheet/dialog (a dim is always darker-ink-on- anything regardless of theme); the shadow tint feeds box-shadows that provide edge depth without pretending to be light glows. */ --scrim-color: oklch(15% 0.012 60 / 0.18); --shadow-edge: oklch(20% 0.02 var(--hue-neutral) / 0.10); /* ---------- Z-index scale — semantic, not magic ---------- Reach for these tokens instead of literal numbers. Higher tier wins. The codebase still has unmigrated literals (1, 5, 30, 50, 90, 100, 1000, 1050, 9999) — sweep them onto this scale incrementally. */ --z-base: 0; /* in-flow content */ --z-raised: 1; /* pseudo-3D lift on hover, etc. */ --z-dropdown: 50; /* disclosures, popovers, autocomplete */ --z-sticky: 90; /* sticky headers / floating action rails */ --z-overlay: 100; /* full-screen scrims that aren't modal */ --z-modal-backdrop: 1000; --z-modal: 1050; --z-modal-stacked: 1100; /* confirm-on-modal, nested dialogs */ --z-toast: 1200; /* always-on-top non-dismissive feedback */ --z-tooltip: 1300; /* ---------- Default theme = light. Brand hue ~50° (warm amber). ---------- */ --hue-brand: 50; --hue-neutral: 60; /* slight warm tint on neutrals */ --hue-success: 150; --hue-warning: 75; --hue-danger: 25; color-scheme: light; } /* =================================================================== LIGHT THEME (default) =================================================================== */ :root, [data-theme="light"] { /* Surfaces — warm cream paper, recessed from pure white so it reads as paper rather than a glaring white screen. Cards (surface-1) sit a touch above the page; surface-2/3 are inset/raised differentiation. */ --surface-page: oklch(96% 0.007 var(--hue-neutral)); --surface-1: oklch(98% 0.005 var(--hue-neutral)); --surface-2: oklch(93.5% 0.009 var(--hue-neutral)); --surface-3: oklch(90% 0.011 var(--hue-neutral)); --surface-inverse: oklch(18% 0.012 var(--hue-neutral)); /* Borders — soft hairlines, never harsh. Bumped slightly darker than the prior values to remain visible against the new lower-L* surfaces. */ --border-subtle: oklch(88% 0.011 var(--hue-neutral)); --border-base: oklch(82% 0.013 var(--hue-neutral)); --border-strong: oklch(67% 0.015 var(--hue-neutral)); /* Text — warm-tinted ink, never pure black */ --text-strong: oklch(18% 0.018 var(--hue-neutral)); --text-base: oklch(28% 0.015 var(--hue-neutral)); --text-muted: oklch(48% 0.012 var(--hue-neutral)); --text-subtle: oklch(62% 0.010 var(--hue-neutral)); --text-inverse: oklch(98% 0.005 var(--hue-neutral)); /* Brand accent — amber/persimmon, AA on cream surface */ --accent: oklch(58% 0.16 var(--hue-brand)); --accent-hover: oklch(52% 0.17 var(--hue-brand)); --accent-pressed: oklch(46% 0.16 var(--hue-brand)); --accent-soft: oklch(94% 0.040 var(--hue-brand)); --accent-soft-hover: oklch(91% 0.055 var(--hue-brand)); --accent-on: oklch(98% 0.010 var(--hue-brand)); /* text on accent */ /* Status colors — restrained, not neon */ --success: oklch(48% 0.13 var(--hue-success)); --warning: oklch(62% 0.16 var(--hue-warning)); --danger: oklch(54% 0.18 var(--hue-danger)); /* Polish content marker — controlled crimson, not full-saturation flag red */ --flag-pl: oklch(54% 0.18 25); /* Brand icon tints — restrained partner-brand hints (e.g. the Filmweb film icon in Settings). OKLCH crimson hue; AA-contrast over --surface-1 cream. */ --brand-filmweb: oklch(56% 0.21 22); /* Focus ring — accent at full chroma */ --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px oklch(58% 0.16 var(--hue-brand) / 0.5); /* Shadows — soft, not the AI rounded-rect-with-drop-shadow tell */ --shadow-sm: 0 1px 2px oklch(20% 0.02 var(--hue-neutral) / 0.04); --shadow-md: 0 2px 6px oklch(20% 0.02 var(--hue-neutral) / 0.06), 0 1px 2px oklch(20% 0.02 var(--hue-neutral) / 0.04); /* Terminal — deep "ink panel" recess used by the Logs tab. Light mode keeps the editorial dark-ink contrast (a printed log volume on cream paper); dark mode recesses BELOW the page so it reads as a well rather than a flipped white box. */ --terminal-bg: oklch(20% 0.013 var(--hue-neutral)); --terminal-ink: oklch(94% 0.006 var(--hue-neutral)); --terminal-muted: oklch(72% 0.010 var(--hue-neutral)); --terminal-border: oklch(30% 0.014 var(--hue-neutral)); /* Terminal log-level inks — tuned to read on the dark interior in BOTH themes (the interior is dark in light- and dark-mode alike, so these are theme-invariant). */ --terminal-success: oklch(78% 0.13 var(--hue-success)); --terminal-warning: oklch(80% 0.13 var(--hue-warning)); --terminal-error: oklch(72% 0.16 var(--hue-danger)); /* --------------------------------------------------------------------------- * Library-scoped tokens (Phase 2, item 12) * Paper-light cream + deep-cinema dark; both themes first-class. * Used by app/static/css/library.css for the gallery surface. * --------------------------------------------------------------------------- */ /* Paper-light: warm cream page recessed below --surface-page so the Library reads as a printed catalogue, not an interface chrome panel. Cap ink is deep charcoal (15.66:1 over page → AA ✓). Frame is a low-contrast warm hairline (~1.37:1) so it whispers around the poster instead of drawing focus. Fallback bg sits one step darker than the page so poster-less tiles read as recessed plates; skeleton sits a hair lighter so the loading shimmer reads as a placeholder, not a final state. 60-30-10: --lib-page is the dominant 60% surface, --lib-tile-frame and --lib-tile-fallback-bg are the 30% secondary tone, accent stays the rare 10% (handled outside this token group). */ --lib-page: oklch(95% 0.008 60); --lib-tile-frame: oklch(85% 0.013 60); --lib-tile-cap: oklch(20% 0.018 60); --lib-tile-fallback-bg: oklch(91% 0.010 60); --lib-skeleton-bg: oklch(93% 0.009 60); } /* =================================================================== DARK THEME =================================================================== */ [data-theme="dark"] { color-scheme: dark; /* Lifted surfaces — eye-comfort dark, not OLED-black. Page sits at ~20% L* so body text at ~85% gives a reasonable L*-delta (~65) without eye strain on long sessions. */ --surface-page: oklch(19.5% 0.009 var(--hue-neutral)); --surface-1: oklch(22.5% 0.011 var(--hue-neutral)); --surface-2: oklch(26% 0.013 var(--hue-neutral)); --surface-3: oklch(30% 0.014 var(--hue-neutral)); --surface-inverse: oklch(95% 0.006 var(--hue-neutral)); --border-subtle: oklch(28% 0.013 var(--hue-neutral)); --border-base: oklch(34% 0.014 var(--hue-neutral)); --border-strong: oklch(48% 0.014 var(--hue-neutral)); /* Light type on dark — recessed from pure white. Body never crosses 88%. */ --text-strong: oklch(90% 0.008 var(--hue-neutral)); --text-base: oklch(82% 0.010 var(--hue-neutral)); --text-muted: oklch(64% 0.012 var(--hue-neutral)); --text-subtle: oklch(50% 0.012 var(--hue-neutral)); --text-inverse: oklch(22% 0.012 var(--hue-neutral)); /* Accent slightly cooled in lightness to sit comfortably on lifted surface */ --accent: oklch(70% 0.14 var(--hue-brand)); --accent-hover: oklch(76% 0.15 var(--hue-brand)); --accent-pressed: oklch(64% 0.14 var(--hue-brand)); --accent-soft: oklch(30% 0.055 var(--hue-brand)); --accent-soft-hover: oklch(35% 0.070 var(--hue-brand)); --accent-on: oklch(15% 0.025 var(--hue-brand)); --success: oklch(68% 0.13 var(--hue-success)); --warning: oklch(74% 0.14 var(--hue-warning)); --danger: oklch(64% 0.16 var(--hue-danger)); --flag-pl: oklch(66% 0.16 25); /* Brand icon tints — lifted L* for dark theme so the Filmweb crimson still reads against lifted surfaces without leaning neon. */ --brand-filmweb: oklch(72% 0.18 22); --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px oklch(70% 0.14 var(--hue-brand) / 0.55); /* Theme-adaptive shadows. `--text-strong` flips between near-black (light) and near-white (dark), so `color-mix` keeps the shadow visible against either surface. Never use literal `oklch(0% 0 0)` — it disappears against a dark page. */ --shadow-sm: 0 1px 2px color-mix(in oklch, var(--text-strong) 32%, transparent); --shadow-md: 0 2px 8px color-mix(in oklch, var(--text-strong) 42%, transparent), 0 1px 2px color-mix(in oklch, var(--text-strong) 24%, transparent); /* Terminal — recessed below the page surface so it reads as a deep well, not a flipped light box. */ --terminal-bg: oklch(13% 0.011 var(--hue-neutral)); --terminal-ink: oklch(86% 0.008 var(--hue-neutral)); --terminal-muted: oklch(58% 0.012 var(--hue-neutral)); --terminal-border: oklch(28% 0.013 var(--hue-neutral)); /* --------------------------------------------------------------------------- * Library-scoped tokens (Phase 2, item 12) * Deep-cinema dark: --lib-page sits BELOW --surface-page (13% vs 19.5% L*) * so posters read as the lit content against a retreated ground — the * gallery effect, achieved through contrast rather than glow. Cap ink is * warm bone (14.00:1 over page → AA ✓). Frame is a warm hairline at ~1.38:1. * Fallback / skeleton bgs sit one step lighter than the page so missing- * poster tiles still read as plates, not voids. Hue 60° (warm-leaning, * matches the rest of the system; never 240° cyan-blue). * --------------------------------------------------------------------------- */ --lib-page: oklch(13% 0.012 60); --lib-tile-frame: oklch(28% 0.014 60); --lib-tile-cap: oklch(88% 0.010 60); --lib-tile-fallback-bg: oklch(18% 0.013 60); --lib-skeleton-bg: oklch(20% 0.013 60); } /* =================================================================== AUTO (system) — applies dark when prefers-color-scheme: dark and the user hasn't explicitly chosen a theme. =================================================================== */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --surface-page: oklch(19.5% 0.009 var(--hue-neutral)); --surface-1: oklch(22.5% 0.011 var(--hue-neutral)); --surface-2: oklch(26% 0.013 var(--hue-neutral)); --surface-3: oklch(30% 0.014 var(--hue-neutral)); --surface-inverse: oklch(95% 0.006 var(--hue-neutral)); --border-subtle: oklch(28% 0.013 var(--hue-neutral)); --border-base: oklch(34% 0.014 var(--hue-neutral)); --border-strong: oklch(48% 0.014 var(--hue-neutral)); --text-strong: oklch(90% 0.008 var(--hue-neutral)); --text-base: oklch(82% 0.010 var(--hue-neutral)); --text-muted: oklch(64% 0.012 var(--hue-neutral)); --text-subtle: oklch(50% 0.012 var(--hue-neutral)); --text-inverse: oklch(22% 0.012 var(--hue-neutral)); --accent: oklch(70% 0.14 var(--hue-brand)); --accent-hover: oklch(76% 0.15 var(--hue-brand)); --accent-pressed: oklch(64% 0.14 var(--hue-brand)); --accent-soft: oklch(30% 0.055 var(--hue-brand)); --accent-soft-hover: oklch(35% 0.070 var(--hue-brand)); --accent-on: oklch(15% 0.025 var(--hue-brand)); --success: oklch(68% 0.13 var(--hue-success)); --warning: oklch(74% 0.14 var(--hue-warning)); --danger: oklch(64% 0.16 var(--hue-danger)); --flag-pl: oklch(66% 0.16 25); /* Brand icon tints — mirror of [data-theme="dark"] for auto mode */ --brand-filmweb: oklch(72% 0.18 22); --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px oklch(70% 0.14 var(--hue-brand) / 0.55); /* Theme-adaptive shadows — see [data-theme="dark"] note above. */ --shadow-sm: 0 1px 2px color-mix(in oklch, var(--text-strong) 32%, transparent); --shadow-md: 0 2px 8px color-mix(in oklch, var(--text-strong) 42%, transparent), 0 1px 2px color-mix(in oklch, var(--text-strong) 24%, transparent); --terminal-bg: oklch(13% 0.011 var(--hue-neutral)); --terminal-ink: oklch(86% 0.008 var(--hue-neutral)); --terminal-muted: oklch(58% 0.012 var(--hue-neutral)); --terminal-border: oklch(28% 0.013 var(--hue-neutral)); /* Library-scoped tokens — mirror of [data-theme="dark"]; see Phase 2 item 12 */ --lib-page: oklch(13% 0.012 60); --lib-tile-frame: oklch(28% 0.014 60); --lib-tile-cap: oklch(88% 0.010 60); --lib-tile-fallback-bg: oklch(18% 0.013 60); --lib-skeleton-bg: oklch(20% 0.013 60); } } /* =================================================================== LEGACY ALIASES The per-tab CSS files still reference --primary-neon, --glass-bg, etc. We map them to muted versions of the new tokens so untouched tabs don't violently clash with the redesigned shell. These will be removed as each tab gets redesigned. =================================================================== */ :root, [data-theme="light"], [data-theme="dark"], [data-theme="auto"] { --bg-dark: var(--surface-page); --glass: var(--surface-1); --glass-bg: var(--surface-1); --glass-border: var(--border-subtle); --primary: var(--accent); --primary-glow: color-mix(in oklch, var(--accent) 25%, transparent); --primary-neon: var(--accent); --secondary-neon: var(--accent-hover); --success-neon: var(--success); --text-main: var(--text-strong); --text-primary: var(--text-strong); --text-dim: var(--text-muted); /* --text-muted is already defined above with the same name */ }