/**
 * Opalit-ia marketing theme tokens (landing + public legal pages).
 * Driven by prefers-color-scheme and/or documentElement[data-opalit-theme].
 * CSS custom properties inherit into open/closed Shadow DOM when styles use var().
 */

:root {
  color-scheme: light dark;

  /* Page surfaces */
  --mkt-page-bg: #f8fafc;
  --mkt-surface: #f8fafc;
  --mkt-surface-elevated: #ffffff;
  --mkt-surface-muted: #f1f5f9;
  --mkt-surface-soft: #f8fafc;
  --mkt-surface-inverse: #0f172a;
  --mkt-surface-inverse-soft: #1e293b;

  /* Text */
  --mkt-text: #0f172a;
  --mkt-text-strong: #1e293b;
  --mkt-text-body: #334155;
  --mkt-text-secondary: #475569;
  --mkt-text-muted: #64748b;
  --mkt-text-faint: #94a3b8;
  --mkt-text-on-accent: #ffffff;
  --mkt-text-on-inverse: #f8fafc;
  --mkt-text-translucent: rgba(15, 23, 42, 0.85);
  --mkt-text-translucent-soft: rgba(15, 23, 42, 0.7);
  --mkt-text-translucent-muted: rgba(15, 23, 42, 0.75);

  /* Borders / lines */
  --mkt-border: rgba(15, 23, 42, 0.1);
  --mkt-border-strong: rgba(15, 23, 42, 0.2);
  --mkt-border-soft: rgba(0, 0, 0, 0.06);
  --mkt-border-softer: rgba(0, 0, 0, 0.04);
  --mkt-border-slate: rgba(148, 163, 184, 0.1);
  --mkt-border-solid: #e2e8f0;
  --mkt-border-close: #d8dee6;
  --mkt-grid-line: rgba(15, 23, 42, 0.04);
  --mkt-grid-line-strong: rgba(15, 23, 42, 0.16);
  --mkt-divider: #f1f5f9;

  /* Glass / nav chrome */
  --mkt-glass-bg: rgba(255, 255, 255, 0.75);
  --mkt-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --mkt-glass-border: rgba(255, 255, 255, 0.4);
  --mkt-glass-border-hover: rgba(99, 102, 241, 0.2);
  --mkt-glass-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
  --mkt-nav-shadow: 0 4px 24px rgba(99, 102, 241, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --mkt-nav-shadow-hover: 0 12px 40px rgba(99, 102, 241, 0.15), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* Hero atmosphere */
  --mkt-hero-radial-a: rgba(186, 230, 253, 0.3);
  --mkt-hero-radial-b: rgba(221, 214, 254, 0.25);
  --mkt-hero-base-from: #ffffff;
  --mkt-hero-base-to: #f1f5f9;
  --mkt-hero-glow: rgba(30, 58, 138, 0.05);
  --mkt-hero-mesh-a: rgba(139, 92, 246, 0.05);
  --mkt-hero-mesh-b: rgba(6, 182, 212, 0.05);
  --mkt-hero-mesh-c: rgba(236, 72, 153, 0.05);
  --mkt-hero-orb-a: rgba(99, 102, 241, 0.18);
  --mkt-hero-orb-b: rgba(34, 211, 238, 0.15);
  --mkt-hero-orb-c: rgba(236, 72, 153, 0.1);

  /* Soft tints (cards / badges) */
  --mkt-soft-primary: #eef2ff;
  --mkt-soft-primary-strong: #e0e7ff;
  --mkt-soft-primary-border: rgba(224, 231, 255, 0.8);
  --mkt-soft-primary-bg: rgba(238, 242, 255, 0.9);
  --mkt-soft-rose: #fce7f3;
  --mkt-soft-cyan: #cffafe;
  --mkt-soft-amber: #fef3c7;
  --mkt-soft-emerald: #d1fae5;
  --mkt-soft-violet: #ede9fe;
  --mkt-soft-danger: rgba(254, 242, 242, 0.9);
  --mkt-soft-danger-border: rgba(254, 202, 202, 0.8);
  --mkt-soft-success-fg: #065f46;
  --mkt-soft-danger-fg: #991b1b;

  /* Brand accents (stable across themes; slight brightening in dark handled below) */
  --mkt-primary-50: #eef2ff;
  --mkt-primary-100: #e0e7ff;
  --mkt-primary-200: #c7d2fe;
  --mkt-primary-300: #a5b4fc;
  --mkt-primary-400: #818cf8;
  --mkt-primary-500: #6366f1;
  --mkt-primary-600: #4f46e5;
  --mkt-primary-700: #4338ca;
  --mkt-cyan-300: #67e8f9;
  --mkt-cyan-400: #22d3ee;
  --mkt-cyan-500: #06b6d4;
  --mkt-cyan-600: #0891b2;
  --mkt-rose-400: #fb7185;
  --mkt-rose-500: #f43f5e;
  --mkt-amber-400: #fbbf24;
  --mkt-amber-500: #f59e0b;
  --mkt-emerald-400: #34d399;
  --mkt-emerald-500: #10b981;
  --mkt-danger: #dc2626;
  --mkt-dot-accent: #1e3a8a;

  /* Shadows */
  --mkt-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
  --mkt-shadow-md: 0 18px 50px rgba(15, 23, 42, 0.04);
  --mkt-shadow-lg: 0 20px 50px rgba(99, 102, 241, 0.12);
  --mkt-shadow-popup: 0 30px 80px rgba(0, 0, 0, 0.18);
  --mkt-scrim: rgba(0, 0, 0, 0.5);

  /* Popup */
  --mkt-popup-bg: #ffffff;
  --mkt-popup-close-bg: #f1f5f9;
  --mkt-popup-close-border: #d8dee6;
  --mkt-popup-close-stroke: #64748b;

  /* Selection / misc */
  --mkt-selection: rgba(99, 102, 241, 0.15);
  --mkt-scrollbar-track: transparent;
  --mkt-scrollbar-thumb: rgba(100, 116, 139, 0.35);

  /* Theme transition (cheap color only) */
  --mkt-theme-transition: background-color 0.28s ease, color 0.28s ease,
    border-color 0.28s ease, box-shadow 0.28s ease, fill 0.28s ease,
    stroke 0.28s ease;

  /* Legacy aliases used by page CSS and many CEs */
  --void: #050816;
  --void-light: #0a0f1f;
  --surface: var(--mkt-surface);
  --white: var(--mkt-surface-elevated);
  --text: var(--mkt-text-body);
  --text-secondary: var(--mkt-text-secondary);
  --text-muted: var(--mkt-text-faint);
  --glass-bg: var(--mkt-glass-bg);
  --glass-border: var(--mkt-glass-border);
  --glass-shadow: var(--mkt-glass-shadow);
  --primary-50: var(--mkt-primary-50);
  --primary-100: var(--mkt-primary-100);
  --primary-200: var(--mkt-primary-200);
  --primary-300: var(--mkt-primary-300);
  --primary-400: var(--mkt-primary-400);
  --primary-500: var(--mkt-primary-500);
  --primary-600: var(--mkt-primary-600);
  --primary-700: var(--mkt-primary-700);
  --cyan-300: var(--mkt-cyan-300);
  --cyan-400: var(--mkt-cyan-400);
  --cyan-500: var(--mkt-cyan-500);
  --cyan-600: var(--mkt-cyan-600);
  --rose-300: #fda4af;
  --rose-400: var(--mkt-rose-400);
  --rose-500: var(--mkt-rose-500);
  --amber-300: #fcd34d;
  --amber-400: var(--mkt-amber-400);
  --amber-500: var(--mkt-amber-500);
  --emerald-300: #6ee7b7;
  --emerald-400: var(--mkt-emerald-400);
  --emerald-500: var(--mkt-emerald-500);
  --font: "Nunito", sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* System dark (unless page forces light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-opalit-theme="light"]) {
    color-scheme: dark;

    --mkt-page-bg: #080d16;
    --mkt-surface: #080d16;
    --mkt-surface-elevated: #0f172a;
    --mkt-surface-muted: #111827;
    --mkt-surface-soft: #0f172a;
    --mkt-surface-inverse: #e2e8f0;
    --mkt-surface-inverse-soft: #cbd5e1;

    --mkt-text: #f8fafc;
    --mkt-text-strong: #f1f5f9;
    --mkt-text-body: #e2e8f0;
    --mkt-text-secondary: #cbd5e1;
    --mkt-text-muted: #94a3b8;
    --mkt-text-faint: #64748b;
    --mkt-text-on-accent: #ffffff;
    --mkt-text-on-inverse: #0f172a;
    --mkt-text-translucent: rgba(248, 250, 252, 0.92);
    --mkt-text-translucent-soft: rgba(226, 232, 240, 0.82);
    --mkt-text-translucent-muted: rgba(226, 232, 240, 0.78);

    --mkt-border: rgba(148, 163, 184, 0.22);
    --mkt-border-strong: rgba(148, 163, 184, 0.35);
    --mkt-border-soft: rgba(255, 255, 255, 0.08);
    --mkt-border-softer: rgba(255, 255, 255, 0.05);
    --mkt-border-slate: rgba(148, 163, 184, 0.18);
    --mkt-border-solid: #263245;
    --mkt-border-close: #334155;
    --mkt-grid-line: rgba(148, 163, 184, 0.08);
    --mkt-grid-line-strong: rgba(148, 163, 184, 0.18);
    --mkt-divider: #1e293b;

    --mkt-glass-bg: rgba(15, 23, 42, 0.72);
    --mkt-glass-bg-strong: rgba(15, 23, 42, 0.88);
    --mkt-glass-border: rgba(148, 163, 184, 0.22);
    --mkt-glass-border-hover: rgba(129, 140, 248, 0.35);
    --mkt-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --mkt-nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --mkt-nav-shadow-hover: 0 12px 40px rgba(99, 102, 241, 0.2), 0 4px 8px rgba(0, 0, 0, 0.35);

    --mkt-hero-radial-a: rgba(56, 189, 248, 0.12);
    --mkt-hero-radial-b: rgba(129, 140, 248, 0.12);
    --mkt-hero-base-from: #0b1220;
    --mkt-hero-base-to: #080d16;
    --mkt-hero-glow: rgba(99, 102, 241, 0.08);
    --mkt-hero-mesh-a: rgba(139, 92, 246, 0.08);
    --mkt-hero-mesh-b: rgba(6, 182, 212, 0.08);
    --mkt-hero-mesh-c: rgba(236, 72, 153, 0.06);
    --mkt-hero-orb-a: rgba(99, 102, 241, 0.22);
    --mkt-hero-orb-b: rgba(34, 211, 238, 0.16);
    --mkt-hero-orb-c: rgba(236, 72, 153, 0.12);

    --mkt-soft-primary: rgba(99, 102, 241, 0.18);
    --mkt-soft-primary-strong: rgba(99, 102, 241, 0.28);
    --mkt-soft-primary-border: rgba(129, 140, 248, 0.35);
    --mkt-soft-primary-bg: rgba(99, 102, 241, 0.16);
    --mkt-soft-rose: rgba(244, 63, 94, 0.16);
    --mkt-soft-cyan: rgba(6, 182, 212, 0.16);
    --mkt-soft-amber: rgba(245, 158, 11, 0.16);
    --mkt-soft-emerald: rgba(16, 185, 129, 0.16);
    --mkt-soft-violet: rgba(139, 92, 246, 0.16);
    --mkt-soft-danger: rgba(220, 38, 38, 0.16);
    --mkt-soft-danger-border: rgba(248, 113, 113, 0.35);
    --mkt-soft-success-fg: #6ee7b7;
    --mkt-soft-danger-fg: #fca5a5;

    --mkt-primary-50: rgba(99, 102, 241, 0.14);
    --mkt-primary-100: rgba(99, 102, 241, 0.2);
    --mkt-primary-200: rgba(129, 140, 248, 0.35);
    --mkt-primary-300: #a5b4fc;
    --mkt-primary-400: #818cf8;
    --mkt-primary-500: #818cf8;
    --mkt-primary-600: #6366f1;
    --mkt-primary-700: #4f46e5;
    --mkt-dot-accent: #93c5fd;

    --mkt-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
    --mkt-shadow-md: 0 18px 50px rgba(0, 0, 0, 0.35);
    --mkt-shadow-lg: 0 20px 50px rgba(99, 102, 241, 0.18);
    --mkt-shadow-popup: 0 30px 80px rgba(0, 0, 0, 0.55);
    --mkt-scrim: rgba(0, 0, 0, 0.65);

    --mkt-popup-bg: #0f172a;
    --mkt-popup-close-bg: #1e293b;
    --mkt-popup-close-border: #334155;
    --mkt-popup-close-stroke: #94a3b8;

    --mkt-selection: rgba(129, 140, 248, 0.28);
    --mkt-scrollbar-thumb: rgba(148, 163, 184, 0.4);

    --void: #020617;
    --void-light: #0b1220;
  }
}

/* Explicit dark (JS sync or tests) */
:root[data-opalit-theme="dark"] {
  color-scheme: dark;

  --mkt-page-bg: #080d16;
  --mkt-surface: #080d16;
  --mkt-surface-elevated: #0f172a;
  --mkt-surface-muted: #111827;
  --mkt-surface-soft: #0f172a;
  --mkt-surface-inverse: #e2e8f0;
  --mkt-surface-inverse-soft: #cbd5e1;

  --mkt-text: #f8fafc;
  --mkt-text-strong: #f1f5f9;
  --mkt-text-body: #e2e8f0;
  --mkt-text-secondary: #cbd5e1;
  --mkt-text-muted: #94a3b8;
  --mkt-text-faint: #64748b;
  --mkt-text-on-accent: #ffffff;
  --mkt-text-on-inverse: #0f172a;
  --mkt-text-translucent: rgba(248, 250, 252, 0.92);
  --mkt-text-translucent-soft: rgba(226, 232, 240, 0.82);
  --mkt-text-translucent-muted: rgba(226, 232, 240, 0.78);

  --mkt-border: rgba(148, 163, 184, 0.22);
  --mkt-border-strong: rgba(148, 163, 184, 0.35);
  --mkt-border-soft: rgba(255, 255, 255, 0.08);
  --mkt-border-softer: rgba(255, 255, 255, 0.05);
  --mkt-border-slate: rgba(148, 163, 184, 0.18);
  --mkt-border-solid: #263245;
  --mkt-border-close: #334155;
  --mkt-grid-line: rgba(148, 163, 184, 0.08);
  --mkt-grid-line-strong: rgba(148, 163, 184, 0.18);
  --mkt-divider: #1e293b;

  --mkt-glass-bg: rgba(15, 23, 42, 0.72);
  --mkt-glass-bg-strong: rgba(15, 23, 42, 0.88);
  --mkt-glass-border: rgba(148, 163, 184, 0.22);
  --mkt-glass-border-hover: rgba(129, 140, 248, 0.35);
  --mkt-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --mkt-nav-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --mkt-nav-shadow-hover: 0 12px 40px rgba(99, 102, 241, 0.2), 0 4px 8px rgba(0, 0, 0, 0.35);

  --mkt-hero-radial-a: rgba(56, 189, 248, 0.12);
  --mkt-hero-radial-b: rgba(129, 140, 248, 0.12);
  --mkt-hero-base-from: #0b1220;
  --mkt-hero-base-to: #080d16;
  --mkt-hero-glow: rgba(99, 102, 241, 0.08);
  --mkt-hero-mesh-a: rgba(139, 92, 246, 0.08);
  --mkt-hero-mesh-b: rgba(6, 182, 212, 0.08);
  --mkt-hero-mesh-c: rgba(236, 72, 153, 0.06);
  --mkt-hero-orb-a: rgba(99, 102, 241, 0.22);
  --mkt-hero-orb-b: rgba(34, 211, 238, 0.16);
  --mkt-hero-orb-c: rgba(236, 72, 153, 0.12);

  --mkt-soft-primary: rgba(99, 102, 241, 0.18);
  --mkt-soft-primary-strong: rgba(99, 102, 241, 0.28);
  --mkt-soft-primary-border: rgba(129, 140, 248, 0.35);
  --mkt-soft-primary-bg: rgba(99, 102, 241, 0.16);
  --mkt-soft-rose: rgba(244, 63, 94, 0.16);
  --mkt-soft-cyan: rgba(6, 182, 212, 0.16);
  --mkt-soft-amber: rgba(245, 158, 11, 0.16);
  --mkt-soft-emerald: rgba(16, 185, 129, 0.16);
  --mkt-soft-violet: rgba(139, 92, 246, 0.16);
  --mkt-soft-danger: rgba(220, 38, 38, 0.16);
  --mkt-soft-danger-border: rgba(248, 113, 113, 0.35);
  --mkt-soft-success-fg: #6ee7b7;
  --mkt-soft-danger-fg: #fca5a5;

  --mkt-primary-50: rgba(99, 102, 241, 0.14);
  --mkt-primary-100: rgba(99, 102, 241, 0.2);
  --mkt-primary-200: rgba(129, 140, 248, 0.35);
  --mkt-primary-300: #a5b4fc;
  --mkt-primary-400: #818cf8;
  --mkt-primary-500: #818cf8;
  --mkt-primary-600: #6366f1;
  --mkt-primary-700: #4f46e5;
  --mkt-dot-accent: #93c5fd;

  --mkt-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --mkt-shadow-md: 0 18px 50px rgba(0, 0, 0, 0.35);
  --mkt-shadow-lg: 0 20px 50px rgba(99, 102, 241, 0.18);
  --mkt-shadow-popup: 0 30px 80px rgba(0, 0, 0, 0.55);
  --mkt-scrim: rgba(0, 0, 0, 0.65);

  --mkt-popup-bg: #0f172a;
  --mkt-popup-close-bg: #1e293b;
  --mkt-popup-close-border: #334155;
  --mkt-popup-close-stroke: #94a3b8;

  --mkt-selection: rgba(129, 140, 248, 0.28);
  --mkt-scrollbar-thumb: rgba(148, 163, 184, 0.4);

  --void: #020617;
  --void-light: #0b1220;
}

/* Explicit light overrides system dark */
:root[data-opalit-theme="light"] {
  color-scheme: light;
}

html {
  color-scheme: light dark;
  background-color: var(--mkt-page-bg);
}

body {
  background: var(--mkt-page-bg);
  color: var(--mkt-text-body);
  transition: var(--mkt-theme-transition);
}

::selection {
  background: var(--mkt-selection);
  color: inherit;
}