/* ============================================
   CODEZILLA TEAMS - Organic & Warm Design Tokens
   ============================================ */

:root {
  /* ── Colors: Primary (Vibrant Orange) ── */
  --c-primary: #EE7432;
  --c-primary-light: #F49864;
  --c-primary-dark: #D15A1A;
  --c-primary-50: #FFF7ED;
  --c-primary-100: #FFEDD5;
  --c-primary-900: #7C2D12;

  /* ── Colors: Warm Accent (Amber / Gold) ── */
  --c-accent: #D97706;
  --c-accent-light: #F59E0B;
  --c-accent-dark: #B45309;
  --c-accent-50: #FFFBEB;
  --c-accent-100: #FEF3C7;

  /* ── Colors: Dark (Deep Slate Navy) ── */
  --c-dark: #0D1626;
  --c-dark-light: #1A273D;
  --c-dark-card: #141F33;
  --c-dark-border: #233451;

  /* ── Colors: Organic Neutrals (Warm Off-Whites & Creams) ── */
  --c-text: #1E293B;
  --c-text-secondary: #475569;
  --c-text-muted: #8E9BAE;
  --c-border: #E3E8EE;
  --c-bg: #FFFFFF;
  --c-bg-alt: #FAFAFA;
  --c-bg-section: #F6F8FA;
  --c-bg-warm: #FDFBF7;
  --c-bg-cream: #F7F5F0;

  /* ── Gradients ── */
  --grad-primary: linear-gradient(135deg, #EE7432 0%, #F59E0B 100%);
  --grad-warm: linear-gradient(160deg, #FDFBF7 0%, #FFF7ED 50%, #FFEDD5 100%);
  --grad-dark: linear-gradient(180deg, #0D1626 0%, #152238 100%);
  --grad-cta: linear-gradient(135deg, #7C2D12 0%, #0D1626 60%, #1A273D 100%);
  --grad-text: linear-gradient(135deg, #EE7432 0%, #F59E0B 100%);

  /* ── Typography ── */
  --ff-heading: 'Plus Jakarta Sans', sans-serif;
  --ff-body: 'Inter', sans-serif;
  --ff-editorial: 'Newsreader', 'Playfair Display', serif;

  --fs-display: clamp(2.65rem, 4.8vw, 4.25rem);
  --fs-h1: clamp(2.15rem, 3.8vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.65rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-h4: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: clamp(0.98rem, 1.15vw, 1.125rem);
  --fs-body-sm: clamp(0.88rem, 1vw, 0.95rem);
  --fs-caption: 0.8125rem;
  --fs-label: 0.75rem;

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

  --lh-heading: 1.16;
  --lh-body: 1.72;
  --ls-heading: -0.025em;
  --ls-label: 0.08em;

  /* ── Spacing (4px grid) ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Layout ── */
  --max-width: 1240px;
  --max-width-narrow: 840px;
  --nav-height: 76px;

  /* ── Borders & Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(13, 22, 38, 0.05);
  --shadow-md: 0 4px 14px rgba(13, 22, 38, 0.07);
  --shadow-lg: 0 14px 36px rgba(13, 22, 38, 0.09);
  --shadow-xl: 0 24px 56px rgba(13, 22, 38, 0.12);
  --shadow-glow: 0 0 40px rgba(238, 116, 50, 0.18);
  --shadow-card: 0 1px 3px rgba(13, 22, 38, 0.03), 0 8px 20px rgba(13, 22, 38, 0.05);
  --shadow-card-hover: 0 6px 12px rgba(13, 22, 38, 0.06), 0 16px 38px rgba(13, 22, 38, 0.11);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 600ms;

  /* ── Z-Index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-nav: 500;
  --z-overlay: 900;
  --z-modal: 1000;
}