/* ============================================================================ æther — Design Tokens v2 (2026-07) Dark-only. Open Sans UI + mono for technical metadata. Brand teal + time blue. v2 supersedes v1 (preserved in v1/colors_and_type.css). What changed: — SURFACES: one flat surface (--bg-app) divided by 1px hairlines and space. v1's tinted floating panels (gray-131 cards on black, 10px gutters) are deprecated. Depth now = hairline + padding, tint only on interactive rest. — COLOR RESTRAINT: teal reserved for primary action, selection, and links. Everything else is grayscale first. New muted oklch hue sets for departments and workflow status, applied via color-mix tints. — QUIETER CHROME: no glows, gradients, breathing animations, or badge noise. Motion is 140ms ease; reveal-on-hover for secondary affordances. — TYPE: mono promoted to a full role (scene numbers, slugs, version tags, prompt text, timecode). Uppercase micro-labels tracked 0.1–0.12em. Load Open Sans in the of any consuming file: ============================================================================ */ :root { /* -------------------------------------------------------------------------- 1. COLOR PRIMITIVES — grayscale ramp (unchanged from v1) -------------------------------------------------------------------------- */ --gray-000: #000000; --gray-131: #131313; /* darkest app surface */ --gray-1d: #1D1D1D; /* base surface (thumb wells, image backing) */ --gray-25: #252525; /* raised surface (floating chrome only in v2) */ --gray-2c: #2C2C2C; /* avatar fill */ --gray-34: #343434; /* strong divider */ --gray-38: #383838; /* input focus surface */ --gray-4b: #4B4B4B; --gray-58: #585858; --gray-75: #757575; --gray-90: #909090; --gray-aa: #AAAAAA; --gray-c0: #C0C0C0; --gray-d9: #D9D9D9; --gray-e2: #E2E2E2; --white: #FFFFFF; /* white overlays — the depth system (no shadows; layered tints) */ --white-a05: rgba(255,255,255,0.05); /* hover wash / interactive rest fill */ --white-a10: rgba(255,255,255,0.10); /* hairline borders / hover fill */ --white-a15: rgba(255,255,255,0.15); /* raised tint / dashed affordances */ --white-a25: rgba(255,255,255,0.25); /* hover border / scrub track */ /* -------------------------------------------------------------------------- 2. BRAND + ACCENT v2 rule: teal appears at most THREE ways on a screen — one primary action, the current selection, and links. If teal reads as decoration, remove it. -------------------------------------------------------------------------- */ --teal: #008484; /* primary action fill / selection bar */ --teal-bright: #25CBCB; /* links, hover lift, live indicators */ --teal-dark: #005151; /* pressed */ --teal-a10: rgba(0,132,132,0.10); /* selected row/card bg */ --teal-a15: rgba(0,132,132,0.15); --teal-a25: rgba(0,132,132,0.25); /* selection tint strong / chip border */ --teal-a50: rgba(0,132,132,0.50); /* selected chip border / underline */ --teal-a13: rgba(0,132,132,0.13); /* text highlight tint */ --blue: #2E84E6; /* TIME ONLY — playhead, timecode. Never a general accent. */ --blue-a25: rgba(46,132,230,0.25); /* -------------------------------------------------------------------------- 3. DECISION-STATE COLORS (unchanged semantics from v1) -------------------------------------------------------------------------- */ --approved: #3CB371; --approved-a15: rgba(60,179,113,0.15); --contender: #A6884E; --contender-a15: rgba(166,136,78,0.15); --candidate: #C0C0C0; /* bright NEUTRAL — deliberately hueless */ --rejected: #D53939; --rejected-a12: rgba(213,57,57,0.12); --rejected-chip: #C28686; /* rejected is a calm state, not an alarm */ --rejected-ink: #3A1010; --danger: #D53939; --danger-bright: #FF5B58; --aether-handle: #25CBCB; /* @æther brand-styled handle */ /* -------------------------------------------------------------------------- 4. CATEGORY HUES — NEW in v2 Muted oklch family: lightness 72–78%, chroma 0.09–0.11, hue varies. Never used as fills. Applied as tints via the color-mix recipe: background: color-mix(in oklab, var(--dc) 6%, transparent); rest border: color-mix(in oklab, var(--dc) 18%, transparent); rest (13% / 34% hover · 22% / 55% selected, text = the hue itself) Extend the family at the same L/C when new categories appear. -------------------------------------------------------------------------- */ --dept-sets: oklch(72% 0.10 195); --dept-characters: oklch(76% 0.09 80); --dept-props: oklch(74% 0.09 310); --dept-vehicles: oklch(73% 0.10 45); /* workflow status (chips): color-mix 12% bg, hue text */ --st-review: oklch(75% 0.09 240); --st-revision: oklch(78% 0.11 75); --st-approved: oklch(76% 0.12 155); /* -------------------------------------------------------------------------- 5. SEMANTIC SURFACES v2: ONE surface. Panes are regions of --bg-app separated by --border-hair and padding — not tinted cards. Tinted fills (--white-a05) mark INTERACTIVE rest states (tiles, cards, inputs), not structure. -------------------------------------------------------------------------- */ --bg-app: var(--gray-131); --bg-base: var(--gray-1d); /* image/thumb backing */ --bg-raised: var(--white-a05); /* interactive card/tile at rest (was gray-25) */ --bg-raised-hover: var(--white-a10); --bg-focus: var(--gray-38); /* input focus */ --bg-float: var(--gray-25); /* floating chrome only: menus, popovers, toasts */ --bg-selected: var(--teal-a10); --border-hair: var(--white-a10); /* THE structural divider */ --border-strong: var(--gray-34); /* deprecated v1 aliases (kept so v1 screens still render): */ --bg-lane: var(--white-a05); --bg-active: var(--teal-a15); /* -------------------------------------------------------------------------- 6. SEMANTIC TEXT / ICON (unchanged) -------------------------------------------------------------------------- */ --fg1: var(--gray-e2); --fg2: var(--gray-d9); --fg3: var(--gray-aa); --fg-muted: var(--gray-75); --fg-faint: var(--gray-4b); --fg-hover: var(--gray-c0); --icon: var(--gray-aa); --icon-hover: var(--gray-c0); --on-brand: var(--white); /* -------------------------------------------------------------------------- 7. TYPOGRAPHY Open Sans for UI. Mono is a first-class ROLE in v2: scene numbers, slugs, version tags (v12), prompt/spec text, timecode, ID tokens. It signals "machine-readable"; never body prose. -------------------------------------------------------------------------- */ --font-ui: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; /* Type scale — v2 additions marked */ --fs-h1: 60px; /* display — film titles on hero */ --fs-h2: 32px; --fs-h3: 18px; --fs-pane: 16px; /* v2: pane title (semibold, -0.01em) */ --fs-h4: 14px; --fs-body: 14px; --fs-body-sm: 12.5px; /* v2: dense-list body, buttons, crumbs */ --fs-meta: 12px; --fs-small: 11px; --fs-label: 11px; /* v2: uppercase section label (semibold, 0.1em) */ --fs-micro: 10px; --lh-tight: 1.0; --lh-snug: 1.2; --lh-normal: 1.45; --ls-label: 0.1em; /* v2: uppercase section/region labels (0.12em for bold micro) */ --ls-tc: 1.2px; /* timecode + mono IDs */ --ls-lane: 0.42px; /* v1 lane titles (legacy) */ /* -------------------------------------------------------------------------- 8. SPACING Scale unchanged; v2 usage is more generous: pane gutters 24–28px, pane head height 48–56px, section gaps 20–28px. Divide with a hairline AND space — never space alone between unrelated regions. -------------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 32px; --sp-gutter: 28px; /* v2: horizontal pane gutter */ /* -------------------------------------------------------------------------- 9. RADIUS — v2 rebalanced -------------------------------------------------------------------------- */ --r-xs: 2px; /* micro chrome: token chips, thumb corners */ --r-sm: 4px; /* buttons, rows, inputs */ --r-md: 10px; /* cards + tiles (interactive rest surfaces) */ --r-full: 9999px; /* v2: ALL chips, filter pills, role badges, avatars */ /* -------------------------------------------------------------------------- 10. MOTION — NEW in v2 (was ad hoc) -------------------------------------------------------------------------- */ --dur-fast: 140ms; /* color/background/border hover transitions */ --dur-med: 240ms; /* pane resize, region collapse */ --ease: ease; /* No pulses, glows, or breathing loops. Entrance = fade only. */ /* -------------------------------------------------------------------------- 11. ICON SIZES (unchanged) + ELEVATION -------------------------------------------------------------------------- */ --icon-inline: 16px; --icon-nav: 20px; --icon-transport: 32px; --icon-play: 40px; /* Depth = layered tints. Shadow ONLY on floating chrome. */ --shadow-float: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.25); } /* ============================================================================ SEMANTIC TYPE ROLES ============================================================================ */ .aether-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-ui); color: var(--fg1); letter-spacing: -0.5px; } .aether-h2 { font: var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-ui); color: var(--fg1); } .aether-h3 { font: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-ui); color: var(--fg1); } .aether-pane-title { font: var(--fw-semibold) var(--fs-pane)/var(--lh-snug) var(--font-ui); color: var(--fg1); letter-spacing: -0.01em; } .aether-h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-ui); color: var(--fg1); } .aether-body { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-ui); color: var(--fg1); } .aether-meta { font: var(--fw-regular) var(--fs-meta)/var(--lh-snug) var(--font-ui); color: var(--fg-muted); } .aether-small { font: var(--fw-regular) var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--fg3); } .aether-micro { font: var(--fw-regular) var(--fs-micro)/var(--lh-snug) var(--font-ui); color: var(--fg-muted); } /* v2: uppercase section label — replaces v1 lane-title for all region heads */ .aether-label { font: var(--fw-semibold) var(--fs-label)/var(--lh-snug) var(--font-ui); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--fg-muted); } /* v2: mono metadata — scene numbers, version tags, ID tokens */ .aether-mono { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg2); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .aether-timecode { font: var(--fw-regular) var(--fs-meta)/var(--lh-tight) var(--font-ui); letter-spacing: var(--ls-tc); color: var(--fg-muted); font-variant-numeric: tabular-nums; } /* ============================================================================ v2 STRUCTURAL RECIPES — copy these patterns, do not reinvent ============================================================================ */ /* pane division: hairline, not tint */ .aether-pane { border-right: 1px solid var(--border-hair); } .aether-pane-head { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 8px var(--sp-gutter); border-bottom: 1px solid var(--border-hair); } /* interactive card at rest / hover / selected */ .aether-card { background: var(--bg-raised); border-radius: var(--r-md); cursor: pointer; transition: background var(--dur-fast) var(--ease); } .aether-card:hover { background: var(--bg-raised-hover); } .aether-card.sel { background: var(--bg-selected); box-shadow: inset 2px 0 0 var(--teal); } /* list row selection: tint + inset left bar (never outlines/glows) */ .aether-row.sel { background: var(--bg-selected); box-shadow: inset 2px 0 0 var(--teal); } /* chip (filter/category) */ .aether-chip { background: none; font-size: var(--fs-small); color: var(--fg-muted); border: 1px solid var(--white-a10); border-radius: var(--r-full); padding: 3px 11px; white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .aether-chip:hover { color: var(--fg-hover); border-color: var(--white-a25); } .aether-chip.sel { color: var(--teal-bright); border-color: var(--teal-a50); background: var(--teal-a10); } /* quiet scrollbars — invisible until hover */ .aether-scroll * { scrollbar-width: thin; scrollbar-color: transparent transparent; } .aether-scroll *:hover, .aether-scroll *:focus-within { scrollbar-color: var(--white-a10) transparent; } .aether-scroll ::-webkit-scrollbar { width: 10px; height: 10px; } .aether-scroll ::-webkit-scrollbar-track { background: transparent; } .aether-scroll ::-webkit-scrollbar-thumb { background: transparent; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } .aether-scroll *:hover::-webkit-scrollbar-thumb { background: var(--white-a10); background-clip: padding-box; } /* links */ a { color: var(--teal-bright); text-decoration: none; } a:hover { color: var(--fg1); }