/* ============================================================================= CPQCalculator — Design Tokens · SINGLE SOURCE OF TRUTH (S1, 2026-07-12) Loaded by EVERY page (app + marketing) BEFORE theme.css / cpq-site.css. Contains: scale tokens + the three theme value-sets (night base / morning / sunset). The [data-theme] blocks exist ONLY here — never redefine them in another stylesheet. Theme is set by the header ThemeOrb as data-theme on (cpq_theme in localStorage); "night" is the :root base. ============================================================================= */ :root { /* Surfaces (night base) */ --bg-page: #020617; /* slate-950 */ --bg-surface: #0f172a; /* slate-900 */ --bg-elevated: #1e293b; /* slate-800 */ --bg-sunken: rgba(2, 6, 23, 0.30); --bg-header: rgba(2, 6, 23, 0.78); /* Borders (slate-400 alpha ladder) */ --border-subtle: rgba(148, 163, 184, 0.10); --border: rgba(148, 163, 184, 0.22); --border-strong: rgba(148, 163, 184, 0.35); --border-emphasis: rgba(148, 163, 184, 0.55); /* Text */ --text: #e2e8f0; --text-strong: #f1f5f9; --text-mid: #cbd5e1; --text-muted: #94a3b8; --text-subtle: #64748b; --text-inverse: #ffffff; /* Accent — emerald primary */ --accent: #10b981; --accent-strong: #059669; --accent-soft: #34d399; --accent-faint: #6ee7b7; --accent-bg: rgba(16, 185, 129, 0.10); --accent-bg-soft: rgba(16, 185, 129, 0.07); --accent-text: #ffffff; /* Accent 2 — blue secondary */ --accent-2: #3b82f6; --accent-2-strong: #2563eb; --accent-2-soft: #60a5fa; /* Semantic */ --warn: #f59e0b; --warn-bright: #fbbf24; --warn-bg: rgba(245, 158, 11, 0.15); --warn-border: rgba(245, 158, 11, 0.45); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.15); --danger-border: rgba(239, 68, 68, 0.45); --ok-bg: rgba(16, 185, 129, 0.12); --ok-border: rgba(16, 185, 129, 0.35); --info: #60a5fa; --info-bg: rgba(59, 130, 246, 0.12); --info-border: rgba(59, 130, 246, 0.40); /* Regions (marketing figures + region pills) */ --region-usa: #34d399; --region-eu: #60a5fa; --region-china: #fbbf24; --region-ru: #a78bfa; /* Gradients + decor */ --gradient-cta: linear-gradient(90deg, var(--accent), var(--accent-2-strong)); --gradient-cta-hover: linear-gradient(90deg, var(--accent-soft), var(--accent-2)); --gradient-panel: linear-gradient(180deg, rgba(30,41,59,0.86), rgba(15,23,42,0.92)); --gradient-decor-blue: radial-gradient(1200px 800px at 10% -20%, #1d4ed8 0%, transparent 40%); --gradient-decor-emerald: radial-gradient(900px 700px at 100% 0%, #059669 0%, transparent 35%); --orb-1: rgba(29, 78, 216, 0.18); --orb-2: rgba(5, 150, 105, 0.14); /* Typography */ --font-sans: "Inter", "Segoe UI", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-3xs: 0.70rem; --fs-2xs: 0.72rem; --fs-xs: 0.78rem; --fs-sm: 0.85rem; --fs-base:0.95rem; --fs-md: 1.05rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1.1; --lh-normal: 1.5; --lh-relaxed: 1.6; --lh-loose: 1.7; /* Spacing (4px scale) */ --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-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radii */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 16px; --radius-pill: 999px; /* Elevation (S1) — collapse of the ~40 one-off box-shadows. Use sparingly: sm = hairline lift · md = popover/dropdown · lg = modal. Panels/cards stay border-only per the design system ("no shadows" inside workspace). */ --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.30); --shadow-md: 0 8px 24px rgba(2, 6, 23, 0.38); --shadow-lg: 0 20px 48px rgba(2, 6, 23, 0.48); --focus-ring: 0 0 0 3px var(--accent-bg); /* Effects */ --blur-backdrop: 10px; --blur-decor: 64px; --duration-fast: 0.15s; --duration-base: 0.20s; --duration-slow: 0.32s; --ease: cubic-bezier(.2, .7, .2, 1); /* Layout */ --container: 1180px; /* marketing .wrap */ --container-wide: 1280px; /* marketing .wrap-wide */ --container-max: 1180px; /* legacy app .container */ --container-landing: 1280px; --measure-read: 960px; /* S2 — reading pages (orders/history/review) */ --measure-app: 1180px; /* S2 — standard app pages */ --measure-wide: 1400px; /* S2 — dense workspaces (quote/admin) */ --gutter: clamp(16px, 4vw, 32px); --page-measure: var(--measure-app); /* S2 — pages override per surface (read/app/wide) */ --header-height: 72px; /* legacy app header (S4 collapses to --header-h) */ --header-h: 64px; /* canonical header height */ /* Legacy aliases (were theme.css :root) — keep names, single home here. */ --bg: var(--bg-page); --bg-soft: var(--bg-surface); --panel: var(--bg-elevated); --panel-2: var(--bg-elevated); --muted: var(--text-muted); --brand: var(--accent); --brand-2: var(--accent-2); --ok: var(--accent); --surface: var(--bg-surface); --field-bg: rgba(2, 6, 23, 0.7); --control-bg: rgba(30, 41, 59, 0.85); /* T1a — 3D viewer (read by viewer.js via getComputedStyle; keep LITERAL). */ --viewer-bg: #0d1526; --viewer-part: #c4cdd9; --axis-x: #34d399; --axis-y: #60a5fa; --axis-z: #fbbf24; /* T12 — categorical chart palette (hex fallback + oklch). quote.js reads these live; every theme block below must define all seven. */ --chart-1: #2bb682; --chart-1: oklch(0.74 0.13 162); --chart-2: #5a8def; --chart-2: oklch(0.70 0.14 250); --chart-3: #e0b13a; --chart-3: oklch(0.80 0.13 82); --chart-4: #e8645c; --chart-4: oklch(0.67 0.17 18); --chart-5: #b074d8; --chart-5: oklch(0.67 0.15 300); --chart-6: #46b6cf; --chart-6: oklch(0.77 0.11 210); --chart-7: #de5fb0; --chart-7: oklch(0.70 0.17 340); } /* ============================================================================= MORNING — light · slate-50 + emerald (C5.1, Igor-approved; full light theme). ============================================================================= */ :root[data-theme="morning"] { --bg-page: #f5f7fb; --bg-surface: #ffffff; --bg-elevated: #eef2f8; --bg-sunken: rgba(15, 23, 42, 0.04); --bg-header: rgba(255, 255, 255, 0.85); --field-bg: #ffffff; --control-bg: #eef2f8; --viewer-bg: #dfe6f0; --viewer-part: #51607a; --axis-x: #059669; --axis-y: #2563eb; --axis-z: #d97706; --border-subtle: rgba(15, 23, 42, 0.07); --border: rgba(15, 23, 42, 0.14); --border-strong: rgba(15, 23, 42, 0.24); --border-emphasis: rgba(15, 23, 42, 0.40); --text: #1e293b; --text-strong: #0f172a; --text-mid: #334155; --text-muted: #5b6b7f; --text-subtle: #7c8aa0; --accent: #059669; --accent-strong: #047857; --accent-soft: #10b981; --accent-faint: #047857; --accent-bg: rgba(5, 150, 105, 0.11); --accent-bg-soft: rgba(5, 150, 105, 0.07); --accent-text: #ffffff; --accent-2: #2563eb; --accent-2-strong: #1d4ed8; --accent-2-soft: #3b82f6; --warn: #d97706; --warn-bright: #b45309; --warn-bg: rgba(217, 119, 6, 0.12); --warn-border: rgba(217, 119, 6, 0.36); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.10); --danger-border: rgba(220, 38, 38, 0.34); --ok-bg: rgba(5, 150, 105, 0.12); --ok-border: rgba(5, 150, 105, 0.34); --info: #2563eb; --info-bg: rgba(37, 99, 235, 0.10); --info-border: rgba(37, 99, 235, 0.34); --region-usa: #059669; --region-eu: #2563eb; --region-china: #d97706; --region-ru: #7c3aed; --gradient-panel: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(238,242,248,0.99)); --gradient-decor-blue: radial-gradient(1200px 800px at 10% -20%, rgba(37,99,235,0.08) 0%, transparent 42%); --gradient-decor-emerald: radial-gradient(900px 700px at 100% 0%, rgba(5,150,105,0.08) 0%, transparent 36%); --orb-1: rgba(37, 99, 235, 0.10); --orb-2: rgba(5, 150, 105, 0.08); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12); --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.18); --chart-1: #179f6b; --chart-1: oklch(0.60 0.15 162); --chart-2: #2f6ad0; --chart-2: oklch(0.55 0.17 250); --chart-3: #b07d1a; --chart-3: oklch(0.66 0.15 75); --chart-4: #cf4339; --chart-4: oklch(0.57 0.20 22); --chart-5: #8a45c0; --chart-5: oklch(0.53 0.19 300); --chart-6: #1f8fa8; --chart-6: oklch(0.60 0.13 215); --chart-7: #c83591; --chart-7: oklch(0.56 0.21 345); } /* ============================================================================= SUNSET (Evening) — warm dusk · maroon + emerald (Igor pick 1b, 2026-07-12; the ONE sunset identity product-wide — the plum+amber variant was retired). ============================================================================= */ :root[data-theme="sunset"] { --bg-page: #2a1a20; --bg-surface: #382430; --bg-elevated: #48303d; --bg-sunken: rgba(20, 10, 14, 0.34); --bg-header: rgba(36, 22, 28, 0.82); --field-bg: rgba(20, 10, 14, 0.55); --control-bg: rgba(72, 48, 61, 0.70); --viewer-bg: #241419; --viewer-part: #cfc0bc; --axis-x: #34d399; --axis-y: #60a5fa; --axis-z: #fbbf24; --border-subtle: rgba(236, 180, 160, 0.10); --border: rgba(236, 180, 160, 0.20); --border-strong: rgba(236, 180, 160, 0.34); --border-emphasis: rgba(236, 180, 160, 0.52); --text: #f6e4dd; --text-strong: #fff3ed; --text-mid: #e6cabe; --text-muted: #c29e92; --text-subtle: #94706a; --accent: #34d399; --accent-strong: #10b981; --accent-soft: #6ee7b7; --accent-faint: #a7f3d0; --accent-bg: rgba(52, 211, 153, 0.13); --accent-bg-soft: rgba(52, 211, 153, 0.07); --accent-text: #04221a; --accent-2: #60a5fa; --accent-2-strong: #3b82f6; --accent-2-soft: #93c5fd; --warn: #fbbf24; --warn-bright: #fcd34d; --warn-bg: rgba(251, 191, 36, 0.15); --warn-border: rgba(251, 191, 36, 0.42); --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15); --danger-border: rgba(251, 113, 133, 0.42); --ok-bg: rgba(52, 211, 153, 0.14); --ok-border: rgba(52, 211, 153, 0.36); --info: #93c5fd; --info-bg: rgba(96, 165, 250, 0.14); --info-border: rgba(96, 165, 250, 0.40); --region-usa: #6ee7b7; --region-eu: #93c5fd; --region-china: #fcd34d; --region-ru: #c4b5fd; --gradient-cta: linear-gradient(90deg, var(--accent), var(--accent-2)); --gradient-cta-hover: linear-gradient(90deg, var(--accent-soft), var(--accent-2-soft)); --gradient-panel: linear-gradient(180deg, rgba(72,48,61,0.72), rgba(56,36,48,0.78)); --gradient-decor-blue: radial-gradient(1200px 800px at 10% -20%, rgba(96,165,250,0.12) 0%, transparent 42%); --gradient-decor-emerald: radial-gradient(900px 700px at 100% 0%, rgba(52,211,153,0.12) 0%, transparent 38%); --orb-1: rgba(96, 165, 250, 0.12); --orb-2: rgba(52, 211, 153, 0.12); --shadow-sm: 0 1px 2px rgba(20, 10, 14, 0.40); --shadow-md: 0 8px 24px rgba(20, 10, 14, 0.44); --shadow-lg: 0 20px 48px rgba(20, 10, 14, 0.55); --chart-1: #34ba85; --chart-1: oklch(0.75 0.13 158); --chart-2: #5f95ec; --chart-2: oklch(0.72 0.13 245); --chart-3: #e3b13e; --chart-3: oklch(0.82 0.13 78); --chart-4: #ee7a6a; --chart-4: oklch(0.70 0.17 22); --chart-5: #bd7ada; --chart-5: oklch(0.70 0.15 305); --chart-6: #54bcd0; --chart-6: oklch(0.78 0.11 205); --chart-7: #e96cb4; --chart-7: oklch(0.72 0.17 345); }