/* Fresh Ledger design tokens (DESIGN_SPEC.md §Tokens). The single source of every color,
   type, space, and structure value. Components never hardcode outside these — that keeps a
   later dark-theme override a pure token swap. */
:root {
  /* color */
  --ink:        #0E0F0D;  /* text, borders, header/footer bg */
  --paper:      #FFFFFF;  /* page background */
  --accent:     #C9F24E;  /* THE action color: primary action, net pay, highlights (lime) */
  --on-accent:  #0E0F0D;  /* text on the accent — stays dark in every theme because the accent
                             itself never changes (themes.css swaps --ink to light) */
  --accent-2:   #177564;  /* teal: editorial second voice — prose links, never on controls.
                             Darkened from the display teal #2E9E8C (3.3:1, fails AA) to pass
                             AA for link-size text on paper AND on the mint tint (5.0:1+). */
  --gray-100:   #F0F7F2;  /* panel fills, zebra rows — pale mint, not flat grey */
  --gray-300:   #DFEAE2;  /* hairline dividers (mint-cool) */
  --gray-500:   #9A9A9A;  /* mid gray, legible on the ink header — the recessed ".tools" TLD in the logo */
  --gray-600:   #5C6660;  /* secondary text (AA on paper), cooled to match the neutrals */
  --error:      #B32D1E;  /* validation errors only */
  --ok:         #1D7A46;  /* success/verified only — never for money styling */
  --warn-bg:    #FFF3C4;  /* provisional-rates / notice banners */

  /* type */
  --font-ui:    "Gabarito", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Spline Sans Mono", Menlo, Consolas, monospace;

  /* scale (rem) — mobile-first, one step up at >=768px for h1/h2 */
  --text-xs: .75rem;  --text-sm: .875rem;  --text-base: 1rem;
  --text-lg: 1.25rem; --text-xl: 1.75rem;  --text-2xl: 2.5rem; /* net pay */

  /* space — 4px base */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem;  --sp-12: 3rem;

  /* structure — neo-brutalist bones (2px ink borders, hard shadow), sanded corners */
  --radius-card: 16px;   /* cards, panels, tables, modals */
  --radius-ctl:  12px;   /* inputs, selects */
  --radius-pill: 999px;  /* buttons, chips, segmented controls, badges */
  /* Hairline rule for interior separators (history rows, empty state, success banner) — the 2px
     --border reads too heavy for these. Referenced in pages.css; must be defined here. */
  --border-thin: 1px solid var(--ink);
  --border: 2px solid var(--ink);
  --border-thick: 3px solid var(--ink);
  --shadow-hard: 4px 4px 0 var(--ink);   /* buttons, raised cards; no blur ever */
  --measure: 65ch;                        /* prose max-width */
  --tap-min: 44px;                        /* min touch target */
}