/* ============================================================================
   AIVE ONE — Legacy → Prism token bridge  (PHASE 2 · full theme support)
   Maps ALL --aive-* variables to Prism semantic tokens. Theme switching (dark/
   light), density, and accent are handled by tokens.css — this file just
   translates the old variable names. Requires ds/tokens.css loaded first.
   ========================================================================== */
:root {
  /* ── Fonts ─────────────────────────────────────────────────────────────── */
  --aive-font-sans: var(--font-sans);
  --aive-font-mono: var(--font-mono);

  /* ── Backgrounds ───────────────────────────────────────────────────────── */
  --aive-bg-primary: var(--bg);        --aive-bg-surface: var(--surface);
  --aive-bg-secondary: var(--surface); --aive-bg-tertiary: var(--surface-2);
  --aive-bg-elevated: var(--elevated); --aive-bg-deep: var(--bg-deep);
  --aive-bg-panel: var(--surface);     --aive-bg-lift: var(--surface-2);
  --aive-bg-hi: var(--border-strong);
  --aive-bg-qr: #ffffff;

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --aive-text-primary: var(--text);    --aive-text-secondary: var(--text-2);
  --aive-text-tertiary: var(--text-3); --aive-text-disabled: var(--text-3);

  /* ── Accent + AI ───────────────────────────────────────────────────────── */
  --aive-accent: var(--accent);        --aive-accent-hover: var(--accent-hover);
  --aive-accent-muted: var(--surface-2); --aive-accent-soft: var(--accent-soft);
  --aive-accent-primary: var(--accent);
  --aive-accent-secondary: var(--ai);
  --aive-accent-success: var(--success);
  --aive-accent-warning: var(--warning);
  --aive-ai-purple: var(--ai);         --aive-ai-mag: var(--accent);
  --aive-surface-ai: var(--ai-soft);

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --aive-success: var(--success);      --aive-error: var(--danger);
  --aive-warning: var(--warning);      --aive-teal: var(--success);
  --aive-yellow: var(--warning);
  --aive-success-muted: color-mix(in srgb, var(--success) 12%, transparent);
  --aive-ink: var(--text);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --aive-border-default: var(--border); --aive-border-soft: var(--border-soft);
  --aive-border-strong: var(--border-strong);
  --aive-border-accent: color-mix(in srgb, var(--accent) 45%, transparent);
  --aive-border-ai: color-mix(in srgb, var(--ai) 45%, transparent);
  --aive-border-subtle: var(--border-soft);
  --aive-border-panel: var(--border);
  --aive-border-primary: var(--border);
  --aive-border-active: color-mix(in srgb, var(--accent) 35%, transparent);
  --aive-border-glass: color-mix(in srgb, var(--text) 8%, transparent);
  --aive-border-glass-strong: color-mix(in srgb, var(--text) 14%, transparent);

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --aive-surface-chrome: var(--surface);
  --aive-surface-toolbar: var(--surface);
  --aive-surface-hover: var(--surface-2);
  --aive-surface-elevated: var(--elevated);
  --aive-surface-input: var(--bg);
  --aive-surface-ruler: var(--surface);
  --aive-surface-control: var(--surface-2);
  --aive-surface-panel: var(--surface);
  --aive-surface-secondary: var(--surface);
  --aive-surface-tertiary: var(--surface-2);

  /* ── Icons ─────────────────────────────────────────────────────────────── */
  --aive-icon-primary: var(--text);
  --aive-icon-secondary: var(--text-2);

  /* ── Glass + overlay ───────────────────────────────────────────────────── */
  --aive-glass-bg: color-mix(in srgb, var(--bg) 72%, transparent);
  --aive-overlay-opacity: 0.6;

  /* ── Clip colours (editor) ─────────────────────────────────────────────── */
  --aive-clip-video: var(--clip-video); --aive-clip-audio: var(--clip-audio);
  --aive-clip-title: var(--clip-title); --aive-clip-generator: var(--clip-gen);

  /* ── Pacing (editor) ───────────────────────────────────────────────────── */
  --aive-pacing-slow: var(--success);
  --aive-pacing-good: var(--success);
  --aive-pacing-fast: var(--warning);
  --aive-pacing-jarring: var(--danger);

  /* ── Gradients ─────────────────────────────────────────────────────────── */
  --aive-gradient-brand: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
  --aive-gradient-nle-a: var(--surface-2);
  --aive-gradient-nle-b: var(--surface-2);
  --aive-gradient-nle-c: var(--surface-2);
  --aive-gradient-demo-a: var(--surface);
  --aive-gradient-demo-b: var(--surface);

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --aive-radius-xs: var(--radius-xs);  --aive-radius-sm: var(--radius-sm);
  --aive-radius-md: var(--radius-md);  --aive-radius-lg: var(--radius-lg);
  --aive-radius-xl: var(--radius-xl);  --aive-radius-hero: var(--radius-2xl);
  --aive-radius-full: var(--radius-pill);
  --aive-radius-micro: 4px;
  --aive-radius-feature: 24px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --aive-shadow-sm: var(--shadow-sm);  --aive-shadow-md: var(--shadow-md);
  --aive-shadow-lg: var(--shadow-lg);  --aive-shadow-xl: var(--shadow-xl);
  --aive-shadow-glow: var(--glow-accent);
  --aive-shadow-depth: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.15), 0 24px 60px rgba(0,0,0,0.25);
  --aive-shadow-frame: 0 4px 24px rgba(0,0,0,0.6);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --aive-duration-fast: var(--dur-fast); --aive-duration-normal: var(--dur-normal);
  --aive-duration-slow: var(--dur-slow); --aive-duration-slower: var(--dur-ambient);
  --aive-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --aive-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --aive-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aive-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Blur ──────────────────────────────────────────────────────────────── */
  --aive-blur-sm: 8px;
  --aive-blur-md: 20px;
  --aive-blur-lg: 40px;

  /* ── Z-index scale ─────────────────────────────────────────────────────── */
  --aive-z-base: 0;       --aive-z-dropdown: 100;
  --aive-z-sticky: 200;   --aive-z-overlay: 300;
  --aive-z-modal: 400;    --aive-z-popover: 500;
  --aive-z-toast: 600;    --aive-z-nav: 700;
  --aive-z-max: 9999;     --aive-z-tooltip: 9000;

  /* ── Spacing (original px to prevent reflow) ───────────────────────────── */
  --aive-space-quarter:1px; --aive-space-half:2px;
  --aive-space-1:4px;  --aive-space-2:8px;  --aive-space-3:12px; --aive-space-4:16px;
  --aive-space-5:20px; --aive-space-6:24px; --aive-space-7:28px; --aive-space-8:32px;
  --aive-space-9:36px; --aive-space-10:40px;--aive-space-11:44px;--aive-space-12:48px;
  --aive-space-13:56px;--aive-space-14:64px;--aive-space-15:80px;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --aive-container-max: 1280px;
  --aive-container-wide: 1440px;
  --aive-container-narrow: 720px;
  --aive-section-pad: var(--aive-space-13);
  --aive-feature-gap: 100px;
  --aive-hero-pad-top: 160px;
  --aive-nav-height: 56px;

  /* ── Type sizes (original px) ──────────────────────────────────────────── */
  --aive-text-display:clamp(56px,8vw,96px); --aive-text-h1:clamp(36px,5vw,64px);
  --aive-text-h2:clamp(32px,4.5vw,56px);    --aive-text-h3:clamp(24px,3vw,28px);
  --aive-text-h4:20px; --aive-text-body-lg:18px; --aive-text-body:16px;
  --aive-text-body-sm:14px; --aive-text-body-xs:11px;
  --aive-text-caption:12px; --aive-text-overline:11px;
  --aive-text-tagline:clamp(17px,2vw,21px); --aive-text-price:34px;
  --aive-text-heading-lg:28px; --aive-text-heading-md:22px; --aive-text-heading-sm:18px;
  --aive-text-title: 32px; --aive-text-heading: 20px; --aive-text-tag: 10px;
  --aive-type-display:64px; --aive-type-title:32px; --aive-type-heading:20px;
  --aive-type-body:14px; --aive-type-ui:13px; --aive-type-sm:12px;
  --aive-type-caption:11px; --aive-type-tag:10px; --aive-type-xs:11px;
  --aive-type-micro:10px; --aive-type-mini:9px; --aive-type-sub-micro:8px;
  --aive-type-stat-2xl:48px; --aive-type-stat-lg:36px; --aive-type-stat-md:28px;
  --aive-type-stat-info:13px;
}

/* font family applied directly (old styles.css set Geist on body) */
body { font-family: var(--font-sans); }

/* shadow/glass overrides for light theme */
[data-theme="light"] {
  --aive-shadow-depth: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06), 0 24px 60px rgba(0,0,0,0.08);
  --aive-shadow-frame: 0 4px 24px rgba(0,0,0,0.12);
  --aive-overlay-opacity: 0.3;
}