/* AddressIQ UI v2 - design tokens. Dark theme only. Base navy #002437 is the owner's. BRAND V2 (owner decision 2026-10-08): the brand PRIMARY colour is the new logo red #E13636 (sampled from the owner's files, never altered to pass a test);
   the OLD logo yellow #FFE13E is kept only as the inlay of the tabs (thin lines, indicators, highlights).
   Every text/background pair below is checked by ui_demo/tools/contrast.js (WCAG 2.x) against ui_demo/tools/contrast_pairs.json; the table is in UI_V2_REPORT.md. */
:root {
  color-scheme: dark;
  /* surfaces (navy-derived) */
  --navy: #002437;            /* page and header base */
  --navy-1: #07334D;          /* panels, cards, bubble */
  --navy-2: #0D4262;          /* buttons, tabs (solid surfaces) */
  --navy-3: #165579;          /* hover / pressed / selected button */
  --line: #24607F;            /* borders */
  --line-strong: #4A8BAD;     /* focus-adjacent and strong separators */
  /* text */
  --text: #FFFFFF;
  --text-2: #BDD3E1;          /* secondary text (>= 4.5:1 on navy, navy-1, navy-2) */
  /* brand (v2): red = primary; yellow = tab inlay only. Red on the page is 3.66:1, on a card 3.01:1, white on red 4.39:1 - so red is NEVER small text and never the fill of normal-size white text */
  --brand: #E13636;           /* the new logo red: logo, mark, watermark, lines, icons, focus rings, active indicators */
  --yellow: #FFE13E;          /* tab inlay (indicator line, selected tab) and map highlights - not a brand fill any more */
  /* the red blended into the page colour #002437 (owner decision 2026-10-09: use the gradient widely). The red itself is never changed. Text sits only where the blend is 50 % red or less (white 9.9:1 and more); the 100 %-red end is only ever a line, a border or a fill WITHOUT small text. */
  --mix-20: #2D2837; --mix-35: #4F2A37; --mix-50: #712D37;
  --brand-line: linear-gradient(90deg, #E13636 0%, #712D37 40%, #002437 100%);   /* thin lines: button borders, header bottom line, card top lines, dividers, heading bars, the loading sweep */
  --grad-line: linear-gradient(90deg, #FFE13E 0%, #E13636 38%, #712D37 62%, #002437 100%);   /* the tab indicator: the old yellow inlay first, then the red blended into the navy */
  --btn-end: #4D3E55; --btn-hover-end: #5D4A62; --sel-end: #6A3F58;   /* the red ends of the three fills (checked by contrast.js) */
  --btn-fill: linear-gradient(135deg, #0D4262 0%, var(--btn-end) 100%);        /* navy-2 blended 30 % toward the red: white text 9.9:1 at the red end */
  --btn-fill-hover: linear-gradient(135deg, #165579 0%, var(--btn-hover-end) 100%);  /* navy-3 blended 35 % toward the red */
  --sel-fill: linear-gradient(135deg, #165579 0%, var(--sel-end) 100%);        /* selected tab / active menu: navy-3 blended 45 % toward the red */
  --paper: #FFFFFF;           /* behind a pairing code image only */
  /* semantic colours (distinct from the brand red and the tab yellow by hue AND never used alone: every status also carries an icon and a word) */
  --green: #4FD688;           /* confirmed */
  --blue: #6DB6FF;            /* external / provider suggestion, "clear by search" */
  --orange: #FF8F3F;          /* unconfirmed */
  --rose: #F58AB5;            /* not found, errors (pink: 24 degrees away from the brand red; was #FF8499, 10 degrees) */
  --violet: #C9A2FF;          /* conflict: two readings differ (never green, never yellow, never red) */
  --green-bg: #0B4A3A; --blue-bg: #0B3C66; --orange-bg: #5A3210; --rose-bg: #5E1F33; --violet-bg: #43256E;
  /* shape and motion */
  --r-s: 8px; --r-m: 14px; --r-l: 22px;
  --t-tab: 240ms;
  --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --header-h: 64px;
  /* control sizes: ONE place (v2 -> v3, about -18%): button 44 -> 36, search input 52 -> 42, style/gender buttons 52 -> 42, avatar 42 -> 34, tabs 44 -> 36, top gap 28 -> 14 */
  --ctl-h: 36px; --ctl-px: 16px; --go-min: 108px; --input-h: 42px; --pick-h: 42px; --avatar: 34px; --tab-h: 36px; --tab-px: 15px; --tab-min: 90px; --top-gap: 14px;
  /* the pinned (compact) query bar */
  --input-h-compact: 36px; --pick-h-compact: 34px; --avatar-compact: 26px; --bar-compact-h: 100px;
  /* the answer band (owner review 2026-10-07): the character box is FIXED (old 240 x 260), the message font smaller (old 17.3 px), the bubble sizes to its text up to a maximum */
  --stage-w: 200px; --stage-h: 216px; --msg-font: 15.5px; --bubble-max-h: 300px; --band-pad: 14px; --card-gap: 16px;
  --watermark-opacity: 0.15;          /* the large background mark / logo, owner decision 2026-10-08 (ui.watermark in templates/ui_config.json: "mark", "logo" or "off") */
  --maxw: 1120px;
  /* rhythm and type (design pass): a 4 px base, one family, a short scale, text lines under 80 characters */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --fs-s: .875rem; --fs-m: 1rem; --fs-l: 1.25rem; --measure: 68ch;
}