/* ============================================
   ENDORSE BEAUTY — Design Tokens
   ============================================ */

:root {
  /* Primary */
  --color-charcoal:       #2C2C2C;
  --color-warm-grey:      #6B6560;
  --color-light-grey:     #B8B4AF;

  /* Backgrounds */
  --color-ivory:          #FAF8F5;
  --color-cream:          #F2EDE8;
  --color-warm-white:     #FDFCFB;
  --color-deep-charcoal:  #1A1A1A;

  /* Accents */
  --color-muted-rose:     #C4A68F;
  --color-sage:           #8B9A87;
  --color-blush:          #D4B5A0;

  /* Functional */
  --color-border:         #E5E0DA;
  --color-overlay:        rgba(28, 28, 28, 0.55);

  /* Font families */
  --font-heading:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Jost', 'Helvetica Neue', sans-serif;

  /* Type scale (fluid) */
  --text-display:  clamp(2.75rem, 5vw, 5rem);
  --text-h1:       clamp(2.25rem, 4vw, 3.5rem);
  --text-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --text-h3:       clamp(1.25rem, 2vw, 1.5rem);
  --text-body:     clamp(1rem, 1.1vw, 1.125rem);
  --text-small:    0.875rem;
  --text-nav:      0.8125rem;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-normal:  1.7;
  --leading-relaxed: 1.85;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.15em;

  /* Spacing */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  8rem;

  /* Section padding */
  --section-pad: clamp(4rem, 8vw, 8rem);

  /* Container */
  --container-max: 1200px;
  --container-pad: clamp(1.5rem, 4vw, 3rem);

  /* Transitions */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --duration-sm: 0.3s;
  --duration-md: 0.5s;
  --duration-lg: 0.8s;
}