/* ==========================================================================
   tokens.css — the single source of truth for color, type, spacing and shape.

   Site-local design (from 2026-10-27, v2). Started from
   ui-style-banded-fullbleed v1.3, copied from aiskilltrees.com: the band
   model, the type scale and the fonts are still that system's. Vidar then
   asked for a friendlier marketing layout — a hero, a video, one row per
   offer with a photo beside the text, rounded corners — so the square rule
   and the evergreen palette are gone. See AGENTS.md, "Design".

   Palette: chalkboard green with a terracotta accent, chosen to sit apart
   from both aiskilltrees.com and the navy/blue/gold of speaker agencies.

   NO other stylesheet and NO page may hardcode a hex value or a font stack.
   If a value is missing, add a token here.
   ========================================================================== */

@import url("fonts.css");   /* self-hosted — see css/fonts.css */

:root {
  /* ---- Grounds ---------------------------------------------------------- */
  --paper:         #FAF8F4;   /* default page ground — warm off-white */
  --paper-2:       #F1EDE6;   /* alternate band, warm sand */
  --surface:       #FFFFFF;   /* cards, header */

  /* ---- Ink -------------------------------------------------------------- */
  --ink:           #18211E;   /* primary text, and the footer ground */
  --ink-2:         #47504C;   /* secondary text — 7.1:1 on --primary-tint */
  --ink-3:         #626A66;   /* muted: captions, metadata — 5.3:1 on --paper */
  --ink-inverse:   #FAF8F4;   /* text on --ink and --primary bands */
  --rule:          rgba(24, 33, 30, 0.12);
  --rule-inverse:  rgba(250, 248, 244, 0.28);

  /* ---- Primary: chalkboard green ---------------------------------------- */
  --primary:        #1E4D43;  /* hero, contact band, buttons — 9.6:1 on white */
  --primary-strong: #153A32;  /* hover/active */
  --primary-tint:   #E6EFEB;  /* the "Om mig" band */
  --scrim-strong:   rgba(30, 77, 67, 0.92);   /* --primary over the hero photo */
  --scrim-mid:      rgba(30, 77, 67, 0.6);
  --scrim-weak:     rgba(30, 77, 67, 0.1);

  /* ---- Accent: terracotta ----------------------------------------------- */
  --accent:         #B4492A;  /* eyebrows and small marks — 5.0:1 on --paper */
  --accent-soft:    #F4B79A;  /* the accent on --primary — 5.5:1 */
  --accent-tint:    #F7E6DC;  /* chip fill */

  /* ---- Shape ------------------------------------------------------------ */
  --radius:      14px;        /* photos, video, cards */
  --radius-sm:   8px;         /* buttons */
  --radius-pill: 999px;       /* chips */
  --shadow:      0 18px 40px -18px rgba(24, 33, 30, 0.35);   /* the video frame only */

  /* ---- Type ------------------------------------------------------------- */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "Charis SIL", "Source Serif 4", Georgia, serif;

  --step-xs:  0.875rem;                                       /* 14px — captions, metadata */
  --step-s:   1rem;                                           /* 16px — UI, labels */
  --step-m:   clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);   /* 17→19px — body prose */
  --step-l:   clamp(1.375rem, 1vw + 1.1rem, 1.75rem);         /* 22→28px — h3 */
  --step-xl:  clamp(1.75rem, 2vw + 1.25rem, 2.5rem);          /* 28→40px — h2 */
  --step-2xl: clamp(2.25rem, 4.5vw + 1rem, 3.75rem);          /* 36→60px — h1 */
  --step-3xl: clamp(2.75rem, 7vw + 0.5rem, 5.5rem);           /* 44→88px — hero only */

  /* ---- Spacing and measures -------------------------------------------- */
  --gutter:        clamp(1.25rem, 5vw, 4rem);   /* 20px phone → 64px desktop, INSIDE bands */
  --space-band:    clamp(3rem, 8vw, 7rem);      /* vertical padding of a band */
  --space-band-lg: clamp(4.5rem, 12vw, 10rem);  /* hero and closing CTA only */
  --measure-prose: 68ch;
  --measure-wide:  1200px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
}