/*
 * Design tokens — THE one source (kit Directive 17). No inline hex anywhere else.
 *
 * Canon: saturated accents on SMALL areas over a near-neutral, gridded ground
 * (design-canon-colour.md). The warm ground matches the project's document
 * palette. --color-link is reserved for links ONLY — distinct from every
 * accent and status color, so color = meaning stays unambiguous.
 */

:root {
  /* Ground & ink (light) */
  --color-bg: #faf8f4;
  --color-surface: #f2eee6;
  --color-ink: #1c1a17;
  --color-muted: #6e675c;
  --color-rule: #d9d2c6;

  /* Brand (D61): Said and Done — navy carries authority, green carries
     completion. The pair comes from the brand sheet; everything else stays
     the near-neutral ground. */
  --brand-navy: #1e3a5f;
  --brand-green: #5fae91;
  /* D68 (Zach: "use the brand colors throughout — this is bland"): the
     header is a solid navy brand bar in BOTH themes, and the lifted green
     reads on it. These are literal — they must not flip with the theme. */
  --header-bg: #1e3a5f;
  --header-ink: #faf8f4;
  --brand-green-lift: #7fd6b4;
  /* D69 (Zach: "the green used more prominently"): green is the ACTION
     color — the "done" half of the brand doing the doing. Darkened until
     cream text clears AA on it. */
  --color-action: #2f7d63;
  --color-action-ink: #faf8f4;

  /* Brand accent — small areas only (buttons, active states, key highlights) */
  --color-accent: var(--brand-navy);
  --color-accent-ink: #faf8f4;

  /* Dedicated link color — links only, nowhere else. Brand green, darkened
     until it clears 4.5:1 on the SURFACE ground too (cards), not just the
     page — the axe gate caught 4.2:1 on #f2eee6 at #2e7d64. */
  --color-link: #29705a;

  /* Status */
  --color-ok: #29705a;
  --color-warn: #b45309;
  --color-danger: #b3261e;

  /* Section hues — one per major surface, used ONLY on small identity marks
     (nav icons, page-title icons, active-page chips). The ground stays
     near-neutral; these are the "saturated accents on small areas" the
     colour canon allows. Utility screens (Print, Deep Storage, Find,
     Settings, Help) deliberately share the muted ink — not every door
     needs a colored handle. */
  --sec-today: var(--brand-navy); /* the brand accent — the home screen owns it */
  --sec-inbox: #0f766e;    /* teal — capture */
  --sec-calendar: #0369a1; /* sky — week/month/year */
  --sec-goals: #4d7c0f;    /* olive — growth */
  --sec-values: #be123c;   /* rose — the heart, yours alone */
  --sec-meetings: #c2410c; /* ember — people in a room */
  --sec-review: #6d28d9;   /* violet — reflection */
  --sec-utility: #6e675c;  /* = muted ink */

  /* Type — generous default (kit Directive 18); modular scale, ratio 1.2
     (typography canon §3: "don't compose without a scale", ≤7 steps) */
  /* Brand type (D61): Avenir Next / Proxima Nova where installed (Apple
     devices ship Avenir Next); self-hosted Mulish is the licensed look-alike
     everywhere else. @font-face lives in app.css. */
  --font-sans: "Avenir Next", "Proxima Nova", Mulish, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --text-base: 1.125rem; /* 18px at browser default */
  --fs-caption: 0.833rem; /* 1 ÷ 1.2 */
  --fs-body: 1rem;
  --fs-lead: 1.2rem;
  --fs-h2: 1.44rem;
  --fs-h1: 1.728rem;
  --leading: 1.5; /* body 1.4–1.5 (typography canon §2) */
  --leading-tight: 1.15; /* headings 1.05–1.25 */
  --measure: 66ch; /* body measure target (typography canon §1) */

  /* Space & shape — 4px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 6px;
  --focus-ring: 2px solid var(--color-accent);
}

/* Text-size setting (S/M/L/XL), persisted per device — html[data-textsize] */
html[data-textsize="s"] { font-size: 88.9%; }   /* 16px base */
html[data-textsize="m"] { font-size: 100%; }    /* 18px base (default) */
html[data-textsize="l"] { font-size: 111.1%; }  /* 20px base */
html[data-textsize="xl"] { font-size: 122.2%; } /* 22px base */

/* Dark theme — html[data-theme="dark"] */
html[data-theme="dark"] {
  --color-bg: #1b1917;
  --color-surface: #262220;
  --color-ink: #ede9e3;
  --color-muted: #a49b8d;
  --color-rule: #3a342e;
  --brand-navy: #8fb8dd;
  --brand-green: #7fd6b4;
  --header-bg: #16273d; /* a step deeper than the light theme's bar */
  --header-ink: #ede9e3;
  --color-action: #7fd6b4;
  --color-action-ink: #16241e;
  --color-accent: var(--brand-navy);
  --color-accent-ink: #1b1917;
  --color-link: #7fd6b4;
  --color-ok: #7fd6b4;
  --color-warn: #fbbf24;
  --color-danger: #f87171;

  /* Section hues, lifted for the dark ground */
  --sec-today: var(--brand-navy);
  --sec-inbox: #2dd4bf;
  --sec-calendar: #38bdf8;
  --sec-goals: #a3e635;
  --sec-values: #fb7185;
  --sec-meetings: #fb923c;
  --sec-review: #a78bfa;
  --sec-utility: #a49b8d;
}