/* =========================================================
   tokens.css
   =========
   Design tokens for app.iadtx.com.

   Every colour, size, radius, and spacing value lives here. Templates
   never hard-code tokens. When the design system changes on iadtx.com,
   the values here are updated in one place and the whole app follows.

   Naming convention mirrors the Client-First v2 conventions used on
   the marketing site so a designer moving between surfaces sees the
   same variable names. Values are copies, not imports: app.iadtx.com
   has zero runtime dependency on the marketing site.
   ========================================================= */

:root {
  /* Colours. Semantic discipline, strictly enforced.
     RED   = additive / problem / failure
     GREEN = IADTX / multiplicative / confirmed / good
     AMBER = warning / indicative-data disclaimer / mixed caution
  */

  /* Brand pair */
  --color--primary:        #1B2A4A;   /* navy: structural chrome, headings, nav, pill text */
  --color--primary-900:    #111E3A;
  --color--secondary:      #20A65D;   /* green action: primary actions, multiplicative */
  --color--secondary-dark: #16723F;   /* green dark: hover state only */
  --color--secondary-tint: #E6F4EC;   /* tile green: green pill bg */
  --color--secondary-soft: #E6F4EC;   /* alias: verdict tile bg */
  --color--secondary-edge: #B8E0CB;   /* verdict tile border */

  /* Semantic */
  --color--error:          #FF3131;   /* red: additive / failure / problem only */
  --color--accent-amber:   #F3A444;   /* amber: warning / indicative / super-multi border */
  --color--accent-tint:    #FDF4E5;   /* tile gold: amber tile bg */
  --color--accent-edge:    #F9D29A;
  --color--danger:         #FF3131;   /* alias for existing selectors */

  /* Greyscale ladder (8 steps) */
  --color--black:          #000000;   /* body prose */
  --color--gray-700:       #3A3A3A;
  --color--gray-600:       #5A5A5A;   /* metadata, captions, secondary copy */
  --color--gray-500:       #8A8A8A;   /* tertiary text, axis labels */
  --color--gray-200:       #D8D8D8;   /* borders, dividers */
  --color--gray-100:       #ECECEC;   /* chart backgrounds, subtle fills */
  --color--gray-50:        #F2F2F2;   /* alternate section backgrounds */
  --color--white:          #FFFFFF;   /* canvas */

  /* Legacy neutral aliases (keep so existing selectors do not break) */
  --color--neutral-050:    #F2F2F2;
  --color--neutral-100:    #ECECEC;
  --color--neutral-150:    #ECECEC;
  --color--neutral-200:    #D8D8D8;
  --color--neutral-400:    #8A8A8A;
  --color--neutral-500:    #5A5A5A;
  --color--neutral-600:    #5A5A5A;
  --color--neutral-700:    #3A3A3A;
  --color--surface:        #F2F2F2;   /* page background (Gray 50) */

  /* Chart palette (data-viz only) */
  --color--chart-teal:     #59B4C7;
  --color--chart-clay:     #C2700D;
  --color--chart-gold:     #F9D3A5;
  --color--chart-plum:     #BD9BA4;
  --color--chart-sky-blue: #397B9B;
  --color--chart-metallic: #999D7D;

  /* Tile tints (derived from chart palette at 90% lightness) */
  --color--tile-gold:      #FDF4E5;
  --color--tile-teal:      #E8F4F7;
  --color--tile-plum:      #F3ECEE;
  --color--tile-sky:       #E5EDF2;
  --color--tile-green:     #E6F4EC;
  --color--tile-grey:      #F6F7F8;

  /* Typography
     Altone Regular (400) for body, Altone SemiBold (600) for headlines
     AND body emphasis. DM Mono for hashes / technical strings only.
     Cal Sans SemiBold is reserved exclusively for the wordmark logo
     and is never applied to body or headings.
  */
  --font--primary:  'Altone', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font--mono:     'DM Mono', Menlo, Monaco, Consolas, monospace;
  --font--wordmark: 'Cal Sans', 'Altone', system-ui, sans-serif;

  --fw--regular:  400;
  --fw--semibold: 600;

  --text-size--tiny:    11px;
  --text-size--small:   13px;   /* body small, nav links */
  --text-size--base:    15px;   /* default body */
  --text-size--medium:  18px;   /* lead paragraphs */
  --text-size--large:   24px;
  --text-size--xlarge:  32px;
  --text-size--2xlarge: 40px;
  --text-size--3xlarge: 56px;

  --line-height--body:     1.55;
  --line-height--heading:  1.2;
  --letter-spacing--tight: -0.01em;
  --letter-spacing--eyebrow: 0.13em;

  /* Spacing scale. Strict 4pt grid. Canonical values: 4 / 8 / 16 / 24 / 48 / 64 / 80 / 128 px.
     --spacing--small (12px) removed in Commit 16: off-grid. Callers updated to --spacing--medium.
     --spacing--xlarge updated 40 -> 48px; --spacing--4xlarge updated 112 -> 128px. */
  --spacing--xxsmall: 4px;
  --spacing--xsmall:  8px;
  --spacing--medium:  16px;
  --spacing--large:   24px;
  --spacing--xlarge:  48px;
  --spacing--2xlarge: 64px;
  --spacing--3xlarge: 80px;
  --spacing--4xlarge: 128px;

  /* Radii. rectangular buttons, soft cards, rounded pills */
  --radius--button:  8px;
  --radius--input:   8px;
  --radius--card:    10px;
  --radius--pill:    100px;

  /* Layout */
  --nav-height:             52px;
  --content-col--width:     720px;   /* app default column */
  --content-col--account:   880px;   /* account page (5-tier grid) */
  --content-col--padding-x: 24px;

  /* Motion */
  --motion--fast:   120ms;
  --motion--medium: 180ms;
  --motion--slow:   280ms;
  --ease--standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Reset (minimal) */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font--primary);
  font-weight: var(--fw--regular);
  font-size:  var(--text-size--base);
  line-height: var(--line-height--body);
  color: var(--color--primary);
  background: var(--color--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

strong, b { font-weight: var(--fw--semibold); }
em { font-style: normal; font-weight: var(--fw--semibold); }  /* no italic in Altone; emphasis is weight */

a {
  color: var(--color--secondary);
  text-decoration: none;
  transition: color var(--motion--fast) var(--ease--standard);
}
a:hover { color: var(--color--secondary-dark); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
}

code, pre, .is-mono { font-family: var(--font--mono); }

img { max-width: 100%; display: block; }

hr { border: none; border-top: 1px solid var(--color--neutral-150); }

/* Focus ring. accessible, on-brand */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--color--secondary);
  outline-offset: 2px;
  border-radius: var(--radius--button);
}