/* 990 Scout — Layer 1 tokens. Build output from the brand-kit design project
   (tokens/990scout.tokens.json, W3C DTCG, via Style Dictionary).
   Source of truth: claude.ai/design project "990Scout brand kit foundations".
   Do not hand-edit: change the token file there and re-import.

   NAMESPACED --990-* ON PURPOSE. The pre-existing token layer
   (templates/_tokens.html + api/design_tokens.py) uses bare names: --accent,
   --green, --paper, --ink. This file coexists with it rather than replacing it in
   one deploy -- expand-contract, so a surface migrates when it is rebuilt on the
   new kit instead of every page changing appearance at once. The old names stay
   authoritative for every surface that has not migrated. See gh#5253. */

:root {
  /* ---- color · ground + ink ---- */
  --990-color-paper: #FAF8F4;
  --990-color-surface: #FFFFFF;
  --990-color-surface-sunk: #FDFCFA;
  --990-color-ink: #221F1A;
  --990-color-ink-body: #3D382F;
  --990-color-ink-muted: #5C564C;
  --990-color-rule: #E4DED3;
  --990-color-rule-soft: #F2EEE6;
  --990-color-field-border: #D8D1C4;
  --990-color-ink-raised: #2C2925;
  --990-color-ink-border: #3A362F;
  --990-color-on-ink: #EDEAE3;
  --990-color-on-ink-muted: #9AA69F;

  /* ---- color · green = action ---- */
  --990-color-green-900: #2E5638;
  --990-color-green-800: #345E3E;
  --990-color-green-700: #3C6C48;
  --990-color-green-500: #4A7A55;
  --990-color-green-400: #6F9463;
  --990-color-green-300: #8FAE7E;
  --990-color-green-200: #C0CC84;
  --990-color-green-100: #E9F0EA;
  --990-color-green-on: #F4F1EA;

  /* ---- color · orange, gold, sage = from the mark ---- */
  --990-color-orange-700: #B44E22;
  --990-color-orange-500: #E46C3C;
  --990-color-orange-100: #FBEFE2;
  --990-color-gold-700: #8A6508;
  --990-color-gold-500: #F0C030;
  --990-color-gold-100: #FDF4DC;
  --990-color-sage-400: #C0CC84;

  /* ---- chart ramp · dark to light ---- */
  --990-chart-1: var(--990-color-green-700);
  --990-chart-2: var(--990-color-green-500);
  --990-chart-3: var(--990-color-sage-400);
  --990-chart-4: var(--990-color-gold-500);

  /* ---- color · flag = negative ---- */
  --990-color-flag-600: #8A2C2C;
  --990-color-flag-200: #E0C4C4;
  --990-color-flag-100: #FBF2F2;

  --990-color-disabled-bg: #F2EEE6;
  --990-color-disabled-ink: #A29B8E;

  /* ---- font ---- */
  --990-font-display: "Instrument Serif", Georgia, serif;
  --990-font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --990-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- type ---- */
  --990-type-display: 400 52px/1.05 var(--990-font-display);
  --990-type-h2: 400 27px/1.15 var(--990-font-display);
  --990-type-h3: 600 18px/1.25 var(--990-font-ui);
  --990-type-body: 400 15px/1.65 var(--990-font-ui);
  --990-type-body-sm: 400 13.5px/1.6 var(--990-font-ui);
  --990-type-table: 400 13px/1.35 var(--990-font-ui);
  --990-type-label: 500 10.5px/1 var(--990-font-mono);
  --990-type-figure: 600 23px/1 var(--990-font-ui);
  --990-type-numeric: 500 13px/1 var(--990-font-mono);
  --990-tracking-display: -0.02em;
  --990-tracking-label: 0.13em;

  /* ---- space ---- */
  --990-space-1: 4px;  --990-space-2: 8px;  --990-space-3: 12px;
  --990-space-4: 16px; --990-space-5: 20px; --990-space-6: 24px;
  --990-space-8: 32px; --990-space-10: 40px; --990-space-14: 56px;

  /* ---- radius ---- */
  --990-radius-sm: 3px;
  --990-radius-md: 5px;
  --990-radius-lg: 6px;
  --990-radius-xl: 8px;
  --990-radius-full: 9999px;

  /* ---- size ---- */
  --990-size-control-sm: 32px;
  --990-size-control-md: 36px;
  --990-size-control-lg: 44px;
  --990-size-control-hero: 48px;
  --990-size-row-table: 38px;
  --990-size-mark-sm: 18px;
  --990-size-mark-md: 20px;
  --990-size-mark-lg: 32px;
  --990-size-mark-xl: 42px;

  /* ---- shadow ---- */
  --990-shadow-card: 0 1px 3px rgba(34, 31, 26, 0.08);
  --990-shadow-overlay: 0 6px 20px rgba(34, 31, 26, 0.13);
}

/* Semantic aliases — what components reference.
   Swap these, not the primitives, to retheme. */
:root {
  --990-bg-page: var(--990-color-paper);
  --990-bg-card: var(--990-color-surface);
  --990-bg-row-hover: var(--990-color-surface-sunk);
  --990-text-default: var(--990-color-ink);
  --990-text-secondary: var(--990-color-ink-muted);
  --990-border-default: var(--990-color-rule);
  --990-border-divider: var(--990-color-rule-soft);

  --990-action-bg: var(--990-color-green-700);
  --990-action-bg-hover: var(--990-color-green-900);
  --990-action-fg: var(--990-color-green-on);
  --990-action-tint: var(--990-color-green-100);
  --990-focus-ring: var(--990-color-green-100);

  --990-delta-positive: var(--990-color-green-700);
  --990-delta-negative: var(--990-color-flag-600);
  --990-eyebrow: var(--990-color-orange-700);
}