/* =====================================================================
   THE FIVE GALLON APP — THEME LAYER
   ---------------------------------------------------------------------
   This file is the ENTIRE visual identity of the app. Re-skinning the
   app when the final design lands = replacing the tokens (and the font
   import) in THIS FILE ONLY.

   The contract:
   - app.css contains structure and components and consumes these
     custom properties exclusively. It holds no raw colors, fonts,
     radii, or shadows.
   - JS charts read the --chart-* tokens at runtime via
     getComputedStyle, so charts re-theme automatically.
   - HTML uses semantic class names only (.btn, .card, .stat-tile),
     never visual ones, so markup survives any re-skin.

   Current placeholder theme: Undefeated
   (design/website-design/undefeated/DESIGN.md + tokens.json)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,600;0,700;0,900;1,700;1,900&family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  /* ------- color ------- */
  --canvas: #ffffff;          /* page background */
  --surface: #f4f4f2;         /* cards, tiles, panels */
  --ink: #1c1d1d;             /* headlines, borders, solid CTAs */
  --text: #222323;            /* body copy */
  --muted: #69727b;           /* labels, captions, secondary text */
  --accent: #4c5b3c;          /* THE accent; one per view */
  --accent-contrast: #ffffff; /* text sitting on accent */
  --line: #e6e6e2;            /* hairline rules, table borders */
  --inverse-bg: #1c1d1d;      /* dark panels */
  --inverse-text: #ffffff;

  /* semantic status (separate from the accent) */
  --ok: #4c5b3c;
  --warn: #a8842c;
  --critical: #b03a2e;

  /* ------- type ------- */
  --font-display: 'Inter', 'Helvetica Neue', sans-serif;
  --font-body: 'Noto Sans', 'Helvetica Neue', -apple-system, sans-serif;
  --display-weight: 900;
  --display-style: italic;
  --display-case: uppercase;
  --display-tracking: -0.02em;
  --label-weight: 600;
  --label-case: uppercase;
  --label-tracking: 0.14em;

  /* ------- shape ------- */
  --radius: 0px;              /* hard edges everywhere in this theme */
  --radius-pill: 0px;         /* badges/chips; a softer theme may want 999px */
  --shadow: none;             /* this theme forbids drop shadows */
  --border-w: 2px;
  --divider-w: 6px;
  --focus-ring: 2px solid #4c5b3c;

  /* ------- controls ------- */
  --btn-bg: var(--ink);
  --btn-text: #ffffff;
  --btn-weight: 600;
  --btn-case: uppercase;
  --btn-tracking: 0.14em;
  --input-bg: #ffffff;
  --input-border: #1c1d1d;

  /* ------- charts (charts.js reads these at runtime) ------- */
  --chart-1: #4c5b3c;
  --chart-2: #1c1d1d;
  --chart-3: #69727b;
  --chart-4: #a8842c;
  --chart-5: #b03a2e;
  --chart-grid: #ececea;
  --chart-track: #e9e9e5;     /* gauge/progress background arc */
  --chart-label: #69727b;
}