/**
 * AI Store Theme - Design Tokens & Theme Mode Variables
 * Apple-Inspired Aesthetics with Frosted Glass & Dual Light/Dark Mode Engine
 */

:root,
[data-theme="dark"] {
  /* ── Surfaces ── */
  --ai-bg: #090A0F;
  --ai-surface: #11141C;
  --ai-surface-elevated: #181C26;
  --ai-surface-strong: #202634;
  --ai-surface-card: rgba(24, 28, 38, 0.75);

  /* ── Typography Colors ── */
  --ai-text: #F8FAFC;
  --ai-text-secondary: #94A3B8;
  --ai-text-muted: #64748B;
  --ai-heading: #FFFFFF;

  /* ── Accent ── */
  --ai-accent: #3B82F6;
  --ai-accent-hover: #2563EB;
  --ai-accent-soft: rgba(59, 130, 246, 0.15);
  --ai-accent-soft-hover: rgba(59, 130, 246, 0.25);
  --ai-accent-glow: rgba(59, 130, 246, 0.35);

  /* ── Glass & Borders ── */
  --ai-glass-bg: rgba(17, 20, 28, 0.65);
  --ai-glass-strong: rgba(24, 28, 38, 0.85);
  --ai-border-subtle: rgba(255, 255, 255, 0.08);
  --ai-border-medium: rgba(255, 255, 255, 0.14);
  --ai-border-strong: rgba(255, 255, 255, 0.22);

  /* ── Shadows ── */
  --ai-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --ai-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ai-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.60);
  --ai-shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* ── Badges ── */
  --ai-badge-ai-bg: rgba(59, 130, 246, 0.15);
  --ai-badge-ai-color: #60A5FA;
  --ai-badge-tool-bg: rgba(168, 85, 247, 0.15);
  --ai-badge-tool-color: #C084FC;
  --ai-badge-sale-bg: rgba(239, 68, 68, 0.15);
  --ai-badge-sale-color: #F87171;
}

[data-theme="light"] {
  /* ── Surfaces ── */
  --ai-bg: #F8FAFC;
  --ai-surface: #FFFFFF;
  --ai-surface-elevated: #F1F5F9;
  --ai-surface-strong: #E2E8F0;
  --ai-surface-card: rgba(255, 255, 255, 0.85);

  /* ── Typography Colors ── */
  --ai-text: #0F172A;
  --ai-text-secondary: #475569;
  --ai-text-muted: #64748B;
  --ai-heading: #020617;

  /* ── Accent ── */
  --ai-accent: #2563EB;
  --ai-accent-hover: #1D4ED8;
  --ai-accent-soft: rgba(37, 99, 235, 0.10);
  --ai-accent-soft-hover: rgba(37, 99, 235, 0.20);
  --ai-accent-glow: rgba(37, 99, 235, 0.25);

  /* ── Glass & Borders ── */
  --ai-glass-bg: rgba(255, 255, 255, 0.75);
  --ai-glass-strong: rgba(255, 255, 255, 0.92);
  --ai-border-subtle: rgba(15, 23, 42, 0.08);
  --ai-border-medium: rgba(15, 23, 42, 0.14);
  --ai-border-strong: rgba(15, 23, 42, 0.22);

  /* ── Shadows ── */
  --ai-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --ai-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --ai-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.15);
  --ai-shadow-glass: 0 8px 32px 0 rgba(15, 23, 42, 0.08);

  /* ── Badges ── */
  --ai-badge-ai-bg: rgba(37, 99, 235, 0.10);
  --ai-badge-ai-color: #1D4ED8;
  --ai-badge-tool-bg: rgba(147, 51, 234, 0.10);
  --ai-badge-tool-color: #7E22CE;
  --ai-badge-sale-bg: rgba(220, 38, 38, 0.10);
  --ai-badge-sale-color: #B91C1C;
}

/* ── Shared Tokens (mode-agnostic) ── */
:root {
  /* Fonts */
  --ai-font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ai-font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Scale */
  --ai-text-display: 4rem;
  --ai-text-h1: 2.75rem;
  --ai-text-h2: 2rem;
  --ai-text-h3: 1.375rem;
  --ai-text-h4: 1.125rem;
  --ai-text-body-lg: 1.125rem;
  --ai-text-body: 1rem;
  --ai-text-body-sm: 0.875rem;
  --ai-text-caption: 0.75rem;

  /* Font Weights */
  --ai-weight-regular: 400;
  --ai-weight-medium: 500;
  --ai-weight-semibold: 600;
  --ai-weight-bold: 700;

  /* Line Heights */
  --ai-leading-tight: 1.15;
  --ai-leading-snug: 1.3;
  --ai-leading-normal: 1.6;
  --ai-leading-relaxed: 1.75;

  /* Spacing Scale */
  --ai-space-4: 0.25rem;
  --ai-space-8: 0.5rem;
  --ai-space-12: 0.75rem;
  --ai-space-16: 1rem;
  --ai-space-20: 1.25rem;
  --ai-space-24: 1.5rem;
  --ai-space-32: 2rem;
  --ai-space-40: 2.5rem;
  --ai-space-48: 3rem;
  --ai-space-64: 4rem;
  --ai-space-80: 5rem;

  /* Border Radius */
  --ai-radius-sm: 8px;
  --ai-radius-md: 14px;
  --ai-radius-card: 20px;
  --ai-radius-pill: 9999px;

  /* Transitions */
  --ai-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ai-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ai-transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}