/* IntentChain — Design Tokens
   Single source for all colors, spacing, typography, radii, shadows, and transitions. */

:root {
  /* ── Colors (Dark — default) ────────────────────────── */
  --color-bg:              #0b0f1a;
  --color-surface:         #111827;
  --color-code-bg:         #0d1117;

  --color-text:            #e2e8f0;
  --color-text-secondary:  #94a3b8;
  --color-text-muted:      #64748b;

  --color-border:          #1e293b;
  --color-border-subtle:   #1a2332;

  --color-primary:         #e2e8f0;
  --color-primary-hover:   #f1f5f9;
  --color-primary-text:    #0b0f1a;

  --color-accent:          #6366f1;
  --color-accent-hover:    #818cf8;
  --color-accent-subtle:   rgba(99, 102, 241, 0.12);

  --color-success:         #22c55e;
  --color-success-subtle:  rgba(34, 197, 94, 0.12);

  --color-danger:          #ef4444;
  --color-danger-subtle:   rgba(239, 68, 68, 0.12);

  --color-warning:         #f59e0b;
  --color-warning-subtle:  rgba(245, 158, 11, 0.12);

  /* ── Typography ─────────────────────────────────────── */
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  --font-mono:  'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-normal: 1.6;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide:   0.05em;

  /* ── Spacing ────────────────────────────────────────── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   0.75rem;
  --space-lg:   1rem;
  --space-xl:   1.5rem;
  --space-2xl:  2rem;
  --space-3xl:  3rem;
  --space-4xl:  4rem;
  --space-5xl:  6rem;

  /* ── Radii ──────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 4px 24px rgba(99, 102, 241, 0.25);
  --shadow-accent-lg: 0 8px 40px rgba(99, 102, 241, 0.3);

  /* ── Gradients ──────────────────────────────────────── */
  --gradient-accent:  linear-gradient(135deg, #6366f1, #a78bfa);
  --gradient-accent-h: linear-gradient(135deg, #818cf8, #c4b5fd);
  --gradient-surface: linear-gradient(135deg, var(--color-surface), rgba(99, 102, 241, 0.04));
  --gradient-text:    linear-gradient(135deg, #e2e8f0, #a78bfa);
  --gradient-hero-glow: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(99, 102, 241, 0.12) 0%, transparent 70%);

  /* ── Focus ring ─────────────────────────────────────── */
  --ring-accent: 0 0 0 3px rgba(99, 102, 241, 0.4);

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

  /* ── Layout ─────────────────────────────────────────── */
  --max-width:        1200px;
  --max-width-narrow:  720px;
}

/* ── Light Theme ──────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:              #f8fafc;
  --color-surface:         #ffffff;
  --color-code-bg:         #f1f5f9;

  --color-text:            #0f172a;
  --color-text-secondary:  #475569;
  --color-text-muted:      #94a3b8;

  --color-border:          #e2e8f0;
  --color-border-subtle:   #f1f5f9;

  --color-primary:         #0f172a;
  --color-primary-hover:   #1e293b;
  --color-primary-text:    #ffffff;

  --color-accent:          #4f46e5;
  --color-accent-hover:    #6366f1;
  --color-accent-subtle:   rgba(79, 70, 229, 0.08);

  --color-success:         #16a34a;
  --color-success-subtle:  rgba(22, 163, 74, 0.08);

  --color-danger:          #dc2626;
  --color-danger-subtle:   rgba(220, 38, 38, 0.08);

  --color-warning:         #d97706;
  --color-warning-subtle:  rgba(217, 119, 6, 0.08);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.16);
  --shadow-accent: 0 4px 24px rgba(79, 70, 229, 0.15);
  --shadow-accent-lg: 0 8px 40px rgba(79, 70, 229, 0.2);

  --gradient-accent:  linear-gradient(135deg, #4f46e5, #8b5cf6);
  --gradient-accent-h: linear-gradient(135deg, #6366f1, #a78bfa);
  --gradient-surface: linear-gradient(135deg, var(--color-surface), rgba(79, 70, 229, 0.03));
  --gradient-text:    linear-gradient(135deg, #0f172a, #6d28d9);
  --gradient-hero-glow: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(79, 70, 229, 0.06) 0%, transparent 70%);

  --ring-accent: 0 0 0 3px rgba(79, 70, 229, 0.3);
}