/* TANKWISE — Forest & Copper, locked palette + type system
 * Source of truth: imported from /_design/tankwise/project/styles/tokens.css
 * (Claude Design handoff, Apr 2026)
 *
 * This file is purely additive. The legacy `--green`, `--copper`, `--bg-*`
 * variables in each page's inline <style> continue to work; this file adds
 * the canonical `--tw-*` token names alongside them so new components can
 * adopt the design system without breaking existing pages.
 *
 * Update path: future visual changes update this file, then per-page styles
 * migrate from the legacy names to `--tw-*`. Eventually the legacy names
 * can be deleted.
 */

:root {
  /* Greens */
  --tw-forest:    #2d5a3d;
  --tw-mid:       #4a8c62;
  --tw-deep:      #1e4a2e;
  /* Coppers */
  --tw-copper:    #b87333;
  --tw-copper-d:  #955d28;
  --tw-copper-l:  #d4956a;
  /* Surfaces */
  --tw-warm:      #faf9f6;
  --tw-card:      #ffffff;
  --tw-tan:       #ddd8cd;
  --tw-tan-soft:  #ede8dd;
  --tw-tan-tint:  #f3eee3;
  /* Ink */
  --tw-ink:       #1a1a1a;
  --tw-ink-2:     #555555;
  --tw-ink-3:     #8a8a85;
  /* Status */
  --tw-info:      #3a6e8a;
  --tw-warn:      #c98a2b;
  --tw-warn-bg:   #fbf3df;
  --tw-danger:    #b94a3a;
  --tw-danger-bg: #f8e6e1;
  --tw-good:      #4a8c62;

  /* Type */
  --tw-display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --tw-body:    'Libre Franklin', -apple-system, system-ui, sans-serif;
  --tw-label:   'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --tw-num:     'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* Dark variant — opt-in via .tw-dark on a wrapper. Not wired to a UI toggle yet. */
.tw-dark {
  --tw-warm:      #14201a;
  --tw-card:      #1c2a23;
  --tw-tan:       #2a3a32;
  --tw-tan-soft:  #243329;
  --tw-tan-tint:  #1f2c25;
  --tw-ink:       #f1ece1;
  --tw-ink-2:     #b3ada0;
  --tw-ink-3:     #7a766c;
  --tw-forest:    #6cb285;
  --tw-mid:       #4a8c62;
  --tw-warn-bg:   #2a2418;
  --tw-danger-bg: #2a1d1a;
}

/* Type primitives — opt-in by class */
.tw-display { font-family: var(--tw-display); font-weight: 400; letter-spacing: 0.01em; line-height: 1; }
.tw-label   { font-family: var(--tw-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; color: var(--tw-ink-2); }
.tw-num     { font-family: var(--tw-num); font-variant-numeric: tabular-nums; }
.tw-mono    { font-family: var(--tw-label); }

/* Cards + surfaces */
.tw-card {
  background: var(--tw-card);
  border: 1px solid var(--tw-tan);
  border-radius: 14px;
}
.tw-card-soft { background: var(--tw-tan-tint); border: 1px solid var(--tw-tan); border-radius: 14px; }

/* Pills / chips */
.tw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--tw-tan-soft); color: var(--tw-ink);
  border: 1px solid var(--tw-tan);
  font-family: var(--tw-label); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tw-pill.copper { background: #f5e7d6; color: var(--tw-copper-d); border-color: #ecd6bd; }
.tw-pill.forest { background: #dfe9df; color: var(--tw-forest); border-color: #c8d6c8; }
.tw-pill.warn   { background: var(--tw-warn-bg); color: #7a5712; border-color: #ecd9a9; }
.tw-pill.danger { background: var(--tw-danger-bg); color: #7c2e22; border-color: #ecc7be; }

/* Buttons */
.tw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 18px; border-radius: 12px;
  font-family: var(--tw-body); font-size: 16px; font-weight: 600;
  border: 1px solid var(--tw-tan); background: var(--tw-card); color: var(--tw-ink);
  cursor: pointer; transition: transform .08s, background .12s;
}
.tw-btn:active { transform: scale(0.98); }
.tw-btn.primary { background: var(--tw-copper); color: white; border-color: var(--tw-copper-d); }
.tw-btn.forest  { background: var(--tw-forest); color: white; border-color: var(--tw-deep); }
.tw-btn.ghost   { background: transparent; }

/* Bars */
.tw-bar { position: relative; height: 8px; border-radius: 999px; background: var(--tw-tan-soft); overflow: hidden; }
.tw-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--tw-copper); }
.tw-bar.green > i { background: var(--tw-mid); }
.tw-bar.amber > i { background: var(--tw-warn); }
.tw-bar.red > i   { background: var(--tw-danger); }

/* Section header (small caps mono) */
.tw-section-h {
  font-family: var(--tw-label); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tw-ink-2);
}

/* Inputs */
.tw-input {
  height: 52px; border-radius: 12px;
  background: var(--tw-card); border: 1px solid var(--tw-tan);
  display: flex; align-items: center; padding: 0 14px;
  font-family: var(--tw-body); font-size: 16px; color: var(--tw-ink);
  width: 100%;
}
.tw-input.mono { font-family: var(--tw-num); font-variant-numeric: tabular-nums; }
.tw-input.large-num {
  height: 64px; font-family: var(--tw-num); font-size: 28px; font-weight: 600;
}

/* Hairline */
.tw-hr { height: 1px; background: var(--tw-tan); margin: 0; border: 0; }

/* Numbers in copper (calculator equivalents — design pattern) */
.tw-eq-num {
  font-family: var(--tw-num); font-weight: 700; color: var(--tw-copper);
  font-variant-numeric: tabular-nums;
}
.tw-eq-num small {
  font-family: var(--tw-num); font-weight: 500; color: var(--tw-copper-d);
  font-size: 0.6em; letter-spacing: 0;
}

/* Severity strips — info / warning / danger */
.tw-advisory {
  border-radius: 12px; padding: 12px 12px 12px 14px;
  display: flex; gap: 10px; border: 1px solid var(--tw-tan);
  background: var(--tw-card);
  position: relative; overflow: hidden;
  font-family: var(--tw-body); font-size: 14px; line-height: 1.45; color: var(--tw-ink);
}
.tw-advisory::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tw-info); }
.tw-advisory.warning { background: var(--tw-warn-bg); border-color: #ecd9a9; }
.tw-advisory.warning::before { background: var(--tw-warn); }
.tw-advisory.danger  { background: var(--tw-danger-bg); border-color: #ecc7be; }
.tw-advisory.danger::before { background: var(--tw-danger); }
.tw-advisory svg { flex-shrink: 0; }
.tw-advisory b { font-weight: 700; }
.tw-advisory.danger b { color: var(--tw-danger); }
.tw-advisory.warning b { color: #7a5712; }

/* Spec sheet (used in design's brief surface; available for any spec layout) */
.tw-spec { display:flex; flex-direction:column; gap:10px; }
.tw-spec .row { display:flex; justify-content:space-between; align-items:baseline; }
.tw-spec .row .v { font-family: var(--tw-num); font-variant-numeric: tabular-nums; }