/* ══════════════════════════════════════════════════════════════════════ 3Netra Design Tokens — tokens.css Single source of truth for all design values. ══════════════════════════════════════════════════════════════════════ */ :root { /* ── SURFACES ── */ --color-surface-white: #FFFFFF; --color-surface-off: #F6F6FA; --color-surface-subtle: #ECEDF4; --color-dark-base: #08080F; --color-dark-card: #0F0F1C; --color-dark-elevated: #171728; /* ── BRAND ── */ --color-brand-indigo: #4856EE; --color-brand-indigo-lt: #6875F5; --color-brand-amber: #F5A623; --color-brand-teal: #00C9A7; --color-brand-red: #F45B5B; /* ── TEXT — LIGHT SURFACES ── */ --color-text-dark: #0C0C1A; --color-text-mid: #484868; --color-text-muted: #8888A8; /* ── TEXT — DARK SURFACES ── */ --color-text-light: #F0EFFF; --color-text-dim: #8887A8; /* ── BORDERS ── */ --color-border-light: rgba(72, 86, 238, 0.09); --color-border-mid: rgba(72, 86, 238, 0.18); --color-border-dark: rgba(104, 117, 245, 0.16); /* ── STATUS ── */ --color-success: #00C9A7; --color-error: #F45B5B; /* ── TYPOGRAPHY ── */ --font-display: 'Montserrat', 'Clash Display', 'Space Grotesk', sans-serif; --font-body: 'Inter', 'Montserrat', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --text-hero: clamp(3.5rem, 8vw, 7rem); --text-display: clamp(2.5rem, 5vw, 4.5rem); --text-h1: clamp(2rem, 4vw, 3rem); --text-h2: clamp(1.5rem, 3vw, 2.25rem); --text-h3: 1.375rem; --text-body-lg: 1.125rem; --text-body: 1rem; --text-small: 0.875rem; --text-label: 0.7rem; --text-mono: 0.9rem; --lh-hero: 1.0; --lh-display: 1.08; --lh-heading: 1.15; --lh-body: 1.7; /* ── SPACING ── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 160px; --space-5xl: 240px; /* ── LAYOUT ── */ --container-max: 1440px; --container-narrow: 760px; --grid-gutter: clamp(16px, 3vw, 32px); /* ── RADII ── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px; /* ── SHADOWS & GLOW ── */ --shadow-card-lt: 0 2px 8px rgba(0,0,0,0.05), 0 12px 40px rgba(0,0,0,0.04); --shadow-hover-lt: 0 4px 16px rgba(72,86,238,0.10), 0 20px 60px rgba(0,0,0,0.07); --glow-indigo: 0 0 56px rgba(72, 86, 238, 0.30); --glow-amber: 0 0 36px rgba(245, 166, 35, 0.24); --glow-teal: 0 0 36px rgba(0, 201, 167, 0.20); /* ── TRANSITIONS ── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ── GRADIENTS ── */ --gradient-hero: linear-gradient(135deg, #4856EE 0%, #6875F5 55%, #00C9A7 100%); --gradient-primary: linear-gradient(90deg, #4856EE 0%, #6875F5 100%); --gradient-warm: linear-gradient(90deg, #F5A623 0%, #F45B5B 100%); --gradient-cool: linear-gradient(90deg, #00C9A7 0%, #4856EE 100%); } /* ══════════════════════════════════════════════════════════════════════ Dark Mode — [data-theme="dark"] overrides Applied to by the theme toggle in nav.js ══════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Surfaces */ --color-surface-white: #0F0F1C; --color-surface-off: #08080F; --color-surface-subtle: #171728; /* Text */ --color-text-dark: #F0EFFF; --color-text-mid: #B8B7D8; --color-text-muted: #8887A8; /* Borders */ --color-border-light: rgba(104, 117, 245, 0.14); --color-border-mid: rgba(104, 117, 245, 0.24); /* Shadows (lighter in dark) */ --shadow-card-lt: 0 2px 8px rgba(0,0,0,0.30), 0 12px 40px rgba(0,0,0,0.25); --shadow-hover-lt: 0 4px 16px rgba(72,86,238,0.20), 0 20px 60px rgba(0,0,0,0.40); }