/* ================================================================
 * CAPPES AI — Creator + Hero Design System
 * Warm dark aesthetic · Orange (#ec8812) · The Sun (XIX)
 * ================================================================ */

:root {
  /* --- BACKGROUNDS (Warm dark, NOT blue-cold) --- */
  --color-bg-void:       #0C0A08;
  --color-bg-deep:       #14100C;
  --color-bg-surface:    #1E1814;
  --color-bg-raised:     #2A211A;
  --color-bg-glass:      rgba(30, 24, 20, 0.85);
  --color-bg-glass-lite: rgba(255, 255, 255, 0.04);

  /* --- PRIMARY (Brand Orange) --- */
  --color-primary-300: #F5A623;
  --color-primary-400: #ec8812;
  --color-primary-500: #D4770A;
  --color-primary-600: #B86508;

  /* --- ACCENT (Solar Gold — The Sun card) --- */
  --color-accent-300: #FDE68A;
  --color-accent-400: #FBBF24;
  --color-accent-500: #F59E0B;
  --color-accent-600: #78350F;
  --color-accent-glow: rgba(251, 191, 36, 0.25);

  /* --- TEXT (Warm cream on dark) --- */
  --color-text-primary:   #FAF5F0;
  --color-text-secondary: #B8A898;
  --color-text-muted:     #8B7A6A;
  --color-text-inverse:   #0C0A08;

  /* --- SEMANTIC --- */
  --color-success: #22C55E;
  --color-success-light: rgba(34, 197, 94, 0.12);
  --color-warning: #FBBF24;
  --color-warning-light: rgba(251, 191, 36, 0.12);
  --color-error: #EF4444;
  --color-error-light: rgba(239, 68, 68, 0.12);
  --color-info: #ec8812;
  --color-info-light: rgba(236, 136, 18, 0.12);

  /* --- BORDERS --- */
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-light:   rgba(255, 255, 255, 0.10);
  --color-border-medium:  rgba(236, 136, 18, 0.20);
  --color-border-accent:  rgba(236, 136, 18, 0.35);

  /* --- GRADIENTS --- */
  --gradient-hero: radial-gradient(ellipse at 20% 50%, rgba(236,136,18,0.12) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 20%, rgba(251,191,36,0.08) 0%, transparent 45%),
                   linear-gradient(180deg, #0C0A08 0%, #14100C 100%);
  --gradient-cta:  linear-gradient(135deg, #ec8812 0%, #F5A623 50%, #FBBF24 100%);
  --gradient-text: linear-gradient(135deg, #FBBF24 0%, #ec8812 50%, #fb923c 100%);
  --gradient-glow-card: linear-gradient(135deg, rgba(236,136,18,0.08) 0%, rgba(251,191,36,0.06) 100%);

  /* --- SHADOWS --- */
  --shadow-orange-sm:  0 0 20px rgba(236,136,18,0.20);
  --shadow-orange-md:  0 0 40px rgba(236,136,18,0.30), 0 0 80px rgba(236,136,18,0.10);
  --shadow-card:       0 4px 24px rgba(0,0,0,0.50), 0 1px 4px rgba(0,0,0,0.40);
  --shadow-card-hover: 0 8px 48px rgba(0,0,0,0.60), 0 0 30px rgba(236,136,18,0.15);

  /* --- TYPOGRAPHY --- */
  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-data:    'Space Grotesk', monospace;

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

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-normal: 1.6;

  --tracking-display: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-wide:     0.06em;
  --tracking-widest:   0.12em;

  /* --- RADIUS --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  /* --- SPACING --- */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  2.5rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --section-padding-x: clamp(1.25rem, 5vw, 2.5rem);

  /* --- MOTION --- */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
}