/* Titan3D — Design tokens. * * Linear/Modern aesthetic: deep near-blacks punctuated by soft indigo light. * Token names are stable across the theme — values may change, names should not. * New tokens add capability; existing consumers keep working. */ :root { /* ───── Surfaces ─────────────────────────────────────────────── */ --bg-deep: #020203; /* footer + deepest layers */ --bg-base: #050506; /* primary canvas */ --bg-elevated: #0a0a0c; /* solid elevated surfaces */ --bg-card: rgba(255, 255, 255, 0.04); /* glass card default */ --bg-card-hover: rgba(255, 255, 255, 0.07); /* glass card hover */ --bg-overlay: rgba(2, 2, 3, 0.78); /* modal backdrop */ /* Glass / surface variants (new) */ --surface: rgba(255, 255, 255, 0.05); --surface-strong: rgba(255, 255, 255, 0.08); --surface-frost: rgba(10, 10, 12, 0.72); /* sticky nav, frosted bars */ /* Solid panel (when glass is wrong, e.g. inputs/select) */ --panel: #0d0e12; --panel-elevated: #15161c; /* ───── Text ─────────────────────────────────────────────────── */ --text-primary: #EDEDEF; /* off-white, never #fff */ --text-secondary: #C4C7CD; --text-muted: #8A8F98; --text-subtle: rgba(255, 255, 255, 0.55); --text-disabled: #4A5058; /* ───── Brand: indigo, never bright purple ──────────────────── */ --accent: #5E6AD2; --accent-rgb: 94, 106, 210; /* RGB triplet for rgba() shadows/halos */ --accent-hover: #6872D9; --accent-bright: #818CFF; --accent-deep: #4750B5; --accent-soft: rgba(94, 106, 210, 0.18); --accent-faint: rgba(94, 106, 210, 0.10); --accent-glow: rgba(94, 106, 210, 0.30); --accent-wash: rgba(94, 106, 210, 0.06); /* ───── Status ───────────────────────────────────────────────── */ --success: #10B981; --success-soft: rgba(16, 185, 129, 0.16); --success-glow: rgba(16, 185, 129, 0.30); --danger: #EF4444; --danger-soft: rgba(239, 68, 68, 0.14); --warning: #F59E0B; --warning-soft: rgba(245, 158, 11, 0.14); /* ───── Lines ────────────────────────────────────────────────── */ --border: rgba(255, 255, 255, 0.06); /* hairline, near-invisible */ --border-strong: rgba(255, 255, 255, 0.10); /* hover state */ --border-accent: rgba(94, 106, 210, 0.30); --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent); /* ───── Layout ──────────────────────────────────────────────── */ --container: 1280px; --container-narrow: 960px; --container-wide: 1440px; /* ───── Spacing scale ───────────────────────────────────────── */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px; /* ───── Radii ───────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 28px; --radius-4xl: 32px; --radius-pill: 999px; /* ───── Multi-layer shadows (Linear DNA) ───────────────────── */ /* Resting card: hairline border highlight + soft diffuse + ambient */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2); /* Hovered card: stronger border + bigger diffuse + indigo glow */ --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 80px rgba(94, 106, 210, 0.10); /* Modal / floating panel */ --shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 120px rgba(94, 106, 210, 0.12); /* Primary CTA: tinted border + accent halo + inner top highlight */ --shadow-glow: 0 0 0 1px rgba(94, 106, 210, 0.50), 0 4px 14px rgba(94, 106, 210, 0.32), 0 1px 0 0 rgba(255, 255, 255, 0.12) inset; /* Inner top highlight (1px white edge on elevated surfaces) */ --shadow-inner-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.08); /* ───── Motion ──────────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out, Linear default */ --ease-quick: cubic-bezier(0.4, 0, 0.2, 1); /* legacy material easing */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-blob: 9000ms; /* ambient blob float */ /* ───── Z-index scale ──────────────────────────────────────── */ --z-ambient: 0; --z-content: 1; --z-sticky: 50; --z-overlay: 80; --z-modal: 100; --z-toast: 110; /* ───── Industrial: soft neumorphic dark theme ───────────────── * Opt-in dark soft-neumorphic aesthetic — pill buttons and cards * look like soft pillows raised from the page plate. Pillowy dual * shadows (deep dark below + faint white halo above-left) plus an * inner-top white highlight on every raised surface. Used by * .t3d-btn--ind-* and .t3d-card--ind* variants in components.css. * Lives alongside the indigo Linear/Modern tokens above — does * NOT replace them. */ --industrial-bg: #050506; /* matches page bg — focus-ring offset */ --industrial-surface: #1A1D24; /* card / pillow surface (raised) */ --industrial-recessed: #0A0C10; /* sunken slots / holes */ --industrial-text: #EDEDEF; --industrial-text-muted: #8A8F98; --industrial-accent: var(--accent); /* tracks theme indigo */ --industrial-accent-foreground: #FFFFFF; --industrial-border-light: rgba(255, 255, 255, 0.06); --industrial-border-mid: rgba(255, 255, 255, 0.03); --industrial-border-dark: rgba(0, 0, 0, 0.6); --industrial-ring: var(--accent); /* tracks theme indigo */ /* Resting pillow — soft dual shadow + inner top highlight */ --industrial-shadow-card: 0 14px 32px -8px rgba(0, 0, 0, 0.6), 0 4px 10px -2px rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.08); /* Floating — bigger lift on hover */ --industrial-shadow-floating: 0 24px 48px -12px rgba(0, 0, 0, 0.72), 0 10px 20px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.10); /* Pressed — sunken plate */ --industrial-shadow-pressed: inset 0 5px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.02); /* Recessed — small details (vents, holes) */ --industrial-shadow-recessed: inset 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 -1px 0 0 rgba(255, 255, 255, 0.03); /* Primary CTA — indigo pillow with theme-matched halo */ --industrial-shadow-accent: 0 10px 28px -4px rgba(var(--accent-rgb), 0.45), 0 4px 12px -2px rgba(var(--accent-rgb), 0.30), inset 0 1px 0 0 rgba(255, 255, 255, 0.22); --industrial-shadow-accent-pressed: inset 0 4px 12px rgba(45, 55, 130, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.10); --industrial-ease-mechanical: cubic-bezier(0.175, 0.885, 0.32, 1.275); --industrial-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); } /* Reduced motion: dampen blob/parallax/transitions ------------------ */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.001ms; --duration-base: 0.001ms; --duration-slow: 0.001ms; } }