/* Kids Marketplace — Direction 01 · design tokens
   Status: proposal for Andrew's review. Not an approved contract.
   Naming: --km-<group>-<role>. Every component references these; no raw hex in components. */

:root {
  /* ── Colour: ground & ink ───────────────────────────── */
  --km-color-paper: #F7F2E8;        /* page ground, warm off-white */
  --km-color-paper-sunk: #EEE6D6;   /* recessed panels, hover on paper */
  --km-color-surface: #FFFCF6;      /* cards, inputs */
  --km-color-white: #FFFFFF;        /* printable sheet previews only */
  --km-color-ink: #1C2320;          /* primary text, 14.4:1 on paper */
  --km-color-ink-2: #3B4541;        /* secondary text, 8.9:1 on paper */
  --km-color-ink-3: #59625D;        /* meta text, 5.7:1 on paper */
  --km-color-line: #DCD2C0;         /* hairlines */
  --km-color-line-strong: #8E8370;  /* input/control borders, 3.3:1 on paper (non-text) */

  /* ── Colour: accents (restrained) ──────────────────── */
  --km-color-leaf: #2E6A4E;         /* primary action, white text 6.4:1 */
  --km-color-leaf-deep: #1F4B37;    /* hover / pressed, text on tint */
  --km-color-leaf-tint: #DCE8D8;    /* course cue, selected states */
  --km-color-leaf-wash: #EDF2E8;    /* calm learning panels */
  --km-color-coral: #E2674C;        /* illustration + custom-work cue (never body text) */
  --km-color-coral-deep: #A9432E;   /* coral as text/icon, 5.3:1 on paper, 4.6:1 on coral-tint */
  --km-color-coral-tint: #F8DDD3;
  --km-color-ochre: #DDA93F;        /* illustration only */
  --km-color-ochre-tint: #F4E5BF;   /* bundle cue */
  --km-color-sky: #9DC2D2;          /* illustration only */
  --km-color-sky-tint: #DFEBEF;     /* download cue */

  /* ── Colour: feedback ─────────────────────────────── */
  --km-color-error: #A3332A;
  --km-color-error-tint: #F6DCD7;
  --km-color-notice-tint: #F4E5BF;  /* test-payment notice, pending */
  --km-color-focus: #1C2320;        /* 3px outline + 2px offset */

  /* ── Type ─────────────────────────────────────────── */
  --km-font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --km-font-body: "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;

  --km-text-display: 84px;  --km-lh-display: 0.98;
  --km-text-h1: 52px;       --km-lh-h1: 1.04;
  --km-text-h2: 38px;       --km-lh-h2: 1.08;
  --km-text-h3: 25px;       --km-lh-h3: 1.18;
  --km-text-h4: 20px;       --km-lh-h4: 1.25;
  --km-text-lede: 20px;     --km-lh-lede: 1.5;
  --km-text-body: 17px;     --km-lh-body: 1.55;
  --km-text-small: 15px;    --km-lh-small: 1.45;
  --km-text-micro: 13px;    --km-lh-micro: 1.3;
  --km-track-tight: -0.022em;
  --km-track-kicker: 0.08em;

  /* ── Space (4-pt base) ────────────────────────────── */
  --km-space-1: 4px;
  --km-space-2: 8px;
  --km-space-3: 12px;
  --km-space-4: 16px;
  --km-space-5: 24px;
  --km-space-6: 32px;
  --km-space-7: 48px;
  --km-space-8: 64px;
  --km-space-9: 96px;
  --km-space-10: 128px;

  /* ── Layout ───────────────────────────────────────── */
  --km-container: 1280px;
  --km-gutter: 80px;        /* 1440: 80 · 768: 40 · 375: 20 */
  --km-grid-gap: 32px;
  --km-touch: 44px;         /* minimum hit target */
  --km-control-h: 48px;

  /* ── Shape & depth ────────────────────────────────── */
  --km-radius-1: 4px;       /* tags */
  --km-radius-2: 8px;       /* buttons, inputs */
  --km-radius-3: 14px;      /* cards */
  --km-radius-4: 24px;      /* illustration panels */
  --km-shadow-paper: 0 1px 0 rgba(28, 35, 32, 0.06), 0 14px 30px -20px rgba(28, 35, 32, 0.38);
  --km-shadow-sheet: 0 1px 2px rgba(28, 35, 32, 0.14), 0 10px 22px -12px rgba(28, 35, 32, 0.32);
  --km-shadow-overlay: 0 24px 60px -24px rgba(28, 35, 32, 0.45);

  /* ── Motion ───────────────────────────────────────── */
  --km-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --km-dur-1: 120ms;
  --km-dur-2: 220ms;
}

/* Learning area: calmer ground, coral withdrawn, softer contrast steps. */
.km-calm {
  --km-color-paper: #F3F4EE;
  --km-color-paper-sunk: #E7EAE1;
  --km-color-surface: #FCFDF9;
  --km-color-line: #D6DBCF;
  --km-color-coral: #C98B6E;
  --km-color-coral-tint: #F1E3DA;
}