/* ============================================================ Forensic Intelligence — design tokens Brand: blue rgb(43 146 222) → teal rgb(13 176 142) Themes via [data-theme] on ; set pre-paint by inline boot. ============================================================ */ :root { /* Brand constants (theme independent) */ --grad-blue: rgb(43 146 222); --grad-teal: rgb(13 176 142); --gradient-brand: linear-gradient(135deg, var(--grad-blue), var(--grad-teal)); --gradient-brand-soft: linear-gradient(135deg, rgb(43 146 222 / 0.14), rgb(13 176 142 / 0.14)); /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Motion */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out-back: cubic-bezier(0.34, 1.26, 0.44, 1); --dur-1: 150ms; --dur-2: 350ms; --dur-3: 700ms; /* Z scale */ --z-noise: 90; --z-header: 100; --z-progress: 110; --z-popover: 200; --z-overlay: 300; /* Layout */ --container-text: 46rem; --container-main: 75rem; --container-wide: 90rem; --gutter: clamp(1.25rem, 5vw, 2.5rem); --section-pad: clamp(5rem, 12vh, 9rem); --header-h: 4.25rem; /* Spacing (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; /* Type scale (fluid) */ --display-xl: clamp(2.75rem, 6.5vw + 1rem, 6rem); --display-lg: clamp(2.25rem, 4.5vw + 0.75rem, 4rem); --display-md: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); --text-xl: clamp(1.125rem, 1vw + 0.9rem, 1.375rem); --text-lg: 1.125rem; --text-md: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; /* ---------- Light theme (default) ---------- */ --bg: #f2f7fc; --bg-raised: #ffffff; --surface-1: #ffffff; --surface-2: #e9f1f9; --surface-3: #dde9f4; --text: #10273b; --text-muted: #4a6076; --text-faint: #7b8fa3; --accent: #02a884; --accent-hover: #029376; --accent-contrast: #ffffff; --accent-soft: rgb(2 168 132 / 0.12); --blue-soft: rgb(43 146 222 / 0.12); --border: rgb(16 39 59 / 0.10); --border-strong: rgb(16 39 59 / 0.18); --glass-bg: rgb(255 255 255 / 0.65); --glass-border: rgb(16 39 59 / 0.08); --shadow-soft: 0 2px 8px rgb(16 39 59 / 0.06); --shadow-card: 0 8px 30px rgb(16 39 59 / 0.10); --shadow-mockup: 0 30px 80px -20px rgb(16 39 59 / 0.30); --aurora-opacity: 0.5; --noise-opacity: 0.025; --focus-ring: 0 0 0 3px rgb(2 168 132 / 0.35); --grid-dot: rgb(16 39 59 / 0.14); color-scheme: light; } [data-theme="dark"] { --bg: #0a1220; --bg-raised: #0e1a2e; --surface-1: #101e33; --surface-2: #15263e; --surface-3: #1b3049; --text: #e8f4ff; --text-muted: #9db4c9; --text-faint: #6c8298; --accent: #19d0a8; --accent-hover: #2ee0b9; --accent-contrast: #06251d; --accent-soft: rgb(25 208 168 / 0.14); --blue-soft: rgb(60 170 240 / 0.16); --border: rgb(232 244 255 / 0.10); --border-strong: rgb(232 244 255 / 0.18); --glass-bg: rgb(10 18 32 / 0.60); --glass-border: rgb(232 244 255 / 0.08); --shadow-soft: 0 2px 8px rgb(0 0 0 / 0.25); --shadow-card: 0 8px 30px rgb(0 0 0 / 0.35); --shadow-mockup: 0 30px 80px -20px rgb(0 0 0 / 0.60); --aurora-opacity: 0.34; --noise-opacity: 0.04; --focus-ring: 0 0 0 3px rgb(25 208 168 / 0.40); --grid-dot: rgb(232 244 255 / 0.10); color-scheme: dark; } /* The security band is intentionally always dark, both themes. */ .vault-scope { --bg: #060b14; --bg-raised: #0b1422; --surface-1: #0e1a2c; --surface-2: #132238; --surface-3: #193049; --text: #e8f4ff; --text-muted: #9db4c9; --text-faint: #6c8298; --accent: #19d0a8; --accent-hover: #2ee0b9; --accent-contrast: #06251d; --accent-soft: rgb(25 208 168 / 0.14); --blue-soft: rgb(60 170 240 / 0.16); --border: rgb(232 244 255 / 0.10); --border-strong: rgb(232 244 255 / 0.20); --glass-bg: rgb(6 11 20 / 0.6); --glass-border: rgb(232 244 255 / 0.08); --shadow-card: 0 8px 30px rgb(0 0 0 / 0.4); --grid-dot: rgb(232 244 255 / 0.08); color-scheme: dark; } @font-face { font-family: "Inter Var"; src: url("/assets/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Metric-matched local fallback to keep CLS at zero while Inter loads. */ @font-face { font-family: "Inter Fallback"; src: local("Helvetica Neue"), local("Arial"); ascent-override: 96.9%; descent-override: 24.1%; line-gap-override: 0%; size-adjust: 107%; }