/* ==========================================================================
   TALEA — Design Tokens
   Architecture before interface. Every value here is a decision, not a default.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------
     Almost monochrome. Bronze is reserved for emphasis only — construction
     lines, active states, single words that need to be heard once. */
  --charcoal:        #1B1A18;   /* primary dark ground */
  --charcoal-raised: #232220;   /* panels/cards sitting on charcoal */
  --ivory:           #F4F0E8;   /* primary light ground */
  --ivory-dim:       #E7E1D4;   /* recessed panels on ivory */
  --bronze:          #A17F52;   /* emphasis, active, construction lines */
  --bronze-deep:     #7C5F3B;   /* bronze on light ground, better contrast */
  --ink:             #1B1A18;   /* body text on ivory */
  --ink-soft:        #4A473F;   /* secondary text on ivory */
  --paper-soft:      #C9C2B2;   /* secondary text on charcoal */
  --paper-faint:     #8B8578;   /* tertiary / captions on charcoal */
  --line:            rgba(27, 26, 24, 0.12);   /* hairlines on ivory */
  --line-strong:     rgba(27, 26, 24, 0.22);
  --line-on-dark:    rgba(244, 240, 232, 0.14); /* hairlines on charcoal */
  --line-on-dark-strong: rgba(244, 240, 232, 0.28);

  /* ---- Type ---------------------------------------------------------------
     Fraunces: editorial serif with real optical warmth — used large, rarely.
     Inter: quiet modern sans — carries the working text and the system. */
  --font-serif: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --text-max: 680px; /* the brief's line-length ceiling, honoured everywhere */

  /* Fluid type scale */
  --fs-display:  clamp(2.75rem, 2rem + 3.4vw, 6.25rem);
  --fs-h1:       clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
  --fs-h2:       clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --fs-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lede:     clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-caption:  0.75rem;

  /* ---- Spacing --------------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;
  --space-8: 13rem;

  /* ---- Grid -------------------------------------------------------------- */
  --grid-columns: 12;
  --grid-gap: clamp(16px, 2vw, 28px);
  --margin: clamp(20px, 6vw, 96px);
  --container-max: 1600px;

  /* ---- Motion ------------------------------------------------------------
     Restrained on purpose: opacity, a 2px lift, nothing louder. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 320ms;
  --dur-med: 640ms;
  --dur-slow: 1100ms;
  --dur-entrance: 900ms; /* the Entrance Layer's dismissal — matches the
                             setTimeout in js/consent.js */

  /* ---- Elevation ----------------------------------------------------------
     No drop shadows as decoration — only hairline structure. */
  --lift: -2px;
}