/** * Design Tokens - Arcade Creative Suite Pro * Single source of truth for all design variables */ :root { /* ==================== COLOR PALETTE ==================== */ /* Background Colors - Slate Scale */ --color-bg-primary: #0f172a; /* slate-950 - main background */ --color-bg-secondary: #1e293b; /* slate-800 - panels */ --color-bg-tertiary: #334155; /* slate-700 - elevated elements */ --color-bg-elevated: #1e293b; /* slate-800 - popovers, dropdowns */ --color-bg-surface: rgba(30, 41, 59, 0.7); /* glassmorphism */ --color-bg-overlay: rgba(0, 0, 0, 0.6); /* modals backdrop */ /* SCS v2 additions — named so SCS component CSS carries no literal colors. -hover/-press are THE interactive tint (one physics, V2 spec §3.1); -scrim is the overlay backdrop, matching .studio-confirm-backdrop (components.css:12246). */ --color-bg-hover: rgba(255, 255, 255, 0.05); --color-bg-press: rgba(255, 255, 255, 0.09); --color-bg-scrim: rgba(2, 6, 23, 0.78); /* Text Colors */ --color-text-primary: #f1f5f9; /* slate-100 - headings */ --color-text-secondary: #cbd5e1; /* slate-300 - body text */ --color-text-muted: #94a3b8; /* slate-400 - secondary info */ --color-text-disabled: #64748b; /* slate-500 - disabled */ /* Brand Colors - Orange */ --color-accent: #ff8c00; --color-arcade-orange: #ff8c00; --color-accent-hover: #e07b00; --color-accent-light: #ff9f33; --color-accent-dark: #cc7000; --color-accent-glow: rgba(255, 140, 0, 0.4); --color-accent-subtle: rgba(255, 140, 0, 0.1); --color-accent-muted: rgba(255, 140, 0, 0.2); /* --- SCS v2 accent scale (V2 spec §3.1) ------------------------------------- ONE accent family for every SCS component, replacing the ~13 distinct oranges in components.css. Values alias the existing brand tokens so V1 and SCS surfaces are pixel-identical while they coexist on screen during migration. --accent-on is the label color ON an accent fill. It is #fff to match every filled CTA shipping today (.btn-primary, .frames-toolbar-btn--primary:138). MEASURED: #fff on #ff8c00 is 2.35:1 — below AA and AA-Large. Re-anchoring it (dark label, or a darker --accent for filled surfaces only) is a ONE-TOKEN change, deliberately deferred: doing it here would re-skin every SCS CTA against unmigrated V1 CTAs sitting next to it. Flagged for the design pass. */ --accent: var(--color-accent); /* #ff8c00 */ --accent-hover: var(--color-accent-hover); /* #e07b00 */ --accent-press: var(--color-accent-dark); /* #cc7000 — darker still, for :active fills */ --accent-soft: var(--color-accent-subtle); /* rgba(255,140,0,.1) — tinted bg */ --accent-on: #ffffff; /* text/icon on an accent fill */ /* Semantic Colors */ /* The solid 500s pass as borders/rules but fail AA as TEXT on the faint -bg fills (~2.5:1). The -text tints are the accessible on-dark label color for each state (300-weight; ~5-7:1 on the -bg over slate-700). */ --color-success: #10b981; /* emerald-500 */ --color-success-bg: rgba(16, 185, 129, 0.1); --color-success-border: rgba(16, 185, 129, 0.3); --color-success-text: #6ee7b7; /* emerald-300 — accessible on-dark label */ --color-error: #ef4444; /* red-500 */ --color-error-bg: rgba(239, 68, 68, 0.1); --color-error-border: rgba(239, 68, 68, 0.3); --color-error-text: #fca5a5; /* red-300 — accessible on-dark label */ --color-warning: #f59e0b; /* amber-500 */ --color-warning-bg: rgba(245, 158, 11, 0.1); --color-warning-border: rgba(245, 158, 11, 0.3); --color-warning-text: #fcd34d; /* amber-300 — accessible on-dark label */ --color-info: #3b82f6; /* blue-500 */ --color-info-bg: rgba(59, 130, 246, 0.1); --color-info-border: rgba(59, 130, 246, 0.3); --color-info-text: #93c5fd; /* blue-300 — accessible on-dark label */ /* Border Colors */ --color-border-default: rgba(255, 255, 255, 0.1); --color-border-subtle: rgba(255, 255, 255, 0.05); --color-border-strong: rgba(255, 255, 255, 0.2); --color-border-accent: rgba(255, 140, 0, 0.3); --color-border-active: rgba(255, 140, 0, 0.6); /* Two names that were CONSUMED but never DEFINED — every `border: 1px solid var(--color-border)` was invalid-at-computed-value and silently resolved to `border-style: none`, so the rule painted nothing. Defined here as explicit aliases of the rest/hover pair they were clearly meant to be: --color-border → 5 uses (e.g. .toast-action-btn, components.css:842) --color-border-hover → 3 uses (e.g. .controls-collapse-btn:hover, layout.css:211) Defining them makes those borders APPEAR for the first time (intended). */ --color-border: rgba(255, 255, 255, 0.1); /* = --color-border-default */ --color-border-hover: rgba(255, 255, 255, 0.2); /* = --color-border-strong */ /* ==================== SPACING ==================== */ --space-0: 0; --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; /* ==================== TYPOGRAPHY ==================== */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ==================== BORDERS & RADII ==================== */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; /* ==================== SHADOWS ==================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6); --shadow-accent: 0 4px 20px rgba(255, 140, 0, 0.25); --shadow-accent-lg: 0 10px 30px rgba(255, 140, 0, 0.35); /* ==================== TRANSITIONS (V1 — legacy consumers) ==================== */ /* KEPT for the ~hundreds of V1 rules that consume them. They are shorthand (duration + easing in one value), which is why they cannot be zeroed by the reduced-motion token override — that is one reason the SCS scale below splits duration from easing. Migration aliases (intent, not exact values): --transition-fast (150ms ease) → var(--motion-base) var(--ease-out) --transition-base (300ms ease) → var(--motion-slow) var(--ease-out) --transition-slow (500ms ease) → var(--motion-slow) var(--ease-out) --transition-cubic (300ms c-b) → var(--motion-slow) var(--ease-in-out-legacy) Do NOT add new consumers — SCS CSS uses the --motion- and --ease- scales only. */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; --transition-cubic: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* ==================== MOTION (SCS v2 — durations) ==================== */ /* Four durations, one job each (V2 spec §3.1). Zeroed wholesale by the single reduced-motion block in components.css (SCS section). */ --motion-fast: 120ms; /* micro state: hover tint, chip select, checkbox */ --motion-base: 160ms; /* controls: buttons, segment thumb, popover in */ --motion-gentle: 220ms; /* overlays: sheet/drawer/modal panel, card reveal */ --motion-slow: 300ms; /* large surfaces: viewer expand, stage transitions */ --motion-stagger: 90ms; /* per-card reveal delay (capped at 8, then batch) */ /* ==================== EASING (SCS v2 — three named curves) ==================== */ --ease-out: cubic-bezier(0.2, 0, 0, 1); /* default: enters + moves */ --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* overlay PANELS only — the one spring in the app today (.studio-confirm-panel, components.css:12264) */ --ease-linear: linear; /* progress / indeterminate only */ /* The V1 curve, named so the --transition-cubic migration above is mechanical. Not for new SCS work — use --ease-out. */ --ease-in-out-legacy: cubic-bezier(0.4, 0, 0.2, 1); /* ==================== Z-INDEX SCALE ==================== */ /* Declared bottom → top; the declared order IS the resolved stack. V1 §5.4 fix: --z-popover used to be 500 and therefore TOPPED --z-modal (400), so an anchored menu could paint over a blocking dialog (including .studio-confirm at calc(--z-modal + 10) = 410). Popovers now sit BELOW the overlay/modal band: a modal owns the screen, and anything anchored to the surface beneath it must not float over it. Toast/tooltip stay on top — a toast must stay readable over a modal (#toast-container, components.css:918). Only --z-popover changed value; the other seven are byte-identical to V1. */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-sheet: 210; /* SCS extension sheet (.scs-sheet, P2). The V1 layering ladder is "popover → extension sheet → drawer → module view state" (console-redesign spec :186), so the sheet sits ABOVE the deck it rises from (--z-sticky) and BELOW the rack (--z-drawer) — a rack opened over a sheet is the later, more deliberate surface — and far below --z-popover, so a chip popover opened from inside a sheet still paints over it rather than under it (the exact bug --z-drawer was carved out of). */ --z-drawer: 220; /* SCS rack (#rack-drawer). Sits ABOVE the deck (--z-sticky) so the drawer slides over it, and BELOW --z-popover so a chip popover opened from a rack control paints over its own drawer instead of under it. It used to ride --z-overlay (300), which put the whole rack above every popover — a menu you could open and not see. It is deliberately NOT part of the overlay/modal band: the rack is persistent chrome for the current tab, not a surface that blocks the app. */ --z-popover: 250; /* was 500 — see note above */ --z-overlay: 300; --z-modal: 400; /* .studio-confirm rides calc(var(--z-modal) + 10) = 410 */ --z-tooltip: 600; --z-toast: 700; /* ==================== LAYOUT ==================== */ --sidebar-width-collapsed: 80px; --sidebar-width-expanded: 256px; --header-height: 64px; --panel-width: 400px; --panel-width-sm: 320px; /* --- SCS v2 / Video Village shell (V1 spec §3.2, §5.4) ---------------------- --console-clearance: the vertical space the Stage reserves at the bottom so media is never covered by the two-row Console deck. V1 §3.2 sizes the deck at ~112px; the extra 20px is the breathing gap between media and deck. It is also what FloatingPanel's snap corners + minimize pill offset by, so the adjustment panel parks ABOVE the deck instead of on it (floating-panel.js CORNER_TARGETS :19, pill target :212-215). --rack-width: the right-hand Rack drawer width. */ --console-clearance: 132px; /* …and what the Stage reserves once the deck is MINIMIZED (P2 R22). The minimized deck is one 32px restore pill sitting on `#console-dock`'s own 16px bottom padding, so it occupies 48px; + the same 20px breathing gap the full clearance carries = 68px. Without this the whole point of minimizing was lost: the deck left the screen and the stage kept reserving 132px of nothing under the media the user minimized in order to see. Applied by `console-dock.js` as `.scs-console-layout--minimized` on the ROOT element — not on — because `floating-panel.js:48` reads this token off `document.documentElement`, so the adjustment panel's snap corners follow the same collapse instead of parking 132px up against a deck that is not there. */ --console-clearance-minimized: 68px; --rack-width: 360px; /* ==================== BREAKPOINTS (for reference) ==================== */ /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */ /* ==================== Seedance 2.0 REFERENCE CHIP COLORS ==================== */ /* Orange = image, cyan = video, green = audio. Used by both the multimodal reference panel slots and the prompt-chip overlay. */ --chip-img-bg: rgba(255, 167, 89, 0.25); --chip-img-bg-strong: rgba(255, 167, 89, 0.45); --chip-img-fg: #E55A00; --chip-vid-bg: rgba(34, 211, 238, 0.25); --chip-vid-bg-strong: rgba(34, 211, 238, 0.45); --chip-vid-fg: #0891B2; --chip-aud-bg: rgba(52, 211, 153, 0.25); --chip-aud-bg-strong: rgba(52, 211, 153, 0.45); --chip-aud-fg: #059669; } /* Dark mode is default - no light mode variant needed */