/* Elixir Thread design tokens (brief s16, R-75).
   Every visual decision lives here so the UI pass refines rather than rewrites.
   Contrast ratios (WCAG 2.2) were computed for each text pairing.
   Black is never used and charcoal is retired. */

@font-face {
  font-family: "EB Garamond Thread";
  src: url("../fonts/EBGaramond-Thread.e95b084b8fb4.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --brand-green: #11AF4B;        /* brand moments, large display, progress fills with a numeric label */
  --brand-grey: #8D8D8D;         /* logo grey and borders only (fails as text) */
  --deep-grey: #4A4A4A;          /* headings and body text, 8.48:1 on ground */

  /* Light theme roles */
  --ground: #FAFAF7;             /* page ground (proposed off-white) */
  --surface: #FFFFFF;
  --surface-sunk: #F2F2EE;
  --text: var(--deep-grey);
  --text-secondary: #6B6B6B;     /* 5.10:1 on ground */
  --border: #D9D9D4;
  --border-strong: var(--brand-grey);
  --action: #0B7A34;             /* primary buttons (white text 5.46:1), links 5.22:1 */
  --action-hover: #096A2D;
  --on-action: #FFFFFF;
  --focus: #0B7A34;

  /* Status: colour, icon and word together (brief s16) */
  --good: #0B7A34;
  --good-bg: #E6F4EA;
  --caution: #A15C00;            /* 4.96:1 on ground */
  --caution-bg: #FBF0E0;
  --problem: #B3261E;            /* 6.25:1 on ground */
  --problem-bg: #FBE9E7;
  --neutral: #6B6B6B;
  --neutral-bg: #EFEFEA;

  /* Type */
  --font: "EB Garamond Thread", "EB Garamond", Garamond, Georgia, serif;
  --numeric: lining-nums tabular-nums;
  --size-0: 0.875rem;
  --size-1: 1.0625rem;           /* body: Garamond needs a larger size to read well */
  --size-2: 1.25rem;
  --size-3: 1.6rem;
  --size-4: 2.1rem;
  --leading: 1.5;

  /* Space and shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --radius: 6px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(74, 74, 74, 0.08), 0 2px 8px rgba(74, 74, 74, 0.06);
  --max-width: 1180px;

  /* Motion: short and calm; every animation stops under prefers-reduced-motion. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 600ms;
  --skeleton-shine: rgba(255, 255, 255, 0.65);
}

/* Dark theme (10 October 2026): a deep charcoal ground with lighter cards, so
   panels stand out without borders doing all the work. On the card surface
   #2A2D2B: text #F2F2EE 12.3:1, muted #B8BAB5 7.0:1, green #5FD07F 7.1:1,
   amber 8.3:1, red 7.3:1; control borders #7C7F7A 3.3:1. Status chips keep
   their word on a tinted ground, each pair above 6:1. The display switch in
   the top bar sets data-theme; "Match device" leaves it to the system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #1E201F;
    --surface: #2A2D2B;
    --surface-sunk: #232624;
    --text: #F2F2EE;
    --text-secondary: #B8BAB5;
    --border: #3D403E;
    --border-strong: #7C7F7A;
    --action: #5FD07F;
    --action-hover: #7ADB94;
    --on-action: #1B3A24;
    --focus: #5FD07F;
    --good: #5FD07F;
    --good-bg: #1F3A28;
    --caution: #F2C063;
    --caution-bg: #3D3320;
    --problem: #FFA59E;
    --problem-bg: #44292A;
    --neutral: #B8BAB5;
    --neutral-bg: #2F3230;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
    --skeleton-shine: rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #1E201F;
  --surface: #2A2D2B;
  --surface-sunk: #232624;
  --text: #F2F2EE;
  --text-secondary: #B8BAB5;
  --border: #3D403E;
  --border-strong: #7C7F7A;
  --action: #5FD07F;
  --action-hover: #7ADB94;
  --on-action: #1B3A24;
  --focus: #5FD07F;
  --good: #5FD07F;
  --good-bg: #1F3A28;
  --caution: #F2C063;
  --caution-bg: #3D3320;
  --problem: #FFA59E;
  --problem-bg: #44292A;
  --neutral: #B8BAB5;
  --neutral-bg: #2F3230;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  --skeleton-shine: rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] { color-scheme: light; }