/* The design's values, and the only place in the app stylesheets that names a colour or a size (tests/design-tokens.test.mjs checks).
   Direction "half a beat behind" (docs/DESIGN_REFRESH_PLAN_2026-10-31.md): shadowing means speaking just after the speaker, so the thing
   you are acting on right now carries a solid lime echo, slightly behind it. Everything else stays flat and quiet. */
:root {
  /* Brand: the logo's pine, and a highlighter lime. Text on lime is always pine or ink. */
  --pine: #173e34;
  --pine-soft: #215c4b;
  --lime: #d4f24a;
  --lime-soft: #eef7c4;

  /* Grounds */
  --paper: #eef2e8;
  --surface: #fbfcf8;
  --tint: #e1e7da;

  /* Text. --muted keeps 4.5:1 on paper, surface and tint. */
  --ink: #14241f;
  --muted: #4f6158;
  --on-pine: #fbfcf8;

  /* Lines. --line-strong is for input edges (3:1 on surface). */
  --line: #cfd8c8;
  --line-strong: #7e8f83;

  /* States */
  --danger: #a8322e;
  --danger-tint: #fbe9e6;
  --warn: #7a4a12;
  --warn-tint: #f8ead6;

  /* Type. UI in IBM Plex Sans KR (shared with Studio), the sentence being studied in Literata, a reading face made for long books.
     Scale: nothing under 12px. */
  --font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif;
  --font-sentence: Literata, "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Serif CJK KR", Georgia, serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 46px;

  /* Space: multiples of four */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* Corners: small things are tighter than large ones */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* The echo is the one decoration: a hard lime copy, half a beat behind. Pressing the element catches it up. */
  --echo: 4px 4px 0 var(--lime);
  --echo-sm: 3px 3px 0 var(--lime);
  --echo-lg: 10px 10px 0 var(--lime);
  --echo-off: 0 0 0 var(--lime);
  --shadow-overlay: 0 12px 32px color-mix(in srgb, var(--pine) 22%, transparent);
  --press: 90ms ease-out;

  /* Older names still used by feature code */
  --text: var(--ink);
  --accent: var(--pine-soft);
  --accent-deep: var(--pine);
  --sage: var(--tint);
  --peach: var(--warn-tint);
  --lilac: var(--tint);
  --radius: var(--radius-lg);
}