/* ───────────────────────────────────────────────────────────────── Design tokens — single source of truth. Components must reference variables; never hardcode values. Light-theme overrides live in themes.css. Identity: the device is the hero. The page is a warm dark studio; the phone screen is the lit object in it. Brand and run-signal are deliberately SEPARATE axes: brand = amber (buttons, accents, the inverted break section) pass = green running = light gold fail = red An earlier cut fused brand and pass into one acid lime, so the accent ended up smeared over every element on the page. Amber and the running gold share a family but differ in lightness, so the log still reads at a glance. Deliberately not indigo→violet→sky. ───────────────────────────────────────────────────────────────── */ :root { color-scheme: dark; /* Surfaces — warm ink, not neutral graphite */ --bg-base: #100F0C; --bg-canvas: #15130F; --bg-surface: #1D1A15; --bg-elevated: #26221B; --bg-card: #1A1713; --bg-card-hover: #231F19; --bg-inset: #110F0C; --bg-overlay: rgba(16, 15, 12, 0.82); /* Borders — hairlines, like an instrument panel */ --border-subtle: rgba(232, 205, 160, 0.10); --border-light: rgba(232, 205, 160, 0.17); --border-strong: rgba(232, 205, 160, 0.30); --border-accent: rgba(255, 162, 58, 0.45); /* ── Run signals — separate axis from the brand ── */ --sig-pass: #4FD07A; --sig-pass-dim: #33A85C; --sig-pass-soft: rgba(79, 208, 122, 0.15); /* Lighter than the brand amber on purpose — same family, clearly a different state, so a running row never reads as a branded row. */ --sig-run: #FFCB5C; --sig-run-soft: rgba(255, 203, 92, 0.15); /* Pushed to a truer red; the old coral sat too close to the amber. */ --sig-fail: #FF4B4B; --sig-fail-soft: rgba(255, 75, 75, 0.15); --sig-idle: #4A423A; /* ── Brand — amber. Never routed through the signal set. ── */ --brand-primary: #FFA23A; --brand-primary-soft: #FFC078; --brand-primary-strong: #D97F1E; --brand-secondary: #FFD08A; --brand-secondary-soft: #FFE0B0; --brand-accent: #6FD8E8; --brand-accent-soft: #A5E9F3; --brand-warm: #FFA23A; /* Always the bright amber, in BOTH themes: the bed for near-black text (primary button, inverted break). --brand-primary darkens in light mode for text contrast and must never be used as a fill. */ --brand-fill: #FFA23A; /* Text */ --text-strong: #ffffff; --text-primary: #F2EDE4; --text-secondary: #B3A996; --text-muted: #7E7566; --text-dim: #564F44; --text-on-brand: #17130C; /* Semantic — routed through the signal set */ --success: var(--sig-pass); --success-soft: var(--sig-pass-soft); --warning: var(--sig-run); --warning-soft: var(--sig-run-soft); --danger: var(--sig-fail); --danger-soft: var(--sig-fail-soft); --info: var(--brand-accent); --info-soft: rgba(111, 216, 232, 0.14); /* Severity (security / a11y / crash) */ --severity-critical: #FF4B4B; --severity-high: #FF8A3D; --severity-medium: var(--sig-run); --severity-low: var(--sig-pass); /* Gradients — restrained. No hero glow-blobs. */ --gradient-brand: linear-gradient(100deg, #FFB454 0%, #F08A1E 100%); --gradient-headline: linear-gradient(180deg, #ffffff 0%, #A99F8E 130%); --gradient-pop: linear-gradient(100deg, #FFC15E 0%, #FF8A3D 100%); --gradient-hero: none; --gradient-section-fade: linear-gradient(180deg, transparent 0%, rgba(232, 205, 160, 0.022) 50%, transparent 100%); --gradient-card: linear-gradient(180deg, rgba(232, 205, 160, 0.035) 0%, rgba(232, 205, 160, 0) 60%); /* Blueprint grid — the studio floor the device sits on. */ --grid-line: rgba(232, 205, 160, 0.05); --grid-line-strong: rgba(232, 205, 160, 0.085); /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.40); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.50); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65); --shadow-glow: 0 0 0 1px rgba(255, 162, 58, 0.45), 0 12px 40px rgba(255, 162, 58, 0.24); --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.40); /* The lit-object shadow: what makes the phone read as the hero. */ --shadow-device: 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 80px -20px rgba(0, 0, 0, 0.85), 0 0 120px -30px rgba(255, 162, 58, 0.26); /* Typography — Archivo (industrial grotesque) + IBM Plex Mono. Not Inter. Not JetBrains Mono. */ --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif; --fz-xs: 0.75rem; --fz-sm: 0.875rem; --fz-base: 1rem; --fz-md: 1.0625rem; --fz-lg: 1.25rem; --fz-xl: 1.5rem; --fz-2xl: 1.875rem; --fz-3xl: 2.375rem; --fz-4xl: clamp(2.5rem, 4vw, 3.5rem); --fz-5xl: clamp(2.75rem, 5.6vw, 4.5rem); --lh-tight: 1.02; --lh-snug: 1.2; --lh-base: 1.55; --lh-loose: 1.7; --tracking-tight: -0.03em; --tracking-base: 0; --tracking-wide: 0.04em; --tracking-extra: 0.14em; /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Radii — tighter than the template default; instruments have small corners, not pill-shaped everything. */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-2xl: 26px; --r-pill: 9999px; /* Layout */ --container-max: 1200px; --container-narrow: 880px; --container-wide: 1320px; --gutter: clamp(20px, 4vw, 48px); --nav-height: 64px; /* Motion */ --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-device: cubic-bezier(0.16, 1, 0.3, 1); /* z-index */ --z-nav: 100; --z-modal: 200; --z-toast: 300; }