/* ─────────────────────────────────────────────────────────
   chaloop · tokens
   The single source of truth. Every other stylesheet reads
   from here and never hard-codes a colour, radius or face.
   Edit by hand, or visually in design-system.html.
   ───────────────────────────────────────────────────────── */

:root {
  /* ── surfaces ───────────────────────────────────────── */
  --paper:      #f7f5ef;   /* page */
  --paper-2:    #fdfcf8;   /* raised: cards, fields */
  --rule:       #e2ded0;   /* hairlines, borders */

  /* ── text ───────────────────────────────────────────── */
  --ink:        #1b2a22;   /* headings, body */
  --ink-soft:   #5f6b5c;   /* secondary, captions */

  /* ── greens ─────────────────────────────────────────── */
  --forest:     #15251d;   /* dark bands */
  --pine:       #22503c;   /* primary action */
  --pine-dim:   #193c2c;   /* primary action, pressed */
  --sage:       #8fb16a;   /* accent, positive */
  --sage-soft:  #b9cfa0;   /* accent on dark */

  /* ── warms ──────────────────────────────────────────── */
  --orange:     #c05a1c;   /* attention, eyebrows */
  --orange-soft:#e6a06a;   /* attention on dark */
  --yellow:     #efd27a;   /* highlight, waiting */

  /* ── type ───────────────────────────────────────────── */
  --display: "Sentient", Georgia, serif;
  --sans:    "Figtree", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --text-base:   17px;   /* body size */
  --leading:     1.58;   /* body line-height */
  --display-lh:  0.98;   /* display line-height */
  --display-track: -0.028em;
  --mono-weight: 500;
  --mono-track:  0.06em;

  /* ── icons (Material Symbols Rounded, variable) ─────── */
  --icons: "Material Symbols Rounded";
  --icon-weight: 400;   /* wght axis, 100–700 */
  --icon-fill:   0;     /* FILL axis, 0 outline · 1 solid */
  --icon-size:   1.25em;

  /* ── shape ──────────────────────────────────────────── */
  --r-btn:    999px;   /* pill */
  --r-field:  999px;
  --r-card:   14px;
  --r-badge:  999px;

  /* ── plochy sekcí ───────────────────────────────────────
     Stránka je jeden plynulý žebřík z hlíny: papír nahoře,
     dole nejsytější hliněný tón. Sekce nemají vlastní plochu,
     rytmus nesou zig-zag a vlasové linky. Konec je forest. */
  /* základ je paper-2 (bělejší než paper), takže stupně mohou nést
     víc oranžové a přesto zůstat světlé; pine už jen jemně tlumí */
  --clay-1: color-mix(in oklab, color-mix(in oklab, var(--orange) 6%,  var(--paper-2)) 97%, var(--pine));
  --clay-2: color-mix(in oklab, color-mix(in oklab, var(--orange) 11%, var(--paper-2)) 96%, var(--pine));
  --clay-3: color-mix(in oklab, color-mix(in oklab, var(--orange) 16%, var(--paper-2)) 95%, var(--pine));

  /* ── depth & rhythm ─────────────────────────────────── */
  --lift:   0 14px 30px -20px color-mix(in oklab, var(--forest) 55%, transparent);
  --shell:  1320px;    /* max content width */
  --gutter: 24px;
  --section-y: clamp(56px, 7vw, 92px);
}

/* Tints derived from the tokens above — never separate colours.
   Used for text and rules sitting on --forest. */
:root {
  --on-dark-1: color-mix(in oklab, var(--paper) 92%, transparent);
  --on-dark-2: color-mix(in oklab, var(--paper) 66%, transparent);
  --on-dark-3: color-mix(in oklab, var(--paper) 48%, transparent);
  --on-dark-rule: color-mix(in oklab, var(--paper) 16%, transparent);
}