/* ==========================================================================
   Kofineur — base stylesheet
   Design tokens + reset + base typography. Components get their own files,
   added per slice. DESIGN.md is the system of record; keep these in sync.
   No utility framework: structure comes from semantic classes + tokens.
   ========================================================================== */

/* --- Design tokens (see DESIGN.md) ------------------------------------- */
:root {
  /* surfaces */
  --paper: oklch(0.966 0.014 88);        /* warm old-paper body bg (NOT cream) */
  --surface: oklch(0.948 0.018 92);      /* cards / panels */
  --cover: oklch(0.275 0.055 155);       /* deep wood-green hero/cover */

  /* ink (text on paper) */
  --ink: oklch(0.27 0.035 155);          /* body + headings (deep green) */
  --muted: oklch(0.45 0.03 150);         /* secondary text */
  --faint: oklch(0.60 0.022 150);        /* tertiary / metadata */
  --hair: oklch(0.85 0.018 110);         /* hairlines, empty scale dots */

  /* ink on cover (deep green) */
  --on: oklch(0.95 0.022 100);
  --on-muted: oklch(0.80 0.032 115);
  /* the cover's answer to --hair. A hairline on paper can be whisper-faint
     because paper is bright; on the wood green the same gesture disappears, so
     these are tuned to clear the 3:1 a component boundary needs (3.5:1 and
     4.0:1 measured against --cover) rather than to match --hair's lightness. */
  --on-hair: color-mix(in oklch, var(--on-muted) 65%, transparent);
  --on-hair-strong: color-mix(in oklch, var(--on-muted) 70%, transparent);

  /* accent — the one ripe-cherry red, used sparingly (<=10% of a screen) */
  --cherry: oklch(0.52 0.17 28);
  --on-cherry: oklch(0.64 0.19 30);      /* cherry brightened for use on cover */

  /* flavor-family categorical palette — ALWAYS paired with a text label */
  --fam-frutos-rojos: oklch(0.53 0.18 22);
  --fam-citricos: oklch(0.74 0.15 80);
  --fam-florales: oklch(0.55 0.12 320);
  --fam-dulces: oklch(0.56 0.15 40);
  --fam-chocolate: oklch(0.40 0.05 50);
  --fam-te: oklch(0.60 0.07 155);
  --fam-frutos-amarillos: oklch(0.76 0.14 92);
  --fam-frutos-secos: oklch(0.50 0.05 65);
  --fam-tropicales: oklch(0.70 0.15 145);
  --fam-fermentados: oklch(0.45 0.13 350);

  /* type — one serif only */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* spacing scale */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 72px;

  /* radius */
  --radius-card: 5px;
  --radius-pill: 999px;
  --radius-button: 3px;

  /* layout */
  --measure: 68ch;   /* max prose line length */
  --wrap: 1180px;    /* max content width */

  /* motion — state feedback only, never choreography. Exponential ease-out so
     a change settles rather than bounces (DESIGN.md: nothing elastic). */
  --dur: 170ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset (minimal) --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, picture { max-width: 100%; display: block; }

/* --- Base -------------------------------------------------------------- */
body {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { text-wrap: pretty; max-width: var(--measure); }

a { color: var(--cherry); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: color-mix(in oklch, var(--cherry) 22%, transparent); }

/* --- Foundational helpers (NOT a utility framework) -------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-lg); }
.sc   { font-variant: small-caps; letter-spacing: 0.12em; }

/* --- Accessibility ----------------------------------------------------- */
:focus-visible { outline: 2px solid var(--cherry); outline-offset: 2px; }
/* On the wood green the same cherry falls to 2.4:1, under the 3:1 a focus
   indicator has to clear. The brightened accent is the identical signal at
   4.0:1, so the ring stays cherry everywhere and stays legible everywhere. */
.cover :focus-visible { outline-color: var(--on-cherry); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}