/* Veni color system.
   Rule 1: no pure white (#FFF). Screen background is milk #FAF8F4.
   Rule 2: on green, text is milk #FAF8F4 only — never black.
   Rule 3: green is 1–2 elements per screen. Black reads, green shows, milk holds. */

:root {
  /* Green — the single accent. Buttons, active states, numerals, icons. */
  --green: #2B4C3B;
  --green-pressed: #3C6751; /* hover / pressed */

  /* Milk — the surface family, lightest → darkest */
  --milk-screen: #FAF8F4; /* screen background + text on green */
  --milk-card: #F5F0EA;   /* cards */
  --milk-inset: #EEE7DD;  /* nested cards */
  --milk-border: #E2D8CB; /* dividers, borders */

  /* Ink — text */
  --black: #0D0F0B;  /* all primary text */
  --gray: #5E605A;   /* secondary text */

  /* ---- Semantic aliases ---- */
  --bg-screen: var(--milk-screen);
  --surface-card: var(--milk-card);
  --surface-inset: var(--milk-inset);
  --border-hairline: var(--milk-border);

  --text-primary: var(--black);
  --text-secondary: var(--gray);
  --text-on-green: var(--milk-screen);

  --accent: var(--green);
  --accent-pressed: var(--green-pressed);

  /* focus ring */
  --ring: color-mix(in srgb, var(--green) 40%, transparent);
}