/* =========================================================================
   Come lo dici — design tokens.
   Ported from docs/plan/mockups/tokens.css (the approved visual contract).
   Changes from the mockup file:
   - fonts are self-hosted (fonts.css), no Google Fonts;
   - --ojo-edge darkened to #A07408 (3:1 on paper, as the mockup README suggests);
   - the [style*="--cat"] scope selector is gone: no inline styles (strict CSP).
   ========================================================================= */

:root {
  /* ---- Colour: spec §12, verbatim ------------------------------------- */
  --teal-deep: #0a3a51; /* background, top */
  --teal: #10556e; /* background, shading into */
  --paper: #f6ead4; /* card paper */
  --paper-edge: #e1cfb2; /* card edges, hairlines, borders only (never text bg for soft ink: 3.99:1) */
  --ink: #0e2836; /* primary text on paper — 12.82:1 on paper */
  --ink-soft: #4a6675; /* secondary text on paper — 5.11:1 on paper */

  /* Category accents (fills and graphics; never used as small text colour
     on paper — coral on paper is only 3.34:1). */
  --cat-smalltalk: #f0a05a; /* peach  — pair of speech bubbles */
  --cat-food: #e24b33; /* coral  — cup */
  --cat-shopping: #4fc0a8; /* mint   — basket */
  --cat-out: #6ea8d8; /* blue   — signpost */
  --cat-home: #ee8fa6; /* rose   — key */
  --cat-everyday: #f5c338; /* lemon  — awning */

  /* ---- Derived colours (documented in README, contrast-checked) -------- */
  --paper-light: #fbf3e3; /* option buttons, raised surfaces. ink 13.84, soft 5.52 */
  --on-teal: #f6ead4; /* text on teal: 10.15 on deep, 6.93 on light teal */
  --on-teal-soft: #c7d8dd; /* secondary text on teal: 8.23 / 5.61 (spec gives none; added) */

  --ok: #2e7d4f; /* correct: badge fill + border (graphic, 4.24 on paper) */
  --ok-ink: #1f6b43; /* correct: text colour (5.44 on paper, 5.12 on tint) */
  --ok-tint: #d6ebcb; /* correct option background (ink 12.07) */
  --no: #e24b33; /* wrong: = food coral, badge fill/border (graphic, 3.34 on paper) */
  --no-ink: #a52c1a; /* wrong: text colour (5.93 on paper, 5.49 on tint) */
  --no-tint: #f9ddd4; /* wrong option background (ink 11+, soft 4.73) */
  --ojo-tint: #f6e1b2; /* "Ojo" box = lemon 22% on paper (ink 11.87, soft 4.74) */
  --ojo-edge: #a07408; /* "Ojo" box border, dark lemon: 3:1 on paper */
  --option-edge: #9c8a6c; /* option button border: 3.04:1 on paper-light (WCAG 1.4.11) */

  /* Progress-board awning stripes (graphics only). */
  --plant-yes-a: #f5c338; /* yellow */
  --plant-yes-b: #6cbf7a; /* green  */
  --plant-no-a: #e24b33; /* coral  */
  --plant-no-b: #ee8fa6; /* pink   */

  /* The current category. Pages override --cat on .card / body. */
  --cat: var(--cat-food);
  /* Marker-pen highlight = category accent at ~35% over paper.
     Worst case (coral) gives ink 8.37:1, so all six pass. */
  --cat-hl: color-mix(in srgb, var(--cat) 36%, var(--paper));
  --cat-tint: color-mix(in srgb, var(--cat) 26%, var(--paper));

  /* Focus ring: switches by surface (see .on-teal / .paper in components). */
  --focus: #10556e; /* on paper: 6.93:1 */
  --focus-on-teal: #f5c338; /* on teal: 5.00–7.34:1 */

  /* ---- Type ------------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Scale: 17px base (phone in sunlight), ratio ≈ 1.25 (major third). */
  --fs-label: 0.75rem; /* 12px  section labels (mono, caps, tracked) */
  --fs-small: 0.875rem; /* 14px  notes, captions */
  --fs-body: 1.0625rem; /* 17px  body */
  --fs-lead: 1.25rem; /* 20px  options, verdict line */
  --fs-h3: 1.5rem; /* 24px  alternative phrases */
  --fs-answer: 2rem; /* 32px  the Italian answer */
  --fs-prompt: 2.25rem; /* 36px  Spanish prompt */
  --fs-score: 5.5rem; /* 88px  results score */

  --lh-tight: 1.06;
  --lh-body: 1.5;
  --track-label: 0.16em;

  /* ---- Space (4px base) ------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --gutter: 16px;
  --content-max: 1240px; /* desktop container; phones and tablets use 100% */

  /* ---- Radii: hierarchy, not one value everywhere ------------------------
     Paper sheets are barely rounded (cut paper), interactive things are
     softer, badges and round controls are circles. */
  --r-sheet: 6px;
  --r-tag: 3px;
  --r-control: 10px;
  --r-round: 999px;

  /* ---- Shadows: tinted with deep teal, never neutral grey ----------------
     A sheet of paper lying on water, not a floating SaaS card. */
  --shadow-sheet:
    0 1px 0 var(--paper-edge), 0 2px 0 rgba(6, 30, 42, 0.25),
    0 22px 36px -20px rgba(3, 22, 32, 0.75);
  --shadow-raise: 0 1px 0 var(--paper-edge), 0 6px 14px -8px rgba(10, 58, 81, 0.45);
  --shadow-press: 0 0 0 var(--paper-edge), 0 2px 4px -2px rgba(10, 58, 81, 0.4);

  /* Faint paper grain: SVG feTurbulence as a data URI (no image files). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 1.1 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */
  --dur-fast: 140ms;
  --dur-mid: 320ms;
  --dur-rise: 480ms;
  --loading-delay: 400ms; /* one value for every "only show if still waiting" indicator (spec §8) */

  /* ---- Safe areas ------------------------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Derived category tints must be re-declared wherever --cat changes:
   a custom property that references another is resolved where it is
   declared, so :root alone would freeze them at the default (food). */
:root,
[class*='cat-']:not(.cat-chip),
.cat-chip--neutral,
.awning--muted {
  --cat-hl: color-mix(in srgb, var(--cat) 36%, var(--paper));
  --cat-tint: color-mix(in srgb, var(--cat) 26%, var(--paper));
}

/* Cool accents go grey on sand at the default mix, so blue and mint get a
   stronger one (ink stays ≥ 8:1 on both). */
.cat-out,
.cat-shopping {
  --cat-hl: color-mix(in srgb, var(--cat) 50%, var(--paper));
  --cat-tint: color-mix(in srgb, var(--cat) 38%, var(--paper));
}

/* Category scopes: set on any element to recolour everything inside it. */
.cat-smalltalk {
  --cat: var(--cat-smalltalk);
}
.cat-food {
  --cat: var(--cat-food);
}
.cat-shopping {
  --cat: var(--cat-shopping);
}
.cat-out {
  --cat: var(--cat-out);
}
.cat-home {
  --cat: var(--cat-home);
}
.cat-everyday {
  --cat: var(--cat-everyday);
}