/* AIvan design tokens — direction 4a
   Read off the shipped design files. Every value here appears in at least one
   mockup; nothing is aspirational. Drop into portal/static/ and import first. */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --ai-canvas:          #EFEEF2;  /* page background, outside panels */
  --ai-surface:         #FFFFFF;  /* panels, cards, sheets */
  --ai-surface-sunken:  #FAFAFB;  /* inset blocks, table stripes, notes */

  /* ---- Ink --------------------------------------------------------------- */
  --ai-ink:             #191826;  /* headings, primary sans text */
  --ai-ink-serif:       #221B2B;  /* Spectral body copy only */
  --ai-body:            #464458;  /* secondary sans text */
  --ai-muted:           #6A6880;  /* labels, meta, mono captions. AA floor. */

  /* ---- Lines ------------------------------------------------------------- */
  --ai-line-strong:     rgba(25, 24, 38, 0.18);  /* interactive outlines */
  --ai-line:            rgba(25, 24, 38, 0.14);  /* panel borders */
  --ai-line-soft:       rgba(25, 24, 38, 0.10);  /* header rules */
  --ai-line-hair:       rgba(25, 24, 38, 0.07);  /* list separators */

  /* ---- Accent (lavender) ------------------------------------------------- */
  --ai-accent:          #7C6CF0;  /* primary action fill, active state */
  --ai-accent-hover:    #6B5BE0;
  --ai-accent-ink:      #4B3BB8;  /* accent text on light. AA on white. */
  --ai-accent-wash:     #F7F5FF;  /* accent panel background */
  --ai-accent-line:     #C9C1F2;  /* accent panel border */
  --ai-accent-chip:     #DCD7F7;  /* secondary button fill, nav pill */

  /* ---- Semantic ---------------------------------------------------------- */
  --ai-good:            #2F7D74;  /* library value. 3.6:1 on white — figures only. */
  --ai-good-wash:       #F5FAF8;
  --ai-good-line:       rgba(47, 125, 116, 0.35);

  --ai-warn:            #A8761C;  /* dots, bars, non-text marks only */
  --ai-warn-ink:        #8A6420;  /* warn TEXT. #C88A2E fails AA on white. */
  --ai-warn-wash:       #FFFBF3;
  --ai-warn-line:       #EBD9B6;

  --ai-bad:             #B4532A;
  --ai-bad-strong:      #C2503A;

  /* ---- Type ------------------------------------------------------------- */
  --ai-font-sans:  'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ai-font-serif: 'Spectral', Georgia, serif;
  --ai-font-mono:  'IBM Plex Mono', ui-monospace, monospace;
  --ai-font-jp:    'Noto Sans JP', sans-serif;

  --ai-text-display: 42px;  /* page title, -0.04em, 700 */
  --ai-text-h1:      34px;  /* screen headline, -0.03em, 500 */
  --ai-text-h2:      22px;  /* section, -0.02em, 500 */
  --ai-text-h3:      17px;  /* panel title, -0.015em, 500 */
  --ai-text-lead:    16px;  /* serif lede */
  --ai-text-body:    14px;  /* sans body */
  --ai-text-sm:      13px;
  --ai-text-xs:      12px;  /* floor for interface text */
  --ai-text-label:   10px;  /* MONO UPPERCASE card label, 0.12em tracking */
  --ai-text-eyebrow: 11px;  /* MONO UPPERCASE page eyebrow, 0.14em tracking */

  /* Numeric figures always mono. A metric in sans reads as prose. */
  --ai-text-metric:  40px;

  /* ---- Radii ------------------------------------------------------------ */
  --ai-radius-chip:   9px;
  --ai-radius-inner: 12px;
  --ai-radius-card:  14px;
  --ai-radius-panel: 18px;
  --ai-radius-frame: 24px;
  --ai-radius-pill:  999px;

  /* ---- Spacing (the values actually used) -------------------------------- */
  --ai-space-1:   8px;
  --ai-space-2:  12px;
  --ai-space-3:  16px;
  --ai-space-4:  20px;
  --ai-space-5:  24px;
  --ai-space-6:  28px;
  --ai-space-7:  34px;
  --ai-space-8:  40px;

  /* ---- Layout ----------------------------------------------------------- */
  --ai-phone-width:   390px;
  --ai-touch-min:      44px;  /* every tappable thing on a phone */
  --ai-panel-pad-x:    24px;
  --ai-panel-pad-x-lg: 40px;
}

/* One shadow, used only on things that float above the page. */
.ai-raised { box-shadow: 0 24px 60px rgba(25, 24, 38, 0.14); }

a { color: var(--ai-accent-ink); text-decoration: none; }
a:hover { color: var(--ai-ink); }