/* * IWonnaP — Design Tokens * Hi-tech direction: dark-first, electric accent, gradient depth. * Single source of truth for all CSS custom properties. */ :root { /* ── Surfaces ─────────────────────────────────────── */ --page-bg: #0a0d10; --page-bg-mesh: radial-gradient(at 18% 22%, rgba(40, 200, 210, .10), transparent 55%), radial-gradient(at 82% 78%, rgba(120, 90, 240, .07), transparent 55%), radial-gradient(at 50% 0%, rgba(40, 200, 210, .05), transparent 60%); --surface: #12161b; --surface-soft: #181d24; --surface-elev: rgba(255, 255, 255, .04); --surface-strong: #0d1014; --surface-overlay: rgba(15, 18, 22, .82); /* ── Text ─────────────────────────────────────────── */ --text: #e8edf2; --text-strong: #ffffff; --muted: #7d8590; /* ── Borders ──────────────────────────────────────── */ --line: rgba(255, 255, 255, .07); --line-strong: rgba(255, 255, 255, .12); /* ── Accent (electric cyan) ───────────────────────── */ --accent: #28c8d0; --accent-strong: #5ee0e6; --accent-deep: #0d8a90; --accent-muted: color-mix(in srgb, var(--accent) 14%, transparent); --accent-glow: 0 0 24px rgba(40, 200, 210, .35); /* Gradient surfaces */ --grad-accent: linear-gradient(135deg, #28c8d0 0%, #5b9cff 100%); --grad-success: linear-gradient(135deg, #3fb950 0%, #28c8d0 100%); --grad-danger: linear-gradient(135deg, #f85149 0%, #ff7a7a 100%); --grad-line: linear-gradient(135deg, rgba(40,200,210,.35), rgba(120,90,240,.25)); /* ── Semantic ─────────────────────────────────────── */ --danger: #f85149; --warning: #d4a72c; --warning-soft: rgba(212, 167, 44, .14); --success: #3fb950; /* ── Shadows ──────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0,0,0,.32); --shadow: 0 4px 16px rgba(0,0,0,.34), 0 1px 2px rgba(0,0,0,.20); --shadow-lg: 0 12px 40px rgba(0,0,0,.50), 0 2px 4px rgba(0,0,0,.22); --shadow-glow:0 0 0 1px var(--line-strong), 0 4px 16px rgba(0,0,0,.34), 0 0 32px rgba(40, 200, 210, .12); /* ── Spacing ──────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ── Radius ───────────────────────────────────────── */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 9999px; /* ── Type scale ───────────────────────────────────── */ --text-xs: 0.72rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; /* ── Fonts ────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── Interaction ──────────────────────────────────── */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); --t-fast: 120ms cubic-bezier(.4, 0, .2, 1); --t-base: 220ms cubic-bezier(.4, 0, .2, 1); --t-slow: 420ms cubic-bezier(.4, 0, .2, 1); --t-spring: 500ms cubic-bezier(.34, 1.56, .64, 1); /* ── Layout ───────────────────────────────────────── */ --header-h: 56px; --mobile-nav-h: 64px; --container-w: 1200px; } /* Accent presets (Phase 31) */ :root[data-theme="ocean"] { --accent: #2793ff; --accent-strong: #73c7ff; --accent-deep: #125dc1; --accent-muted: color-mix(in srgb, var(--accent) 14%, transparent); --accent-glow: 0 0 24px rgba(39, 147, 255, .34); --grad-accent: linear-gradient(135deg, #2793ff 0%, #73c7ff 100%); --grad-success: linear-gradient(135deg, #36bf85 0%, #2793ff 100%); --grad-line: linear-gradient(135deg, rgba(39,147,255,.35), rgba(115,199,255,.22)); } :root[data-theme="forest"] { --accent: #2ea86d; --accent-strong: #76d6a3; --accent-deep: #1c754b; --accent-muted: color-mix(in srgb, var(--accent) 14%, transparent); --accent-glow: 0 0 24px rgba(46, 168, 109, .32); --grad-accent: linear-gradient(135deg, #2ea86d 0%, #76d6a3 100%); --grad-success: linear-gradient(135deg, #2ea86d 0%, #d0c95a 100%); --grad-line: linear-gradient(135deg, rgba(46,168,109,.34), rgba(118,214,163,.22)); } :root[data-theme="sunset"] { --accent: #ff8a3d; --accent-strong: #ffc46b; --accent-deep: #cf5d1d; --accent-muted: color-mix(in srgb, var(--accent) 14%, transparent); --accent-glow: 0 0 24px rgba(255, 138, 61, .32); --grad-accent: linear-gradient(135deg, #ff8a3d 0%, #ffc46b 100%); --grad-success: linear-gradient(135deg, #3fb950 0%, #ff8a3d 100%); --grad-line: linear-gradient(135deg, rgba(255,138,61,.34), rgba(255,196,107,.22)); } /* ───────────────────────────────────────────────────── LIGHT MODE — opt-in via [data-theme="light"] Default is dark. ───────────────────────────────────────────────────── */ :root[data-theme="light"] { --page-bg: #f6f7f9; --page-bg-mesh: radial-gradient(at 20% 25%, rgba(40, 200, 210, .08), transparent 55%), radial-gradient(at 80% 75%, rgba(120, 90, 240, .05), transparent 55%); --surface: #ffffff; --surface-soft: #f1f3f6; --surface-elev: rgba(0, 0, 0, .02); --surface-strong: #0d1014; --surface-overlay: rgba(255, 255, 255, .82); --text: #1a1f24; --text-strong: #000000; --muted: #5b6470; --line: rgba(0, 0, 0, .08); --line-strong: rgba(0, 0, 0, .15); --accent: #0e8a90; --accent-strong: #0a6e74; --accent-deep: #064c50; --accent-glow: 0 0 24px rgba(14, 138, 144, .28); --shadow-sm: 0 1px 2px rgba(20, 30, 40, .06); --shadow: 0 3px 12px rgba(20, 30, 40, .10), 0 1px 2px rgba(20, 30, 40, .05); --shadow-lg: 0 8px 28px rgba(20, 30, 40, .14), 0 2px 4px rgba(20, 30, 40, .06); --shadow-glow:0 0 0 1px var(--line-strong), 0 3px 12px rgba(20, 30, 40, .08), 0 0 24px rgba(14, 138, 144, .10); } /* Respect system preference if user hasn't chosen */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --page-bg: #f6f7f9; --surface: #ffffff; --surface-soft: #f1f3f6; --surface-elev: rgba(0, 0, 0, .02); --surface-strong: #0d1014; --text: #1a1f24; --text-strong: #000000; --muted: #5b6470; --line: rgba(0, 0, 0, .08); --line-strong: rgba(0, 0, 0, .15); --accent: #0e8a90; --accent-strong: #0a6e74; --accent-deep: #064c50; } }