/* ═══════════════════════════════════════════════════════════════════════ SOLVEON PULSE · DESIGN TOKENS — HF Set 11 May 2026 (REV-54 Faz 1) Master design tokens applied to migrated pages. Pages still on theme.css remain unaffected; migrate them one-by-one in Faz 2-3. Pair with: sites/_shared/css/components.css ═══════════════════════════════════════════════════════════════════════ */ :root { /* ─── Primary (Solveon brand mavi) ─── */ --primary: #005b8c; --primary-hover: #004166; --primary-active: #003554; --primary-bg: #e0f2fe; --primary-border: #bae6fd; --primary-fg: #ffffff; /* ─── Semantic accents (HF palette — Tailwind-aligned) ─── */ --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e; --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --red-50: #fef2f2; --red-100: #fee2e2; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-500: #0ea5e9; --sky-600: #0284c7; --sky-700: #0369a1; --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; /* ─── Ink (neutral scale) ─── */ --ink-50: #f8fafc; --ink-100: #f1f5f9; --ink-200: #e2e8f0; --ink-300: #cbd5e1; --ink-400: #94a3b8; --ink-500: #64748b; --ink-600: #475569; --ink-700: #334155; --ink-800: #1e293b; --ink-900: #0f172a; /* ─── Surface ─── */ --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --hairline: #e2e8f0; --hairline-strong: #cbd5e1; /* ─── Text ─── */ --text: var(--ink-900); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-invert: #ffffff; /* ─── TOU tariff palette (3-tier) ─── */ --tou-puant: var(--red-500); --tou-gunduz: var(--amber-500); --tou-gece: var(--sky-500); /* ─── Spacing (8px grid) ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ─── Radius ─── */ --radius-button: 8px; --radius-card: 12px; --radius-drawer: 14px; --radius-pill: 999px; /* ─── Shadow ─── */ --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.02); --shadow-hover: 0 4px 12px rgba(0,91,140,0.08); --shadow-drawer: 0 10px 30px rgba(15,23,42,0.15); --shadow-modal: 0 25px 50px -12px rgba(15,23,42,0.25); /* ─── Typography ─── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fz-xs: 11px; --fz-sm: 12px; --fz-base: 14px; --fz-md: 15px; --fz-lg: 17px; --fz-xl: 20px; --fz-2xl: 24px; --fz-3xl: 30px; --fz-hero: 36px; --fz-mega: 48px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.5; --lh-relaxed:1.7; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ─── Motion ─── */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --t-fast: 120ms; --t-med: 220ms; --t-slow: 320ms; /* ─── Z-layer ─── */ --z-base: 1; --z-sticky: 20; --z-overlay: 40; --z-drawer: 50; --z-modal: 60; --z-toast: 80; } /* ═══════════════════════════════════════════════════════════════════════ DARK THEME — paired ".dark" or "html.dark" (common.js applies .dark on ; works for both selectors). ═══════════════════════════════════════════════════════════════════════ */ html.dark, .dark { --primary: #3b9fd9; --primary-hover: #5cb3e6; --primary-active: #1f7eb0; --primary-bg: #0c2840; --primary-border: #1a4a6e; --primary-fg: #0f172a; --emerald-50: #052e1c; --emerald-100: #064e3b; --emerald-500: #34d399; --emerald-600: #10b981; --emerald-700: #059669; --teal-50: #042f2c; --teal-100: #134e4a; --teal-500: #2dd4bf; --teal-600: #14b8a6; --teal-700: #0d9488; --amber-50: #2a1c06; --amber-100: #451a03; --amber-500: #fbbf24; --amber-600: #f59e0b; --amber-700: #d97706; --red-50: #2a0e0e; --red-100: #450a0a; --red-500: #f87171; --red-600: #ef4444; --red-700: #dc2626; --sky-50: #0c2840; --sky-100: #0c4a6e; --sky-500: #38bdf8; --sky-600: #0ea5e9; --sky-700: #0284c7; --violet-50: #1e1b4b; --violet-100: #2e1065; --violet-500: #a78bfa; --violet-600: #8b5cf6; --violet-700: #7c3aed; --ink-50: #0f172a; --ink-100: #1e293b; --ink-200: #334155; --ink-300: #475569; --ink-400: #64748b; --ink-500: #94a3b8; --ink-600: #cbd5e1; --ink-700: #e2e8f0; --ink-800: #f1f5f9; --ink-900: #f8fafc; --bg: #0f172a; --surface: #1e293b; --surface-2: #0f172a; --hairline: rgba(255,255,255,0.06); --hairline-strong: rgba(255,255,255,0.12); --text: var(--ink-900); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-invert: #0f172a; --tou-puant: var(--red-500); --tou-gunduz: var(--amber-500); --tou-gece: var(--sky-500); --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.2); --shadow-hover: 0 4px 12px rgba(0,0,0,0.4); --shadow-drawer: 0 10px 30px rgba(0,0,0,0.55); --shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.7); } /* ═══════════════════════════════════════════════════════════════════════ GLOBAL BASE — minimal; load before components.css ═══════════════════════════════════════════════════════════════════════ */ html, body { font-family: var(--font-sans); font-size: var(--fz-base); line-height: var(--lh-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; } .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fz-xs); font-weight: var(--fw-semi); color: var(--text-muted); } /* prefers-reduced-motion — respect everywhere */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }