/* VerifySOS — design tokens
   Palette: P2 Verified (navy + cream + verified-green)
   Drop this in BEFORE any component CSS. */

:root {
  /* ---------- color ---------- */
  --vs-bg:          #F4EFE6;   /* cream / paper */
  --vs-surface:     #FFFFFF;   /* cards, inputs */
  --vs-ink:         #0E1B2C;   /* primary text, primary CTA */
  --vs-ink-2:       #2A3547;   /* secondary text on light */
  --vs-ink-muted:   #6F7888;   /* tertiary text, captions */
  --vs-line:        #D9D2C2;   /* hairline borders, dividers */
  --vs-line-strong: #B5AC95;
  --vs-verified:    #1F7A4D;   /* reserved: successful match / success state */
  --vs-verified-soft:#E4F0EA;
  --vs-danger:      #A12B1F;
  --vs-danger-soft: #FBEEEC;
  --vs-accent-soft: #EAEEF6;   /* hover wash for navy elements */

  /* dark surface (e.g. results banner) */
  --vs-ink-bg:      #0E1B2C;
  --vs-ink-bg-2:    #182841;
  --vs-on-ink:      #F4EFE6;   /* text on navy */
  --vs-on-ink-muted:#8A95A8;

  /* ---------- type ---------- */
  --vs-font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --vs-font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --vs-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  /* ---------- shape ---------- */
  --vs-radius-sm: 4px;
  --vs-radius:    6px;
  --vs-radius-lg: 10px;
  --vs-radius-pill: 999px;

  /* ---------- elevation ---------- */
  --vs-shadow-sm: 0 1px 2px rgba(14,27,44,0.06);
  --vs-shadow:    0 4px 14px rgba(14,27,44,0.08);

  /* ---------- spacing scale (4pt) ---------- */
  --vs-space-1:  4px;
  --vs-space-2:  8px;
  --vs-space-3: 12px;
  --vs-space-4: 16px;
  --vs-space-5: 24px;
  --vs-space-6: 32px;
  --vs-space-7: 48px;
  --vs-space-8: 64px;

  /* ---------- focus ring ---------- */
  --vs-focus: 0 0 0 2px var(--vs-bg), 0 0 0 4px var(--vs-ink);
}