/* ─────────────────────────────────────────────────────────────────────────
   MudUp — Design Tokens
   Light + dark, paired. Single source of truth.
   ───────────────────────────────────────────────────────────────────────── */

/* Fonts: IBM Plex Sans (UI) + IBM Plex Mono (numbers, IDs, code).
   Currently loaded from Google Fonts. Self-host the .ttf/.woff2 files
   under /fonts and swap the @font-face block if CSP requires no third
   parties. The font files Google serves are byte-identical to the
   ones IBM ships from github.com/IBM/plex. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ──── Brand accent — default + 3 documented alternates ──────────────────
   Default is FORGE GREEN. To switch the system, replace the
   `--brand-*` block below with any of the alternates (commented).
   One swap, whole system flips. */

:root {
  /* ── Brand: FORGE GREEN (default) ──
     A muted pine / oxidised-copper green. Reads as "industrial paint
     on heavy equipment" — not the usual oilfield navy, not the standard
     status green. Differentiated from --status-pass-fg (#1F6B3A) by
     being darker, less saturated, and blue-leaning, so PASS pills and
     brand chrome never compete. WCAG AA on --bg-canvas in both modes. */
  --brand-300: #6FA590;
  --brand-400: #3C7A63;
  --brand-500: #21503F;   /* hover on solid buttons, in light          */
  --brand-600: #14322B;   /* PRIMARY — buttons, links, active nav     */
  --brand-700: #0E2620;   /* press                                     */
  --brand-800: #081A14;
  --brand-tint: #E8F0EC;  /* faint wash for selected rows etc.         */

  /* Alternate brand: OXBLOOD. Uncomment to swap.
  --brand-300: #C97B86;
  --brand-400: #B05666;
  --brand-500: #8E2A39;
  --brand-600: #7A1F2B;
  --brand-700: #631822;
  --brand-800: #4E1119;
  --brand-tint: #FBEEF0;
  */

  /* Alternate brand: COBALT DEEP. Uncomment to swap.
  --brand-300: #7E9AC9;
  --brand-400: #4E76AE;
  --brand-500: #244F8C;
  --brand-600: #13366E;
  --brand-700: #0E2854;
  --brand-800: #091B3A;
  --brand-tint: #E6EBF3;
  */

  /* Alternate brand: INK / GRAPHITE. The "no colour" look.
  --brand-300: #6E6E6E;
  --brand-400: #4A4A4A;
  --brand-500: #2A2A2A;
  --brand-600: #1A1A1A;
  --brand-700: #0F0F0F;
  --brand-800: #060606;
  --brand-tint: #EAEAEA;
  */
}

/* ──── Light theme (default) ───────────────────────────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Neutrals — warm graphite ramp */
  --neutral-0:  #FFFFFF;
  --neutral-50: #FAFAF9;
  --neutral-100:#F4F3F1;
  --neutral-200:#E8E6E3;
  --neutral-300:#D6D3CE;
  --neutral-400:#A8A39B;
  --neutral-500:#7A746C;
  --neutral-600:#55504A;
  --neutral-700:#3A3631;
  --neutral-800:#22201D;
  --neutral-900:#0F0E0D;
  --neutral-950:#0B0B0C;

  /* Semantic surface tokens */
  --bg-canvas:        var(--neutral-50);     /* page background           */
  --bg-surface:       var(--neutral-0);      /* card / form surface       */
  --bg-surface-sunk:  var(--neutral-100);    /* nested wells, table head  */
  --bg-row-hover:     var(--neutral-100);
  --bg-row-selected:  var(--brand-tint);
  --bg-row-zebra:     #FBFAF8;               /* every-other row, subtle   */

  /* Text */
  --text-1: var(--neutral-900);   /* primary copy, KPI values            */
  --text-2: var(--neutral-700);   /* secondary copy, body labels         */
  --text-3: var(--neutral-500);   /* muted: helper text, table sub-meta  */
  --text-4: var(--neutral-400);   /* placeholder, disabled               */
  --text-on-brand: #FFFFFF;

  /* Borders */
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--brand-600);
  --border-input:   var(--neutral-300);

  /* Status — green / amber / red */
  --status-pass-fg:   #1F6B3A;
  --status-pass-bg:   #E8F2EB;
  --status-pass-bd:   #BFDCC8;

  --status-warn-fg:   #8A5A00;
  --status-warn-bg:   #FBF1DA;
  --status-warn-bd:   #E8D5A1;

  --status-fail-fg:   #A41C1C;
  --status-fail-bg:   #F6E1E1;
  --status-fail-bd:   #E2B5B5;

  --status-info-fg:   #1A3E7A;   /* "flag" — neutral attention          */
  --status-info-bg:   #E2EAF5;
  --status-info-bd:   #B7C7E0;

  --status-running-fg:#7A3A12;
  --status-running-bg:#FAE6D5;
  --status-running-bd:#E5C29A;

  /* Numeric semantics: pos / neg / zero. Used in tables. */
  --num-positive: #1F6B3A;
  --num-negative: #A41C1C;
  --num-zero:     var(--text-3);

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(11,11,12,0.06);
  --shadow-2: 0 8px 24px rgba(11,11,12,0.12);
  --shadow-focus: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--brand-600);

  /* Code/log surface (always dark, both themes) */
  --log-bg: #0B0B0C;
  --log-fg: #E6E4E0;
}

/* ──── Dark theme ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  /* Canvas stays near-black; surfaces lift a meaningful ~10 luminance
     points so cards/tables actually read as raised containers, not
     "darker text on slightly less dark text". */
  --bg-canvas:        #0B0B0A;
  --bg-surface:       #1F1E1C;
  --bg-surface-sunk:  #282724;
  --bg-row-hover:     #2D2B27;
  --bg-row-selected:  rgba(60,122,99,0.22);
  --bg-row-zebra:     #1A1917;

  --text-1: #F4F3F1;
  --text-2: #C8C5BF;
  --text-3: #908A82;
  --text-4: #5C574F;
  --text-on-brand: #FFFFFF;

  --border-default: #3A3733;
  --border-strong:  #4F4B45;
  --border-focus:   var(--brand-400);
  --border-input:   #4F4B45;

  --status-pass-fg:   #6FD18B;
  --status-pass-bg:   #142A1B;
  --status-pass-bd:   #2A5236;

  --status-warn-fg:   #E0B25A;
  --status-warn-bg:   #2C2412;
  --status-warn-bd:   #564324;

  --status-fail-fg:   #E89090;
  --status-fail-bg:   #2E1717;
  --status-fail-bd:   #5C2A2A;

  --status-info-fg:   #8FB1E0;
  --status-info-bg:   #15203A;
  --status-info-bd:   #2A3E66;

  --status-running-fg:#E8B084;
  --status-running-bg:#2E1F12;
  --status-running-bd:#5E3F22;

  --num-positive: #6FD18B;
  --num-negative: #E89090;
  --num-zero:     var(--text-3);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.50);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.60);
  --shadow-focus: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--brand-400);
}

/* ──── Typography ─────────────────────────────────────────────────────── */
:root {
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Size scale — 12 / 14 / 16 / 18 / 24 / 32 (+ 48 for hero KPI) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   24px;
  --fs-xl:   32px;
  --fs-hero: 48px;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.50;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Tracking — only for ALL-CAPS micro labels */
  --tracking-caps: 0.04em;
}

/* ──── Spacing scale (4px grid) ───────────────────────────────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Density tokens — applied to rows and inputs */
  --row-height-table:   32px;  /* dense data row                  */
  --row-height-input:   36px;  /* form field                      */
  --row-height-touch:   44px;  /* iPad / hit target floor         */

  /* Radii — 0 / 2 / 4 / 6, never larger except pill capsule */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-pill: 999px;

  /* Motion */
  --duration-fast: 100ms;
  --duration-med:  150ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ──── Base + semantic typography ─────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Numerics — tabular by default on .num / .mono / inputs / KPI values */
.num, .mono, kbd, code, samp, pre,
input[type="number"],
input[inputmode="numeric"],
.kpi-value,
td.num,
th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Semantic type styles. Reference these in components — don't restate
   font-size / weight inline. */

.t-hero {
  font-family: var(--font-mono);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-1);
}

.t-h1, h1.t {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 0;
}

.t-h2, h2.t {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-1);
  margin: 0;
}

.t-h3, h3.t {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--text-1);
  margin: 0;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.t-body-strong {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-1);
}

.t-helper, .t-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-3);
}

/* The workhorse label style — used for form labels, table headers,
   card headers, KPI captions. */
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
}

.t-code, code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Negative-number rendering: minus sign in num-negative red.
   Use <span class="num neg">-12,345</span> or wrap the column. */
.num.neg, td.num.neg, .num .neg { color: var(--num-negative); }
.num.pos, td.num.pos, .num .pos { color: var(--num-positive); }
.num.zero,td.num.zero            { color: var(--num-zero); }

/* Focus ring — used on all interactive elements */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: inherit;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}