/* === TOKENS — Design System Custom Properties === */

:root {
  /* --- Surfaces --- */
  --surface-dark:     #2C1810;
  --surface-kraft:    #C4A77D;
  --surface-kraft-l:  #E8DCC8;
  --surface-light:    #F5F0E8;
  --surface-white:    #FEFCF8;

  /* --- Text --- */
  --text-primary:     #1A1A1A;
  --text-secondary:   #4A4A4A;
  --text-on-dark:     #F5F0E8;
  --text-on-kraft:    #2C1810;

  /* --- Accents --- */
  --accent:           #6B4226;
  --accent-light:     #D4A574;
  --accent-hover:     #8B5A32;

  /* --- Focus & buttons --- */
  --focus-ring:        #6B4226;
  --focus-ring-offset: #FEFCF8;
  --btn-bg:            #6B4226;
  --btn-text:          #F5F0E8;
  --btn-hover:         #8B5A32;

  /* --- Shadows --- */
  --shadow-sm:    0 1px 2px rgba(44, 24, 16, 0.08);
  --shadow-md:    0 4px 12px rgba(44, 24, 16, 0.12);
  --shadow-lg:    0 8px 24px rgba(44, 24, 16, 0.16);
  --shadow-card:  0 2px 8px rgba(44, 24, 16, 0.1);

  /* --- Typography --- */
  --font-display: 'Caveat', cursive;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-display:  clamp(2.5rem, 5vw + 1rem, 5rem);
  --text-h1:       clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --text-h2:       clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
  --text-h3:       clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --text-body:     clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --text-body-lg:  clamp(1.125rem, 0.75vw + 0.9rem, 1.25rem);
  --text-small:    clamp(0.875rem, 0.25vw + 0.8rem, 0.9375rem);
  --text-caption:  0.75rem;

  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-body:    1.65;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:    0;
  --ls-caps:    0.08em;

  /* --- Spacing (4px scale) --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  --section-py:       clamp(4rem, 10vw, 8rem);
  --section-px:       clamp(1rem, 5vw, 2rem);
  --container-max:    1200px;
  --container-narrow: 720px;

  /* --- Animation --- */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  200ms;
  --duration-base:  400ms;
  --duration-slow:  800ms;
}