/* =========================================================================
   tokens.css — Design tokens (single source of truth)
   Axel Johnson 150-fonden. Map these to a CMS/design system if migrating.
   ========================================================================= */
:root {
  /* ---- Raw brand palette (Axel Johnson visual identity v3.1) ---- */
  --c-cream:       #FFF5E6;  /* primary background */
  --c-peach:       #FFE6C8;  /* secondary background */
  --c-sand:        #FAEBDC;  /* tertiary background */
  --c-aj-red:      #963737;  /* strong accent, section headers */
  --c-near-black:  #232323;  /* primary text */
  --c-salmon:      #FFC3A0;  /* warm accent (background only) */
  --c-taupe:       #82645F;  /* mid-tone neutral / muted text */
  --c-orange-red:  #E16441;  /* energetic accent (large/decorative only) */
  --c-purple:      #3C2D46;  /* dark accent */
  --c-white:       #FFFFFF;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg:            var(--c-cream);
  --bg-alt:        var(--c-sand);
  --bg-soft:       var(--c-peach);
  --surface-dark:  var(--c-near-black);
  --text:          var(--c-near-black);
  --text-muted:    var(--c-taupe);
  --text-on-dark:  var(--c-cream);
  --accent:        var(--c-aj-red);
  --accent-energetic: var(--c-orange-red);
  --line:          rgba(35, 35, 35, .14);
  --line-strong:   rgba(35, 35, 35, .28);
  --line-on-dark:  rgba(255, 245, 230, .20);
  --focus:         var(--c-orange-red);

  /* ---- Type families (with metric-matched fallbacks) ---- */
  --font-display: "Trade Gothic AJ", "Arial Narrow", Arial, system-ui, sans-serif;
  --font-serif:   "Domaine Display", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-body:    "Adobe Caslon Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-caption: "News Gothic", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;

  /* ---- Fluid type scale ---- */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.24vw, 1.16rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.40rem + 0.90vw, 2.30rem);
  --step-3:  clamp(2.10rem, 1.70rem + 1.90vw, 3.40rem);
  --step-4:  clamp(2.70rem, 1.90rem + 3.80vw, 5.20rem);

  /* ---- Line-heights (per brand spec) ---- */
  --lh-tight:   0.92;  /* Trade Gothic large headlines (~90%) */
  --lh-snug:    1.08;
  --lh-body:    1.30;  /* Caslon body (~125%) */
  --lh-caption: 1.40;  /* News Gothic */

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.5rem;  --space-2: 1rem;    --space-3: 1.5rem;  --space-4: 2rem;
  --space-5: 2.5rem;  --space-6: 3rem;    --space-8: 4rem;    --space-10: 5rem;
  --space-12: 6rem;

  /* ---- Layout ---- */
  --section-y:        clamp(3.5rem, 6vw, 7rem);
  --container:        min(1180px, 92vw);
  --container-narrow: min(760px, 92vw);
  --gutter:           clamp(1rem, 2.5vw, 2rem);
  --header-h:         72px;

  /* ---- Radii & misc ---- */
  --radius:      4px;
  --radius-lg:   16px;
  --radius-pill: 999px;
  --maxw-text:   64ch;
  --shadow-soft: 0 1px 2px rgba(35,35,35,.04), 0 8px 28px rgba(35,35,35,.08);
  --shadow-lift: 0 6px 16px rgba(35,35,35,.12), 0 24px 48px rgba(35,35,35,.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur:  .25s;
}