/* Merlark design tokens — "a small, cheerful creator's desk". Single source for landing, brand page and demo.
   Cream dominates. Mint, apricot and lilac each organise attention; labels and icons always carry the same meaning. */
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Surfaces and ink */
  --paper: #f7f4ed;      /* warm cream — the page */
  --panel: #fffdf8;      /* controls and the few panels that group things */
  --ink: #292d34;        /* charcoal text and outlines */
  --ink-muted: #5d6067;  /* secondary text, 5.6:1 on cream */
  --ink-line: #dedcd4;   /* quiet divider */
  --ink-soft: rgba(41, 45, 52, 0.1);
  --fog: #eeebe3;        /* neutral tint for "about usual" and inactive tracks */

  /* The three pastels */
  --mint: #cfefdf;
  --apricot: #ffd6b4;
  --lilac: #ded8f5;
  --mint-deep: #8fd2b3;  /* only for thin marks on mint (bars, dots), never text */

  /* Performance-trend states (§5.9) — colour plus an icon plus a label, never colour alone */
  --state-working: var(--mint);
  --state-slipping: var(--apricot);
  --state-emerging: var(--lilac);
  --state-neutral: var(--fog);
  --state-insufficient: var(--fog);
  --hatch: repeating-linear-gradient(135deg, rgba(41, 45, 52, 0.13) 0 2px, transparent 2px 8px);

  /* Type */
  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: clamp(42px, 6.2vw, 76px);

  /* 4px steps */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;

  /* Shape and depth */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
  --line: 1.5px solid var(--ink);
  --shadow: 0 3px 0 var(--ink);
  --shadow-pressed: 0 1px 0 var(--ink);

  /* Motion: short, settling, no bounce */
  --dur-press: 110ms;
  --dur-move: 280ms;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.34, 1.16, 0.64, 1);

  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
  --wrap: 1160px;
}