/* ==========================================================================
   tokens.css — the single source of truth for color, type and spacing.
   Design system: ui-style-banded-fullbleed v1.3
   (canonical: ../../AgentSkills/ui-style-banded-fullbleed/SKILL.md in the work vault)

   The same system as aiskilltrees.com, with ONE deliberate change: the
   primary is burnt orange instead of evergreen (Vidar, 2026-10-18). The skill
   says the hue is "the one variable worth revisiting", and that changing
   --primary* and the tint is the whole job. That is all that differs here,
   plus the --pasted pair, which this site needs and the other does not.

   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 — no request to Google */

:root {
  /* ---- Grounds ---------------------------------------------------------- */
  --paper:         #F6F4EF;   /* default page ground — warm off-white */
  --paper-2:       #EDEAE2;   /* alternate band, one step deeper */
  --surface:       #FFFFFF;   /* cards, the writing surface */

  /* ---- Ink -------------------------------------------------------------- */
  --ink:           #1A1D1B;   /* primary text, and the dark band ground — 15.5:1 on --paper */
  --ink-2:         #4A4F4B;   /* secondary text — 7.6:1 on --paper */
  --ink-3:         #646964;   /* muted: captions, metadata — 5.1:1 on --paper */
  --ink-inverse:   #F6F4EF;   /* text on --ink and --primary bands */
  --rule:          rgba(26, 29, 27, 0.14);
  --rule-inverse:  rgba(246, 244, 239, 0.22);
  --rule-strong:   rgba(26, 29, 27, 0.30);

  /* ---- Primary: burnt orange ---------------------------------------------
     Measured, not guessed: --primary is 5.46:1 against white and 4.97:1 on
     --paper, so it carries white button text AND works as link text on the
     page ground. A brighter orange (#E86A1A) was tried and rejected — 2.9:1
     on --paper, so it could never be a link. --primary-mark is that brighter
     orange, kept for fills only (the replay caret, a timeline tick): it is
     never text. */
  --primary:        #B4470C;  /* 5.46:1 on white, 4.97:1 on --paper */
  --primary-strong: #8F3A08;  /* hover/active — 7.56:1 on white */
  --primary-tint:   #FBE7D8;  /* pale band fill — --ink on it is 14.2:1 */
  --primary-mark:   #E86A1A;  /* fills and marks ONLY */

  /* ---- Pasted text ----------------------------------------------------------
     Innlimt tekst is marked in blue, as far from the orange as the palette
     goes, so "pasted" never reads as "the brand". It is ALWAYS paired with
     a dotted underline and a legend in words — never colour alone. */
  --pasted:        #2563A8;   /* rule and text — 6.12:1 on white, 5.57:1 on --paper */
  --pasted-tint:   #DCE8F5;   /* highlight behind pasted text — --ink on it is 13.7:1 */

  /* ---- Signal ------------------------------------------------------------ */
  --ok:            #1F6F4A;   /* a check that passed — 6.1:1 on white; always with a word */
  --ok-tint:       #E3EFE8;
  --danger:        #C2362F;
  --danger-text:   #A32B24;   /* 5.9:1 on --paper */
  --danger-tint:   rgba(194, 54, 47, 0.10);
  --warn-text:     #8A5A12;   /* 5.4:1 on --paper */
  --warn-tint:     #F7EBD9;

  /* ---- Elevation ----------------------------------------------------------
     As on aiskilltrees.com, shadows are for an app's floating parts only
     (here: the toast after a paste). Never on a band, a tile or the nav. */
  --shadow-float:  0 4px 14px rgba(26, 29, 27, 0.18);

  /* ---- Scrim ------------------------------------------------------------- */
  --scrim:         rgba(26, 29, 27, 0.62);

  /* ---- Type ------------------------------------------------------------- */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "Charis SIL", "Source Serif 4", Georgia, serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* /format/ only: JSON examples */
  /* The writing surface. Serif like all running prose on the site, and the
     same stack on the textarea and on its highlight mirror — the two must
     wrap identically or the marks drift off the words. */
  --font-write: var(--font-serif);

  --step-xs:  0.875rem;
  --step-s:   1rem;
  --step-m:   clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  --step-l:   clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --step-xl:  clamp(1.75rem, 2vw + 1.25rem, 2.5rem);
  --step-2xl: clamp(2.25rem, 4.5vw + 1rem, 3.75rem);
  --step-3xl: clamp(2.75rem, 7vw + 0.5rem, 5.5rem);

  /* ---- Spacing and measures -------------------------------------------- */
  --gutter:        clamp(1.25rem, 5vw, 4rem);
  --space-band:    clamp(3rem, 8vw, 7rem);
  --space-band-lg: clamp(4.5rem, 12vw, 10rem);
  --measure-prose: 68ch;
  --measure-wide:  1280px;

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