/* * Rackulate — design tokens * ----------------------------------------------------------------------- * Real, shared token system — style.css/app-shell.css/app-canvas.css all * read colour exclusively through these custom properties (see * style.css's own header comment), so this file is the single global * lever for the app's visual identity across every page. * * VISUAL MODERNISATION PASS (Rackulate 2.0 concept alignment): variable * NAMES are unchanged from the previous violet/orange palette — every * selector in style.css/app-shell.css/app-canvas.css keeps working * unmodified — only the colour VALUES change, to the approved dark-navy/ * cyan technical identity. No selectors, no markup, no JS wiring touched * by this file. * * Two themes, one set of variable names. Dark is the default (:root); * [data-theme="light"] on overrides the same names, so every * component below is written once and never branches on theme. * * Dark = deep navy/near-black base + cyan accent * Light = clean white/steel base + deep technical blue accent */ :root { /* ---- surfaces ---- SUPER-PROMPT §27 palette pass: values only, same variable names, so every selector across style.css/app-shell.css/app-canvas.css/hub.css/ etc. keeps working unmodified. Target hex values taken directly from the brief's dimensional design system (APP BACKGROUND/PANEL 1/PANEL 2). */ --bg: #12141a; /* APP BACKGROUND */ --bg-elevated: #1a1d26; /* PANEL 1 — cards, nav, panels */ --bg-elevated-2: #22262f; /* PANEL 2 — nested/hover surface */ --bg-sunken: #0d0f14; /* recessed areas (mockup screen interior) */ /* ---- accent (cyan in dark mode) — SUPER-PROMPT §27/§28: PRIMARY CYAN, a precision signal only (focus/selection/current stage/primary action) — never a large fill. Value only, same variable names. ---- */ --accent: #00c2d8; --accent-2: #0092a6; /* deeper end of the accent gradient */ --accent-soft: rgba(0, 194, 216, 0.14); --accent-line: rgba(0, 194, 216, 0.35); --accent-glow: rgba(0, 194, 216, 0.35); /* secondary graphic tone, used only in the hero wireframe illustration */ --graphic-2: #ffb454; /* ---- warning (validation badges — roof clearance, dimension sanity) ---- */ --warn: #e2a03f; --warn-soft: rgba(226, 160, 63, 0.14); --warn-line: rgba(226, 160, 63, 0.4); /* ---- success / danger (GLOBAL CONSISTENCY PASS) — status pills across the app (RAMS/Handover/Inspection status-pill-green/-red, the app-canvas.css topbar's status-pill-success "Auto-saved", the Layout health pill's error state) previously each hardcoded their own slightly different green/red instead of sharing one pair of tokens — real drift with no visual reason behind it. These are the single source now; every one of those selectors below reads through them, so "success" and "danger" mean exactly the same colour everywhere. */ --ok: #22a06b; --ok-soft: rgba(34, 160, 107, 0.14); --ok-line: rgba(34, 160, 107, 0.4); /* #e5484d, not the #dc2626 used by older clash/delete indicators elsewhere in app-canvas.css — this matches the fallback value hub.css and document-modules.css already used for var(--danger, ...) before this pass defined the real token, so it's the value this codebase had already implicitly settled on for it. The older dc2626 clash/delete styling is untouched (different, established purpose — see app-canvas.css) rather than mass-migrated. */ --danger: #e5484d; --danger-soft: rgba(229, 72, 77, 0.14); --danger-line: rgba(229, 72, 77, 0.4); /* ---- measurement tool (Phase D3) — blue is deliberately distinct from --accent in both themes (not just a shade of it) so an in-progress measurement and a pinned dimension stay visually distinguishable for colour-blind users, not just by hue proximity. */ --measure-active: #38bdf8; --measure-pinned: #2563eb; /* ---- text — SUPER-PROMPT §27: PRIMARY DARK-UI TEXT / SECONDARY / MUTED ---- */ --text: #e8eaed; --text-muted: #9aa0a6; --text-faint: #5f6368; /* ---- borders / dividers — SUPER-PROMPT §27: STEEL BORDER as the stronger/visible hairline; --border stays one step quieter for everyday dividers, same relative relationship as before. ---- */ --border: #1c1f26; --border-strong: #2e333d; /* ---- shadow ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 32px 80px -24px rgba(0, 0, 0, 0.65); --shadow-xl: 0 60px 140px -40px rgba(0, 0, 0, 0.7); --shadow-accent: 0 20px 60px -20px var(--accent-glow); /* ---- radius ---- Tightened from the previous 10/16/24 scale — restrained, "engineered" corners rather than a bubbly consumer-SaaS feel, per the approved concept's technical character. Values only; every rule still just reads var(--radius-*), so no selector anywhere needs to change. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ---- spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 168px; /* generous top/bottom breathing room for the hero */ /* ---- type ---- Geist replaces Inter/Space Grotesk (values only — --font-sans and --font-display keep their names, so every rule using them is untouched). --font-mono is new/additive: Geist Mono for technical readouts — dimensions, quantities, IDs — per the approved concept. Existing selectors that never reference --font-mono are unaffected; it's applied only where this pass explicitly opts a value in. */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Geist', var(--font-sans); --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* ---- motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-med: 320ms; --duration-slow: 700ms; --float-duration: 7s; /* hero panel idle float loop */ --glow-duration: 12s; /* background glow drift loop */ /* ---- layout ---- */ --content-width: 1200px; --nav-height: 60px; /* compact top bar, per the approved concept — was 76px */ /* ---- mobile edge breathing room (iPhone/small-screen safe area) ---- Used only by the ≤600px rules in style.css/app-shell.css/ app-canvas.css to give page content consistent left/right padding on phones. max() keeps a floor of 18px even where the device reports no inset (safe-area-inset-* defaults to 0 on a non-notched screen), and grows automatically past 18px when the OS-reported safe area is larger — e.g. landscape on a notched/Dynamic-Island iPhone, where the rounded corner and sensor housing eat further into the edge. */ --edge-pad-l: max(18px, env(safe-area-inset-left, 0px)); --edge-pad-r: max(18px, env(safe-area-inset-right, 0px)); /* ---- custom