/* ============================================
   TheColorCo. — Design Tokens
   ============================================ */

:root {
  /* Primary */
  --burgundy:         #6B1F2A;
  --burgundy-dark:    #4A1520;
  --burgundy-light:   #8B3040;

  /* Backgrounds */
  --cream:            #F5F0EB;
  --cream-dark:       #EDE7DF;
  --white:            #FFFFFF;

  /* Text */
  --text-primary:     #2C1810;
  --text-secondary:   #5C4033;
  --text-muted:       #8C7B6B;

  /* Accent */
  --rose:             #C4536A;
  --rose-light:       #E8A0B0;

  /* Utility */
  --border:           #DDD5CB;
  --overlay:          rgba(44, 24, 16, 0.6);

  /* Fonts */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-script: 'Dancing Script', cursive;

  /* Type scale */
  --text-hero:   clamp(40px, 7vw, 80px);
  --text-h1:     clamp(36px, 5vw, 64px);
  --text-h2:     clamp(28px, 4vw, 48px);
  --text-h3:     clamp(22px, 3vw, 32px);
  --text-h4:     clamp(18px, 2vw, 24px);
  --text-body:   16px;
  --text-small:  14px;
  --text-micro:  11px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-wide:    0.05em;
  --ls-wider:   0.12em;
  --ls-widest:  0.2em;

  /* Spacing — 8px grid */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  --section-pad: 96px 0;
  --container:   1200px;
  --gutter:      32px;
}

@media (max-width: 768px) {
  :root {
    --section-pad: 64px 0;
    --gutter: 20px;
  }
}