/* ==========================================================================
   Design tokens
   Warm premium palette. Burgundy is the only strong accent; gold is used
   sparingly for editorial markers and rules.
   ========================================================================== */

:root {
  /* --- Surface ---
     The page ground sits a shade darker than the panels, so the gaps between
     the rounded sections read as fine seams rather than empty space. */
  --ground:        #EDE7DC;  /* page background behind the panels */
  --bg:            #F8F5EF;  /* panel surface */
  --bg-alt:        #F3EFE6;  /* alternating band */
  --card:          #FFFFFF;  /* warm white card */
  --card-raised:   #FFFFFF;

  /* --- Dark section: a deep burgundy ground, not a near-black --- */
  --dark:          #5C1D21;
  --dark-soft:     #6D2529;
  --dark-text:     #FBF5EE;
  --dark-text-mute:#E3C9C4;

  /* --- Ink --- */
  --ink:           #22201E;  /* primary text */
  --ink-soft:      #66625D;  /* body / secondary */
  --ink-faint:     #8B8379;  /* helper, captions */

  /* --- Lines --- */
  --line:          #EADFCF;  /* hairline */
  --line-strong:   #DCCDB6;
  --line-dark:     rgba(243, 237, 228, 0.16);

  /* --- Accents --- */
  --accent:        #641F21;  /* burgundy */
  --accent-hover:  #521A1C;
  --accent-press:  #441517;
  --accent-tint:   #F4EAE7;  /* selected option fill */
  --accent-tint-2: #EADCD8;
  --gold:          #B69A68;  /* secondary accent, editorial markers */
  --gold-soft:     #D8C7A5;

  /* --- Feedback --- */
  --warn:          #8A5A22;
  --warn-tint:     #F7EFE2;

  /* --- Type --- */
  --font-display: 'Heebo', 'Assistant', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Assistant', 'Heebo', 'Segoe UI', Arial, sans-serif;

  --fs-eyebrow:  0.75rem;
  --fs-micro:    0.8125rem;
  --fs-small:    0.9375rem;
  --fs-body:     1.0625rem;
  --fs-lead:     clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-h3:       clamp(1.15rem, 1.7vw, 1.3rem);
  --fs-h2:       clamp(1.75rem, 3.3vw, 2.75rem);
  --fs-display:  clamp(2.2rem, 5vw, 4rem);
  --fs-question: clamp(1.4rem, 3vw, 2rem);

  --lh-tight:  1.18;
  --lh-snug:   1.35;
  --lh-body:   1.8;
  --lh-loose:  1.9;

  --ls-eyebrow: 0.16em;
  --ls-tight:  -0.02em;

  /* --- Space --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --section-y: clamp(64px, 9vw, 128px);

  /* --- Radius --- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;
  --r-btn: 10px;
  --r-card: 16px;    /* content cards and images */
  --r-sheet: 24px;   /* questionnaire card */
  --r-panel: 20px;   /* rounded section panels */
  --panel-gap: 8px;
  --panel-inset: 10px;

  /* --- Elevation (kept deliberately subtle) --- */
  --shadow-sm: 0 1px 2px rgba(34, 32, 30, 0.04);
  --shadow:    0 2px 10px rgba(34, 32, 30, 0.05);
  --shadow-lg: 0 12px 40px rgba(34, 32, 30, 0.07);

  /* --- Layout --- */
  --w-page:   1200px;
  --w-audit:  940px;   /* questionnaire shell: within the 850-1000px brief */
  --w-prose:  62ch;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}