/* * RackMapper-EP — design tokens * ----------------------------------------------------------------------- * Experimental homepage prototype only. Not wired into the real app and * not shared with it — this file intentionally duplicates nothing from * /css/tokens.css in the main project; it's a from-scratch token set for * this standalone mockup so the two can evolve independently. * * 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 = charcoal/black base + violet accent * Light = white/soft-grey base + orange accent */ :root { /* ---- surfaces ---- */ --bg: #08070c; /* page background — near-black, faint violet cast */ --bg-elevated: #121019; /* cards, nav, panels */ --bg-elevated-2: #17141f; /* nested/hover surface, one step up from --bg-elevated */ --bg-sunken: #0c0a11; /* recessed areas (mockup screen interior) */ /* ---- accent (violet in dark mode) ---- */ --accent: #8b5cf6; --accent-2: #6d28d9; /* deeper end of the accent gradient */ --accent-soft: rgba(139, 92, 246, 0.14); --accent-line: rgba(139, 92, 246, 0.35); --accent-glow: rgba(139, 92, 246, 0.35); /* secondary graphic tone, used only in the hero wireframe illustration */ --graphic-2: #ff8a3d; /* ---- warning (validation badges — roof clearance, dimension sanity) ---- */ --warn: #f5a524; --warn-soft: rgba(245, 165, 36, 0.14); --warn-line: rgba(245, 165, 36, 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 ---- */ --text: #f5f4f7; --text-muted: #9c98ab; --text-faint: #6b6778; /* ---- borders / dividers ---- */ --border: #221f2c; --border-strong: #2f2b3b; /* ---- 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 ---- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --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 ---- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Space Grotesk', var(--font-sans); /* ---- 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: 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