/* ==========================================================================
   Let's Do. – Design Tokens
   CSS Custom Properties: Colors, Typography, Spacing, Breakpoints
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --ld-red:           #E41C22;
  --ld-red-glow:      #FF2D38;
  --ld-red-dark:      #B31219;
  --ld-red-alpha-20:  rgba(228, 28, 34, 0.2);
  --ld-red-alpha-40:  rgba(228, 28, 34, 0.4);

  /* ── Backgrounds ── */
  --bg-deep:          #050508;
  --bg-section:       #0A0A0F;
  --bg-card:          #111118;
  --bg-card-hover:    #16161F;
  --bg-overlay:       rgba(5, 5, 8, 0.85);

  /* ── Text ── */
  --text-primary:     #F0F0F5;
  --text-muted:       #8888AA;
  --text-dim:         #7A7A99;  /* WCAG AA 4.9:1 on #050508 */

  /* ── Borders & Accents ── */
  --border-subtle:    rgba(136, 136, 170, 0.15);
  --border-glow:      rgba(228, 28, 34, 0.3);

  /* ── Typography ── */
  --font-display:     'Outfit', system-ui, sans-serif;
  --font-body:        'Outfit', system-ui, sans-serif;
  --font-serif:       'Cormorant Garamond', Georgia, serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale (Major Third – 1.25) */
  --text-xs:    clamp(0.700rem, 0.66rem + 0.2vw,   0.800rem);   /* 11–13px */
  --text-sm:    clamp(0.875rem, 0.83rem + 0.22vw,   1.000rem);   /* 14–16px */
  --text-base:  clamp(1.000rem, 0.95rem + 0.25vw,   1.125rem);   /* 16–18px */
  --text-lg:    clamp(1.125rem, 1.05rem + 0.38vw,   1.375rem);   /* 18–22px */
  --text-xl:    clamp(1.250rem, 1.10rem + 0.75vw,   1.750rem);   /* 20–28px */
  --text-2xl:   clamp(1.500rem, 1.20rem + 1.5vw,    2.250rem);   /* 24–36px */
  --text-3xl:   clamp(2.000rem, 1.50rem + 2.5vw,    3.250rem);   /* 32–52px */
  --text-hero:  clamp(2.500rem, 1.80rem + 3.5vw,    5.000rem);   /* 40–80px */

  /* Line Heights */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.6;
  --leading-relaxed:  1.8;

  /* Font Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;

  /* ── Spacing Scale ── */
  --space-2xs:  0.25rem;   /*  4px */
  --space-xs:   0.5rem;    /*  8px */
  --space-sm:   0.75rem;   /* 12px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */
  --space-5xl:  8rem;      /* 128px */

  /* Section Padding */
  --section-pad-y:  clamp(4rem, 8vw, 8rem);
  --section-pad-x:  clamp(1rem, 5vw, 4rem);

  /* ── Layout ── */
  --content-max:     1200px;
  --content-narrow:   800px;
  --content-wide:    1400px;

  /* ── Transitions ── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  /* ── Z-Index Scale ── */
  --z-base:       1;
  --z-overlay:    10;
  --z-canvas:     50;
  --z-nav:        100;
  --z-modal:      200;
  --z-toast:      300;

  /* ── Borders ── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-full:  9999px;
}