/* ============================================
   DESIGN TOKENS — lonnietapia.com
   Visual Direction: Minimal Editorial + Bold Expressive
   ============================================ */

:root {
  /* --- Light Palette (editorial sections) --- */
  --color-cream:        #f8f5f0;
  --color-warm-gray:    #e8e2d8;
  --color-mid-gray:     #888780;
  --color-text:         #1a1a1a;

  /* --- Dark Palette (showcase sections) --- */
  --color-black:        #111111;
  --color-dark:         #1a1a1a;
  --color-dark-surface: #1c1c1c;
  --color-light-text:   #f0f0ec;

  /* --- Accent Colors --- */
  --color-coral:        #0A78FF;
  --color-teal:         #0A78FF;
  --color-powder-blue:  #d0e8f5;

  /* --- Typography Scale --- */
  --font-display: 'Bau-Super', 'Impact', sans-serif;
  --font-body:    'Bau-Regular', 'Helvetica Neue', Arial, sans-serif;

  --text-hero:    clamp(3.5rem, 6.5vw, 9rem);
  --text-h1:      clamp(3rem, 8vw, 6rem);
  --text-h2:      clamp(2rem, 5vw, 3.5rem);
  --text-h3:      clamp(1.25rem, 3vw, 1.75rem);
  --text-body:    clamp(1rem, 1.2vw, 1.125rem);
  --text-small:   0.875rem;
  --text-caption:  0.75rem;

  /* --- Spacing Scale --- */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   6rem;
  --space-2xl:  10rem;

  /* --- Layout --- */
  --max-width:       1600px;
  --max-width-text:  720px;
  --gutter:          clamp(1.5rem, 4vw, 3rem);

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration:  0.4s;
}

@media (max-width: 768px) {
  :root {
    --space-2xl: 3rem;
  }
}