/* ============================================================
   DESIGN TOKENS — Colorful Daybreak palette
   Deep violet → playful yellow/orange
   ============================================================ */
:root {
  /* ── Primary palette — deep violet ── */
  --color-primary-50:  #F5F3FF;
  --color-primary-100: #EDE9FE;
  --color-primary-200: #DDD6FE;
  --color-primary-300: #C4B5FD;
  --color-primary-400: #A78BFA;
  --color-primary-500: #8B5CF6;
  --color-primary-600: #7C3AED;
  --color-primary-700: #6D28D9;
  --color-primary-800: #5B21B6;
  --color-primary-900: #4C1D95;
  --color-primary-950: #2E1065;

  /* ── Accent palette — amber/orange ── */
  --color-accent-100: #FEF9C3;
  --color-accent-200: #FEF08A;
  --color-accent-300: #FDE047;
  --color-accent-400: #FACC15;
  --color-accent-500: #EAB308;
  --color-accent-600: #CA8A04;
  --color-orange-400: #FB923C;
  --color-orange-500: #F97316;
  --color-orange-600: #EA580C;

  /* ── Semantic tokens ── */
  --color-bg:             #FAFAFA;
  --color-bg-secondary:   #F5F3FF;
  --color-surface:        #FFFFFF;
  --color-border:         #E2E0F0;
  --color-border-accent:  #C4B5FD;
  --color-text:           #1E1B4B;
  --color-text-body:      #312E81;
  --color-text-muted:     #6B7280;
  --color-code-bg:        #F3F0FF;
  --color-code-border:    #DDD6FE;
  --color-link:           #7C3AED;
  --color-link-hover:     #F97316;
  --color-cta-primary:    #7C3AED;
  --color-cta-hover:      #6D28D9;

  /* ── Gradient definitions ── */
  --gradient-brand:       linear-gradient(135deg, #7C3AED 0%, #F97316 100%);
  --gradient-brand-soft:  linear-gradient(135deg, #EDE9FE 0%, #FEF9C3 100%);
  --gradient-text:        linear-gradient(90deg, #7C3AED 0%, #F97316 100%);
  --gradient-hero:        linear-gradient(135deg, #2E1065 0%, #4C1D95 40%, #7C3AED 70%, #F97316 100%);

  /* ── Typography ── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Courier New', 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-size-6xl:  3.75rem;

  --line-height-tight:   1.25;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

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

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --max-width:       1440px;
  --content-width:   1200px;
  --prose-width:     760px;
  --header-height:   72px;
  --page-padding:    clamp(1rem, 4vw, 3rem);

  /* ── Borders & radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows (violet-tinted) ── */
  --shadow-sm:  0 1px 3px rgba(109, 40, 217, 0.07);
  --shadow-md:  0 4px 12px rgba(109, 40, 217, 0.10);
  --shadow-lg:  0 8px 24px rgba(109, 40, 217, 0.14);
  --shadow-xl:  0 16px 48px rgba(109, 40, 217, 0.18);
  --shadow-card: 0 2px 8px rgba(78,40,180,0.08), 0 8px 32px rgba(109,40,217,0.06);

  /* ── Transitions ── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-spring:     cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Z-index ── */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
}