/* Generated by tools/build.mjs from src/design/colors_and_type.css. Do not edit. */ :root { /* ----- Color: surfaces (cool grays, Tailwind-aligned) ----- */ --surface-0: #0b1220; /* deepest — splash bg, modal scrim */ --surface-1: #111827; /* gray-900 — app shell */ --surface-2: #1f2937; /* gray-800 — primary canvas (CANONICAL) */ --surface-3: #374151; /* gray-700 — cards, panels, hover */ --surface-4: #4b5563; /* gray-600 — raised, borders */ --surface-5: #6b7280; /* gray-500 — disabled, subtle dividers */ /* ----- Color: foreground (text on dark) ----- */ --fg-1: #f3f4f6; /* gray-100 — primary text, headings */ --fg-2: #e5e7eb; /* gray-200 — body */ --fg-3: #d1d5db; /* gray-300 — secondary */ --fg-4: #9ca3af; /* gray-400 — tertiary, hints */ --fg-5: #6b7280; /* gray-500 — disabled */ /* ----- Color: brand & accent ----- */ --accent: #2563eb; /* blue-600 — primary action */ --accent-hover:#1d4ed8; /* blue-700 */ --accent-soft: #3b82f6; /* blue-500 — selected states */ --accent-glow: #60a5fa; /* blue-400 — highlights, focus, links */ --accent-tint: rgba(59, 130, 246, 0.12); /* ----- Color: AI gradient (the "this is generation" signal) ----- Used on Generate, Upscale, Smart*, GenerateTakes, GenerateVideo, and anywhere an AI step is happening. Also used as a shimmer pass on the splash logotype. NEVER use it for non-AI primary actions — that's what --accent is for. */ --ai-from: #3b82f6; /* blue-500 */ --ai-via: #6366f1; /* indigo-500 (optional middle stop) */ --ai-to: #a855f7; /* purple-500 */ --gradient-ai: linear-gradient(135deg, var(--ai-from) 0%, var(--ai-via) 50%, var(--ai-to) 100%); --gradient-ai-soft: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(168,85,247,0.18) 100%); --gradient-ai-shimmer: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(99, 102, 241, 0.55) 50%, rgba(168, 85, 247, 0.55) 60%, transparent 75%, transparent 100%); /* ----- Color: ASSET TAXONOMY (script highlights) ----- Source of truth: src-references/assetColors.js (dark variants). Constraint: avoid bright red/green. We use Tailwind's *-400 family where possible — vivid enough to read on screenplay body, never neon. 10 canonical categories — never invent an 11th without updating assetColors.js first. */ --asset-character: #22d3ee; /* cyan-400 — speaking characters */ --asset-character-nonspeaking:#93c5fd; /* blue-300 — extras, non-speaking */ --asset-location: #4ade80; /* green-400 — locations */ --asset-vehicle: #c084fc; /* purple-400 — vehicles */ --asset-weapon: #f87171; /* red-400 — weapons (allowed: scoped to weapon assets only, NEVER UI) */ --asset-prop: #fb923c; /* orange-400 — props */ --asset-setdressing: #2dd4bf; /* teal-400 — set dressing */ --asset-vfx: #f472b6; /* pink-400 — VFX */ --asset-wardrobe: #fb7185; /* rose-400 — wardrobe */ --asset-sfx: #fbbf24; /* amber-400 — SFX */ --asset-graphics: #a3e635; /* lime-400 — graphics */ /* Asset BADGE backgrounds (used on chips/pills, not inline highlights) -- */ --asset-character-bg: rgba(30, 58, 138, 0.55); /* blue-900 / 55 */ --asset-location-bg: rgba(20, 83, 45, 0.55); /* green-900 */ --asset-vehicle-bg: rgba(88, 28, 135, 0.55); /* purple-900 */ --asset-weapon-bg: rgba(127, 29, 29, 0.55); /* red-900 */ --asset-prop-bg: rgba(124, 45, 18, 0.55); /* orange-900 */ --asset-setdressing-bg: rgba(131, 24, 67, 0.55); /* pink-900 */ --asset-vfx-bg: rgba(113, 63, 18, 0.55); /* yellow-900 */ --asset-wardrobe-bg: rgba(136, 19, 55, 0.55); /* rose-900 */ --asset-sfx-bg: rgba(120, 53, 15, 0.55); /* amber-900 */ --asset-graphics-bg: rgba(54, 83, 20, 0.55); /* lime-900 */ /* ----- Color: SHOT STATUS (production tracker) ----- The Production ShotList currently uses vibrant pills. These muted variants are the new spec — same hue family, lower saturation, sympathetic to the gray-800 canvas. Apply as background pills with foreground text in the lighter tonal mate. */ --status-todo-fg: #d1d5db; /* gray-300 */ --status-todo-bg: rgba(75, 85, 99, 0.45); /* gray-600 / 45 */ --status-inprogress-fg: #93c5fd; /* blue-300 */ --status-inprogress-bg: rgba(30, 58, 138, 0.45); /* blue-900 / 45 */ --status-review-fg: #fcd34d; /* amber-300 */ --status-review-bg: rgba(120, 53, 15, 0.40); /* amber-900 / 40 */ --status-onhold-fg: #fda4af; /* rose-300 */ --status-onhold-bg: rgba(136, 19, 55, 0.40); /* rose-900 / 40 */ --status-complete-fg: #86efac; /* green-300 */ --status-complete-bg: rgba(20, 83, 45, 0.40); /* green-900 / 40 */ /* Progress dots (left of Shot rows in SceneBuilder) — DESATURATED. These are smaller and need to be quieter than the Production pills, since they sit at 8px alongside body text. */ --dot-todo: #6b7280; /* gray-500 */ --dot-inprogress: #60a5fa; /* blue-400 */ --dot-review: #fbbf24; /* amber-400 */ --dot-onhold: #fb7185; /* rose-400 */ --dot-complete: #4ade80; /* green-400 */ /* ----- Color: WGA REVISION COLORS ----- Industry-standard production paper colors. Source: revisionColors.js. Used as page-background tints in the Script view. NEVER recolor or reorder — this is decades-old WGA convention. */ --rev-white: #6b7a8a; --rev-blue: #4a6a8f; --rev-pink: #7a5068; --rev-yellow: #7a7345; --rev-green: #4a7a5a; --rev-goldenrod: #8a7a40; --rev-buff: #7a7060; --rev-salmon: #8a6558; --rev-cherry: #7a4a55; /* Revision label text (lighter, sits on the rev background as a pill) */ --rev-white-fg: #e0e0e0; --rev-blue-fg: #93b5ff; --rev-pink-fg: #ff93b5; --rev-yellow-fg: #ffe093; --rev-green-fg: #93ff93; --rev-goldenrod-fg: #ffd700; --rev-buff-fg: #e8d8a0; --rev-salmon-fg: #ffa07a; --rev-cherry-fg: #ff6b6b; /* ----- Color: semantic (muted, system-level) ----- */ --warn: #f59e0b; --warn-soft: #fbbf24; --info: #38bdf8; --danger: #f87171; /* used SPARINGLY, only destructive */ --success: #34d399; /* used SPARINGLY */ /* ----- Borders & dividers ----- */ --border-1: rgba(255, 255, 255, 0.06); --border-2: rgba(255, 255, 255, 0.10); --border-3: rgba(255, 255, 255, 0.16); --border-accent: rgba(59, 130, 246, 0.45); --border-ai: rgba(168, 85, 247, 0.40); /* ----- Shadow / elevation ----- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 0 3px rgba(59, 130, 246, 0.30); --shadow-ai-glow: 0 0 24px rgba(139, 92, 246, 0.35); /* ----- Radius ----- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 999px; /* ----- Spacing scale (4px base) ----- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ----- Type: families ----- --font-ui is Inter; the system-ui chain remains as a fallback only if Inter fails to load (offline / blocked CDN). Inter's DEFAULT figures are proportional — the SF-Pro-style "1" with no foot. Tabular figures are opted into per-element via the .tnum utility class (see below). --font-mono is JetBrains Mono — used ONLY for code/terminal contexts, never for UI numerals. */ --font-screenplay: 'Courier Prime', monospace; --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* ----- Type: scale (UI) ----- */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 36px; --text-5xl: 48px; /* ----- Type: weight ----- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ----- Type: leading ----- */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-loose: 1.7; /* ----- Type: tracking ----- */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* ----- Motion (cinematic, calm) ----- */ --ease-out: ease-out; --ease-in-out: ease-in-out; --dur-fast: 150ms; --dur-base: 300ms; --dur-letterbox: 3s; --dur-word: 3s; --dur-toast: 0.3s; }