/* Design tokens — Patron Mobile (Dual Theme System) */

/* ═══════════════════════════════════════════════════
   KATMAN 1 — Primitive / Base Tokens
   Temadan bağımsız sabitler
   ═══════════════════════════════════════════════════ */
:root {
  /* ── Typography ── */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fs-6xl: 3.75rem;
  --fs-7xl: 4.5rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --lh-loose: 1.75;

  /* ── Spacing (4px grid) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;

  /* ── Radius ── */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-pill: 9999px;

  /* ── Layout ── */
  --container-max: 82.5rem;
  --container-pad: 1.5rem;
  --header-height: 4.75rem;
  --logo-height: 2.75rem;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --duration-slower: 500ms;

  /* ── Z-index ── */
  --z-header: 1000;
  --z-overlay: 200;
  --z-back-top: 90;

  /* ── Brand palette (constant across themes) ── */
  --brand-navy: #1a1c3d;
  --brand-indigo: #6366f1;
  --brand-indigo-dark: #4f46e5;
  --brand-indigo-deeper: #4338ca;
  --brand-indigo-light: #818cf8;
  --brand-indigo-lighter: #a5b4fc;
  --brand-violet: #7c3aed;
  --brand-gold: #f59e0b;
  --brand-gold-text: #fbbf24;
  --brand-green: #22c55e;
  --brand-red: #ef4444;
}

/* ═══════════════════════════════════════════════════
   KATMAN 2 — Light Theme (varsayılan)
   ═══════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* ── Backgrounds ── */
  --color-bg-primary: #f6f7fb;
  --color-bg-secondary: #eff1f7;
  --color-bg-tertiary: #e5e8f1;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f9fafe;
  --color-bg-elevated: #ffffff;

  /* ── Text ── */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;

  /* ── Indigo accent ── */
  --color-accent-primary: #6366f1;
  --color-accent-secondary: #4f46e5;
  --color-accent-tertiary: #4338ca;
  --color-accent-glow: rgba(99, 102, 241, 0.12);

  /* ── Violet layer ── */
  --color-accent-violet: #7c3aed;
  --color-accent-violet-muted: rgba(124, 58, 237, 0.10);
  --color-accent-violet-glow: rgba(124, 58, 237, 0.18);

  /* ── Warm accent ── */
  --color-accent-warm: #f59e0b;
  --color-accent-warm-muted: rgba(245, 158, 11, 0.12);
  --color-accent-warm-text: #d97706;

  /* ── Semantic ── */
  --color-success: #16a34a;
  --color-success-muted: rgba(22, 163, 74, 0.10);
  --color-success-text: #15803d;
  --color-error: #dc2626;
  --color-error-muted: rgba(220, 38, 38, 0.08);
  --color-error-text: #dc2626;
  --color-error-bg: rgba(220, 38, 38, 0.06);
  --color-error-border: rgba(220, 38, 38, 0.25);

  /* ── Borders ── */
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.15);
  --color-border-accent: rgba(99, 102, 241, 0.35);

  /* ── Gradients ── */
  --gradient-section-a: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  --gradient-section-b: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.10), transparent 70%);
  --gradient-violet-edge: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, transparent 42%);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.25), 0 8px 24px rgba(99, 102, 241, 0.10);
  --shadow-glow-lg: 0 0 0 1px rgba(99, 102, 241, 0.30), 0 16px 40px rgba(99, 102, 241, 0.15);
  --shadow-elevated: 0 2px 8px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--color-border);
  --shadow-card-hover: 0 0 0 1px rgba(99, 102, 241, 0.40), 0 12px 32px rgba(99, 102, 241, 0.12);

  /* ── Component-specific ── */
  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.92);
  --nav-hover-bg: rgba(99, 102, 241, 0.06);
  --nav-dropdown-bg: rgba(255, 255, 255, 0.98);
  --mobile-backdrop: rgba(15, 23, 42, 0.40);
  --mobile-panel-bg: #ffffff;

  --hero-glow: rgba(99, 102, 241, 0.08);
  --hero-grid-line: rgba(99, 102, 241, 0.05);

  --trust-strip-bg: rgba(99, 102, 241, 0.04);

  --footer-modules-bg: rgba(99, 102, 241, 0.06);
  --footer-trust-strip-bg: rgba(99, 102, 241, 0.04);
  --ambient-glow-a: radial-gradient(ellipse 80% 55% at 20% 0%, rgba(99, 102, 241, 0.06), transparent 60%);
  --ambient-glow-b: radial-gradient(ellipse 60% 45% at 85% 100%, rgba(124, 58, 237, 0.04), transparent 55%);

  --showcase-bg: var(--color-bg-secondary);
  --showcase-nav-bg: rgba(15, 23, 42, 0.03);

  --tab-bg: rgba(99, 102, 241, 0.04);
  --tab-active-bg: rgba(99, 102, 241, 0.12);

  --chip-bg: rgba(99, 102, 241, 0.06);
  --chip-info-bg: rgba(59, 130, 246, 0.12);
  --chip-success-border: rgba(22, 163, 74, 0.30);
  --chip-success-bg: rgba(22, 163, 74, 0.08);
  --chip-success-text: #15803d;

  --faq-bg: rgba(99, 102, 241, 0.03);
  --faq-hover-bg: rgba(99, 102, 241, 0.05);

  --input-bg: #f8f9fc;
  --input-placeholder: #94a3b8;

  --form-success-bg: rgba(22, 163, 74, 0.08);
  --form-success-border: rgba(22, 163, 74, 0.25);
  --form-success-text: #15803d;
  --form-error-text: #dc2626;
  --form-error-light: #fca5a5;

  --footer-bg: #0f172a;
  --footer-text: #94a3b8;
  --footer-text-secondary: #cbd5e1;
  --footer-heading: #64748b;
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-link-hover: #a5b4fc;
  --footer-icon-color: #cbd5e1;
  --footer-icon-border: rgba(255, 255, 255, 0.10);
  --footer-brand-title: #f8fafc;
  --footer-brand-accent: #c7d2fe;

  --back-top-bg: rgba(255, 255, 255, 0.92);
  --back-top-border: rgba(15, 23, 42, 0.12);
  --back-top-color: #475569;
  --back-top-hover-bg: rgba(99, 102, 241, 0.10);

  --marquee-bg: rgba(99, 102, 241, 0.04);

  --pricing-featured-bg: linear-gradient(160deg, rgba(99, 102, 241, 0.08), var(--color-bg-card));
  --pricing-banner-bg: linear-gradient(120deg, rgba(99, 102, 241, 0.08), rgba(241, 245, 249, 0.9));

  --btn-secondary-hover-bg: rgba(99, 102, 241, 0.06);

  --showcase-slider-btn-bg: rgba(99, 102, 241, 0.06);
  --showcase-slider-btn-hover: rgba(99, 102, 241, 0.15);
  --showcase-dot-bg: rgba(99, 102, 241, 0.25);

  /* ── Logo ── */
  --logo-text-primary: #0f172a;
  --logo-text-secondary: #64748b;

  /* ── Device mockups (phone) ── */
  --device-rim: #c8cdd5;
  --device-rim-shine: linear-gradient(145deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.15));
  --device-rim-border: rgba(0, 0, 0, 0.12);
  --device-screen-bg: #f1f5f9;
  --device-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(99, 102, 241, 0.06);
  --device-dynamic-bg: #e2e8f0;
  --device-camera-bg: #d1d5db;
  --device-camera-border: rgba(0, 0, 0, 0.10);
  --device-inner-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;

  /* ── Desktop mockup (premium) ── */
  --desktop-shell: linear-gradient(180deg, #c2c9d3 0%, #aeb7c3 35%, #98a2b0 100%);
  --desktop-shell-shine: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 10%, transparent 35%);
  --desktop-bezel: rgba(0, 0, 0, 0.22);
  --desktop-inner-shadow: 0 0 0 1px rgba(0,0,0,0.14) inset, 0 1px 2px rgba(0,0,0,0.05) inset;
  --desktop-screen-frame: rgba(0, 0, 0, 0.30);
  --desktop-screen-inset: 0 0 0 1px rgba(0,0,0,0.06) inset, 0 2px 6px rgba(0,0,0,0.10) inset;
  --desktop-screen-well: #e6eaf0;
  --desktop-chin: linear-gradient(180deg, #aeb7c3, #939dab);
  --desktop-stand: linear-gradient(90deg, #939dab 0%, #cdd3db 38%, #bac1cb 50%, #d3d9e0 62%, #939dab 100%);
  --desktop-base: linear-gradient(90deg, #939dab 0%, #bac1cb 30%, #cdd3db 50%, #bac1cb 70%, #939dab 100%);
  --desktop-contact-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 0 3px rgba(15, 23, 42, 0.03);
  --desktop-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 24px rgba(15, 23, 42, 0.06), 0 32px 56px rgba(15, 23, 42, 0.10);
  --desktop-highlight: rgba(255, 255, 255, 0.50);
  --desktop-screen-image-filter: contrast(1.02) saturate(1.04);

  /* ── Theme toggle ── */
  --toggle-bg: rgba(99, 102, 241, 0.06);
  --toggle-border: var(--color-border-strong);
  --toggle-hover-bg: rgba(99, 102, 241, 0.12);
  --toggle-color: #475569;
  --lang-switcher-track: #eef0f4;
  --theme-toggle-header-bg: #ffffff;

  /* Visual upgrade — icon surfaces, mesh, premium CTA */
  --visual-icon-surface: rgba(99, 102, 241, 0.09);
  --visual-icon-surface-hover: rgba(99, 102, 241, 0.14);
  --visual-icon-border: rgba(99, 102, 241, 0.22);
  --visual-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%);
  --visual-mesh-a: radial-gradient(ellipse 70% 50% at 10% 0%, rgba(99, 102, 241, 0.08), transparent 55%);
  --visual-mesh-b: radial-gradient(ellipse 60% 45% at 90% 100%, rgba(124, 58, 237, 0.07), transparent 50%);
  --gradient-cta-rich: linear-gradient(125deg, rgba(79, 70, 229, 0.14) 0%, rgba(124, 58, 237, 0.1) 38%, rgba(15, 23, 42, 0.04) 100%);
  --semantic-screen-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 45%, #cbd5e1 100%);
  --semantic-screen-bg-dark: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%);

  /* ── Premium surface system ── */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --shadow-card-lift: 0 0 0 1px rgba(99, 102, 241, 0.30), 0 8px 24px rgba(99, 102, 241, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
  --border-card: 1px solid rgba(15, 23, 42, 0.07);
  --border-card-hover: 1px solid rgba(99, 102, 241, 0.35);
  --surface-elevated: #ffffff;
  --surface-elevated-hover: #fafafd;

  /* ── Loader premium ── */
  --loader-bg: linear-gradient(145deg, #0f172a 0%, #162044 50%, #1e1b4b 100%);
  --loader-bar-track: rgba(255, 255, 255, 0.10);
  --loader-bar-fill: linear-gradient(90deg, var(--brand-indigo-light), var(--brand-indigo), var(--brand-violet));
  --loader-text: rgba(255, 255, 255, 0.55);

  /* ── Token aliases (pages.css compatibility) ── */
  --color-accent: var(--color-accent-primary);
  --color-text: var(--color-text-primary);
  --color-surface: var(--color-bg-card);
  --color-surface-raised: var(--color-bg-elevated);
  --color-accent-faint: rgba(99, 102, 241, 0.15);
  --conversion-bar-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

/* ═══════════════════════════════════════════════════
   KATMAN 3 — Dark Theme Override
   ═══════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  /* ── Backgrounds ── */
  --color-bg-primary: #070f1a;
  --color-bg-secondary: #0d1b32;
  --color-bg-tertiary: #152847;
  --color-bg-card: rgba(18, 36, 68, 0.60);
  --color-bg-card-hover: rgba(26, 48, 88, 0.75);
  --color-bg-elevated: rgba(14, 28, 56, 0.88);

  /* ── Text ── */
  --color-text-primary: #ffffff;
  --color-text-secondary: #b8c5d9;
  --color-text-muted: #6b7a8d;

  /* ── Indigo accent ── */
  --color-accent-primary: #6366f1;
  --color-accent-secondary: #818cf8;
  --color-accent-tertiary: #a5b4fc;
  --color-accent-glow: rgba(99, 102, 241, 0.35);

  /* ── Violet layer ── */
  --color-accent-violet: #7c3aed;
  --color-accent-violet-muted: rgba(124, 58, 237, 0.22);
  --color-accent-violet-glow: rgba(124, 58, 237, 0.45);

  /* ── Warm accent ── */
  --color-accent-warm: #f59e0b;
  --color-accent-warm-muted: rgba(245, 158, 11, 0.14);
  --color-accent-warm-text: #fbbf24;

  /* ── Semantic ── */
  --color-success: #22c55e;
  --color-success-muted: rgba(34, 197, 94, 0.15);
  --color-success-text: #86efac;
  --color-error: #ef4444;
  --color-error-muted: rgba(239, 68, 68, 0.12);
  --color-error-text: #fca5a5;
  --color-error-bg: rgba(239, 68, 68, 0.12);
  --color-error-border: rgba(239, 68, 68, 0.35);

  /* ── Borders ── */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-border-accent: rgba(99, 102, 241, 0.35);

  /* ── Gradients ── */
  --gradient-section-a: linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  --gradient-section-b: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.22), transparent 70%);
  --gradient-violet-edge: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, transparent 42%);

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.20);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.28);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.25), 0 12px 40px rgba(99, 102, 241, 0.15);
  --shadow-glow-lg: 0 0 0 1px rgba(99, 102, 241, 0.30), 0 20px 60px rgba(99, 102, 241, 0.22);
  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--color-border);
  --shadow-card-hover: 0 0 0 1px rgba(99, 102, 241, 0.45), 0 16px 48px rgba(99, 102, 241, 0.18);

  /* ── Component-specific ── */
  --nav-bg: transparent;
  --nav-bg-scrolled: rgba(7, 15, 26, 0.88);
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-dropdown-bg: rgba(12, 26, 48, 0.98);
  --mobile-backdrop: rgba(5, 10, 20, 0.65);
  --mobile-panel-bg: var(--color-bg-secondary);

  --hero-glow: rgba(99, 102, 241, 0.18);
  --hero-grid-line: rgba(255, 255, 255, 0.03);

  --trust-strip-bg: rgba(15, 31, 61, 0.6);

  --showcase-bg: var(--color-bg-tertiary);
  --showcase-nav-bg: rgba(0, 0, 0, 0.2);

  --tab-bg: rgba(255, 255, 255, 0.03);
  --tab-active-bg: rgba(99, 102, 241, 0.2);

  --chip-bg: rgba(255, 255, 255, 0.04);
  --chip-success-border: rgba(34, 197, 94, 0.35);
  --chip-success-bg: rgba(34, 197, 94, 0.10);
  --chip-success-text: #86efac;

  --faq-bg: rgba(255, 255, 255, 0.03);
  --faq-hover-bg: rgba(255, 255, 255, 0.04);

  --input-bg: rgba(0, 0, 0, 0.25);
  --input-placeholder: var(--color-text-muted);

  --form-success-bg: rgba(34, 197, 94, 0.12);
  --form-success-border: rgba(34, 197, 94, 0.35);
  --form-success-text: #bbf7d0;
  --form-error-text: #fca5a5;
  --form-error-light: #fca5a5;

  --footer-bg: #050d18;
  --footer-text: #6b7a8d;
  --footer-text-secondary: #b8c5d9;
  --footer-heading: #6b7a8d;
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-link-hover: #a5b4fc;
  --footer-icon-color: #b8c5d9;
  --footer-icon-border: rgba(255, 255, 255, 0.08);
  --footer-brand-title: #f8fafc;
  --footer-brand-accent: #a5b4fc;

  --back-top-bg: rgba(10, 22, 40, 0.9);
  --back-top-border: rgba(255, 255, 255, 0.14);
  --back-top-color: #ffffff;
  --back-top-hover-bg: rgba(99, 102, 241, 0.2);

  --marquee-bg: rgba(255, 255, 255, 0.03);

  --pricing-featured-bg: linear-gradient(160deg, rgba(99, 102, 241, 0.12), var(--color-bg-card));
  --pricing-banner-bg: linear-gradient(120deg, rgba(99, 102, 241, 0.15), rgba(15, 31, 61, 0.9));

  --btn-secondary-hover-bg: rgba(99, 102, 241, 0.08);

  --showcase-slider-btn-bg: rgba(255, 255, 255, 0.05);
  --showcase-slider-btn-hover: rgba(99, 102, 241, 0.25);
  --showcase-dot-bg: rgba(255, 255, 255, 0.25);

  /* ── Logo ── */
  --logo-text-primary: #f8fafc;
  --logo-text-secondary: #94a3b8;

  /* ── Device mockups (phone) ── */
  --device-rim: #1e293b;
  --device-rim-shine: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  --device-rim-border: rgba(255, 255, 255, 0.12);
  --device-screen-bg: #020617;
  --device-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(99, 102, 241, 0.12);
  --device-dynamic-bg: #020617;
  --device-camera-bg: #0f172a;
  --device-camera-border: rgba(255, 255, 255, 0.12);
  --device-inner-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;

  /* ── Desktop mockup (premium) ── */
  --desktop-shell: linear-gradient(180deg, #334155 0%, #1e293b 40%, #0f172a 100%);
  --desktop-shell-shine: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 12%, transparent 35%);
  --desktop-bezel: rgba(255, 255, 255, 0.10);
  --desktop-inner-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
  --desktop-screen-frame: rgba(0, 0, 0, 0.55);
  --desktop-screen-inset: 0 0 0 1px rgba(0, 0, 0, 0.30) inset;
  --desktop-screen-well: #020617;
  --desktop-chin: linear-gradient(180deg, #1e293b, #0f172a);
  --desktop-stand: linear-gradient(90deg, #475569, #94a3b8 45%, #64748b 55%, #334155);
  --desktop-base: linear-gradient(90deg, #1e293b, #475569, #1e293b);
  --desktop-contact-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
  --desktop-shadow: 0 24px 60px rgba(0, 0, 0, 0.50);
  --desktop-highlight: rgba(255, 255, 255, 0.06);
  --desktop-screen-image-filter: none;

  /* ── Theme toggle ── */
  --toggle-bg: rgba(255, 255, 255, 0.04);
  --toggle-border: var(--color-border-strong);
  --toggle-hover-bg: rgba(255, 255, 255, 0.08);
  --toggle-color: var(--color-text-primary);
  --lang-switcher-track: rgba(255, 255, 255, 0.06);
  --theme-toggle-header-bg: rgba(255, 255, 255, 0.04);

  --visual-icon-surface: rgba(99, 102, 241, 0.14);
  --visual-icon-surface-hover: rgba(99, 102, 241, 0.22);
  --visual-icon-border: rgba(129, 140, 248, 0.35);
  --visual-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 45%);
  --visual-mesh-a: radial-gradient(ellipse 70% 50% at 12% 0%, rgba(99, 102, 241, 0.18), transparent 55%);
  --visual-mesh-b: radial-gradient(ellipse 55% 40% at 92% 100%, rgba(124, 58, 237, 0.14), transparent 50%);
  --gradient-cta-rich: linear-gradient(125deg, rgba(99, 102, 241, 0.2) 0%, rgba(124, 58, 237, 0.12) 40%, rgba(7, 15, 26, 0.5) 100%);
  --semantic-screen-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 45%, #334155 100%);
  --semantic-screen-bg-dark: linear-gradient(180deg, #020617 0%, #0f172a 55%, #1e293b 100%);

  /* ── Premium surface system ── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-card-lift: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 8px 24px rgba(99, 102, 241, 0.18), 0 2px 8px rgba(0, 0, 0, 0.20);
  --border-card: 1px solid var(--color-border);
  --border-card-hover: 1px solid var(--color-border-accent);
  --surface-elevated: var(--color-bg-elevated);
  --surface-elevated-hover: var(--color-bg-card-hover);

  /* ── Token aliases (pages.css compatibility) ── */
  --color-accent: var(--color-accent-primary);
  --color-text: var(--color-text-primary);
  --color-surface: var(--color-bg-card);
  --color-surface-raised: var(--color-bg-elevated);
  --chip-info-bg: rgba(59, 130, 246, 0.18);
  --color-accent-faint: rgba(99, 102, 241, 0.22);
  --conversion-bar-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* ═══════════════════════════════════════════════════
   KATMAN 4 — Reduced Motion Override
   Transitions use token durations → near-instant here.
   CSS animations killed by reset.css.
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
  }
}