/**
 * AI Blog Autopilot — CSS Custom Properties (Theme Layer)
 * These values are dynamically overridden by an inline <style> block
 * generated from the admin theme settings stored in blog_settings.
 * Changing anything here is safe — admin panel will overwrite on next load.
 */

:root {
  /* Primary gradient */
  --grad-primary-from:  #6366f1;
  --grad-primary-to:    #8b5cf6;
  --grad-primary-dir:   135deg;
  --grad-primary:       linear-gradient(var(--grad-primary-dir), var(--grad-primary-from), var(--grad-primary-to));

  /* CTA / Accent gradient */
  --grad-cta-from:  #ec4899;
  --grad-cta-to:    #f97316;
  --grad-cta:       linear-gradient(135deg, var(--grad-cta-from), var(--grad-cta-to));

  /* Secondary gradient (AI reply, badges) */
  --grad-secondary: linear-gradient(135deg, #06b6d4, #3b82f6);

  /* Card styling */
  --card-bg:           #ffffff;
  --card-border:       rgba(99, 102, 241, 0.12);
  --card-shadow:       0 4px 24px rgba(99, 102, 241, 0.10);
  --card-hover-shadow: 0 8px 40px rgba(99, 102, 241, 0.20);
  --card-radius:       16px;

  /* Typography */
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-heading:   'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'Fira Code', 'Cascadia Code', monospace;
  --font-size-base: 16px;
  --line-height:    1.7;

  /* Surfaces */
  --bg-page:        #f8f9ff;
  --bg-surface:     #ffffff;
  --bg-muted:       #f1f5f9;
  --text-primary:   #1a1a2e;
  --text-secondary: #374151;
  --text-muted:     #64748b;
  --text-placeholder: #94a3b8;

  /* Brand colors extracted from gradient */
  --color-primary:  #6366f1;
  --color-accent:   #8b5cf6;
  --color-success:  #10b981;
  --color-warning:  #f59e0b;
  --color-error:    #ef4444;
  --color-info:     #3b82f6;

  /* Borders */
  --border-color:   rgba(99, 102, 241, 0.15);
  --border-radius:  var(--card-radius);
  --border-radius-sm: 8px;
  --border-radius-lg: 24px;
  --border-radius-pill: 9999px;

  /* Spacing 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-16: 64px;

  /* Layout */
  --content-max-width: 800px;
  --site-max-width:    1200px;
  --sidebar-width:     280px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.15);

  /* Z-index stack */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"],
  :root[data-theme="dark"] {
    --bg-page:        #0f0f1a;
    --bg-surface:     #1a1a2e;
    --bg-muted:       #16213e;
    --card-bg:        #1a1a2e;
    --card-border:    rgba(99, 102, 241, 0.20);
    --card-shadow:    0 4px 24px rgba(0, 0, 0, 0.40);
    --text-primary:   #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
    --border-color:   rgba(99, 102, 241, 0.25);
  }
}

:root[data-theme="dark"] {
  --bg-page:        #0f0f1a;
  --bg-surface:     #1a1a2e;
  --bg-muted:       #16213e;
  --card-bg:        #1a1a2e;
  --card-border:    rgba(99, 102, 241, 0.20);
  --card-shadow:    0 4px 24px rgba(0, 0, 0, 0.40);
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  --border-color:   rgba(99, 102, 241, 0.25);
}

:root[data-theme="light"] {
  --bg-page:      #f8f9ff;
  --bg-surface:   #ffffff;
  --text-primary: #1a1a2e;
}