/* TILL design tokens: the Pine system.
   Light is the default ground; dark is a first-class parity theme, never an afterthought.
   One restrained accent (a deep, desaturated pine green), spent only on attention, never decoration.
   One typeface (Inter, self-hosted, 700 max weight).
   House style: no em dash characters in any copy. See brand/DESIGN.md.

   Anti-slop guardrails baked in here: no near-black ground, no neon accent, no gray box around
   every card (separation comes from a background step and space, not a border on everything).

   Contrast law, MEASURED in the browser on computed styles, never asserted:
   `--t-border-strong` is the CONTROL boundary (input, secondary button) and carries the WCAG 1.4.11
   non-text minimum of 3:1 against the panel it sits on. `--t-border` is a DECORATIVE hairline (panel
   edge, table rule), deliberately softer: 1.4.11 does not apply to it, and pushing it to 3:1 would
   put the gray box back around every card that the line above forbids.

   Note on the elevation step: an earlier revision of this file claimed a page-to-panel step of
   roughly 1.6:1. That is not reachable in a dark theme on a near-black ground (it would need a
   mid-gray panel), and the measured step is about 1.1:1 in both themes. Elevation is NOT the
   separation mechanism here. The control boundary is. Do not re-add that target. */

:root,
[data-theme='light'] {
  /* Tell the browser which scheme its OWN widgets render in. Without this, every UA-painted
     control (checkbox, radio, select popup, scrollbar, date picker) keeps its light rendering
     regardless of the theme, and in dark an UNCHECKED checkbox paints as a solid white square
     that reads as checked. On the money path that misreports state, so this is a correctness
     property, not a polish one. It has to be declared per theme, not derived from the OS, because
     the operator can pick a theme that disagrees with the OS. */
  color-scheme: light;

  /* surfaces: a two-step scale on a warm-neutral paper ground */
  --t-bg: #f6f5f2;        /* page */
  --t-bg-soft: #ebeae3;   /* header strip inside a panel, hover fills */
  --t-bg-elev: #ffffff;   /* elevated panel, and the field ground */
  --t-bg-code: #eeede7;
  --t-border: #d6d3c6;        /* decorative hairline: panel edges, table rules */
  --t-border-strong: #898e7f; /* CONTROL boundary: input, secondary button. Measured 3:1 on page AND panel */

  /* text: one solid ink for copy, two dimmer steps for support */
  --t-text: #1e211d;
  --t-text-dim: #5c605a;
  --t-text-faint: #8a8d83;

  /* accent: a single deep pine green. The one go / focus / selected signal. */
  --t-accent: #2f6153;
  --t-accent-dim: #244c41;                  /* hover / pressed / stronger */
  --t-accent-soft: rgba(47, 97, 83, 0.10);   /* tinted fill: active nav, selection */
  --t-on-accent: #ffffff;                    /* text/icon on an accent-filled surface */

  /* status: separate from the accent (success is a lighter leaf green so it never reads as the
     accent), and never the only carrier of meaning */
  --t-success: #3b7d52;
  --t-warn: #8a6011;
  --t-danger: #a83b2b;
  --t-danger-soft: rgba(168, 59, 43, 0.10);

  /* a subtle lift for a raised CONTROL (a button), distinct from the flat panel treatment */
  --t-shadow-control: 0 1px 2px rgba(24, 26, 22, 0.14);
}

[data-theme='dark'] {
  color-scheme: dark;

  --t-bg: #121410;
  --t-bg-soft: #23261d;
  --t-bg-elev: #1a1d16;
  --t-bg-code: #0d0f0a;
  --t-border: #3f4738;        /* decorative hairline: panel edges, table rules */
  --t-border-strong: #666e5b; /* CONTROL boundary: input, secondary button. Measured 3:1 on the panel */

  --t-text: #e9ebe4;
  --t-text-dim: #a7ac9c;
  --t-text-faint: #757a69;

  --t-accent: #7cb79f;      /* brightened pine for energy on filled controls, still calm */
  --t-accent-dim: #9bd0b8;
  --t-accent-soft: rgba(124, 183, 159, 0.16);
  --t-on-accent: #121410;   /* the dark-mode accent is light, so text on it goes dark */

  --t-success: #74be9a;
  --t-warn: #dcac57;
  --t-danger: #e88a78;
  --t-danger-soft: rgba(232, 138, 120, 0.15);

  --t-shadow-control: 0 1px 2px rgba(0, 0, 0, 0.4);
}

:root {
  /* type */
  --t-font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 8-pt grid. 4px is for optical nudges only. */
  --t-space-0-5: 4px;
  --t-space-1: 8px;
  --t-space-2: 16px;
  --t-space-3: 24px;
  --t-space-4: 32px;
  --t-space-6: 48px;
  --t-space-8: 64px;

  --t-radius-sm: 6px;
  --t-radius-md: 10px;
  --t-radius-lg: 14px;
  --t-radius-full: 9999px;
}

/* Every money figure, account number, and date column. Money that shifts as it
   updates is money you do not trust. */
.t-num,
.t-money,
td[data-money] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* A checked box or radio is a SELECTED item, which is one of the three things the accent is for.
   The UA default is a system blue that belongs to no palette here. `accent-color` recolours the
   check without replacing the native control, so the keyboard and assistive-tech behaviour stays
   exactly what the platform ships. Pairs with `color-scheme` above: that decides the unchecked
   ground, this decides the checked fill. */
:where(input[type='checkbox'], input[type='radio'], progress, input[type='range']) {
  accent-color: var(--t-accent);
}

/* The focus ring uses the accent and is never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

/* Motion is a courtesy, not a personality. Honour the OS setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}