/* =====================================================================
   Veritee Design System — Colors & Type
   ---------------------------------------------------------------------
   Light cream canvas with 90s-Mac pixel accents: square corners, 2px navy
   borders, hard offset shadows, 1-bit icons, dotted "window" title bars.
   Jersey 25 for display, Instrument Sans for body, Geist Mono for data.

   The legacy --io-* / --fg-* / --bg-* names are kept and remapped onto the
   Veritee palette so existing inline styles keep working; new code should
   prefer the --v-* tokens.
   ===================================================================== */

/* ---------- Fonts ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Jersey+25&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Geist+Mono:wght@400;500&display=swap');

/* ---------- Tokens --------------------------------------------------- */
:root {
  /* ---- Veritee palette ---- */
  --v-canvas:      #F8F8F0;   /* page canvas, strips, cream tiles   */
  --v-surface:     #FFFFFF;   /* cards, tables, inputs              */
  --v-ink:         #003058;   /* text, borders, shadows             */
  --v-teal:        #10A0A8;   /* accent: labels, keys, highlights   */
  --v-teal-tint:   #60D0C8;   /* filled pills, swatches, underlines */
  --v-wash:        #E6F6F5;   /* row / button hover                 */
  --v-danger:      #C8383F;
  --v-danger-tint: #FBECEC;
  --v-warn-tint:   #FBE7C2;
  --v-ink-86:      rgba(0,48,88,0.86);
  --v-ink-78:      rgba(0,48,88,0.78);
  --v-ink-70:      rgba(0,48,88,0.70);
  --v-ink-40:      rgba(0,48,88,0.40);
  --v-hair:        rgba(0,48,88,0.25);   /* hairlines inside cards */
  --v-faint:       rgba(0,48,88,0.12);

  /* ---- Shape ---- */
  --v-border:      2px solid var(--v-ink);
  --v-shadow-card: 4px 4px 0 var(--v-ink);
  --v-shadow-card-hover: 5px 5px 0 var(--v-ink);
  --v-shadow-btn:  3px 3px 0 var(--v-ink);
  --v-shadow-btn-hover: 2px 2px 0 var(--v-ink);
  --v-dotted:      repeating-linear-gradient(90deg, var(--v-ink) 0 2px, transparent 2px 4px);
  --v-dither:      repeating-conic-gradient(var(--v-teal) 0 25%, transparent 0 50%) 0 0/8px 8px;

  /* ---- Legacy names, remapped onto Veritee ---- */
  --io-ink:            var(--v-canvas);
  --io-ink-2:          var(--v-canvas);
  --io-ink-3:          var(--v-surface);
  --io-line:           var(--v-hair);
  --io-line-2:         var(--v-ink);
  --io-white:          var(--v-ink);
  --io-white-80:       var(--v-ink-86);
  --io-white-64:       var(--v-ink-78);
  --io-white-48:       var(--v-ink-70);
  --io-white-20:       var(--v-ink-40);
  --io-white-10:       var(--v-faint);
  --io-white-06:       var(--v-wash);
  --io-teal:           var(--v-teal);
  --io-amber:          #B07A1A;

  --bg-primary:        var(--v-canvas);
  --bg-raised:         var(--v-canvas);
  --bg-card:           var(--v-surface);
  --bg-scrim:          rgba(0,48,88,0.45);

  --fg-primary:        var(--v-ink);
  --fg-secondary:      var(--v-ink-86);
  --fg-muted:          var(--v-ink-70);
  --fg-faint:          var(--v-ink-40);

  --border-hairline:   var(--v-hair);
  --border-strong:     var(--v-ink);

  --status-success:    var(--v-teal);
  --status-warning:    #B07A1A;
  --status-danger:     var(--v-danger);
  --status-info:       var(--v-teal);

  /* ---- Type families ---- */
  --font-sans:    'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Jersey 25', ui-monospace, monospace;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Motion: stepped, never eased ---- */
  --v-step:        120ms steps(2);
  --ease-standard: steps(2);
  --ease-emphasis: steps(4);
}

/* ---------- Base elements ------------------------------------------- */
html, body {
  background: var(--v-canvas);
  color: var(--v-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; color: var(--v-ink); }
p { margin: 0; }

code, pre, .mono { font-family: var(--font-mono); letter-spacing: 0; }

::selection { background: var(--v-teal-tint); color: var(--v-ink); }