/* =====================================================================
   Azimuth — landing system tokens
   Monochrome brand (ink in light, near-white in dark). Market green/red
   kept for data only. Mirrors the production app's design tokens.
   Scope: apply [data-az="light"] / [data-az="dark"] on any wrapper.
   ===================================================================== */

[data-az="light"]{
  --canvas:      oklch(0.984 0 0);
  --surface:     #ffffff;
  --surface-2:   oklch(0.975 0 0);
  --ink:         oklch(0.23 0 0);
  --ink-2:       oklch(0.50 0 0);
  --ink-3:       oklch(0.64 0 0);
  --ink-4:       oklch(0.78 0 0);
  --line:        oklch(0.915 0 0);
  --line-2:      oklch(0.945 0 0);
  --brand:       oklch(0.23 0 0);   /* mono ink */
  --brand-soft:  oklch(0.95 0 0);
  --on-brand:    var(--canvas);          /* text on a solid brand fill */
  --up:          oklch(0.56 0.13 152);
  --up-soft:     oklch(0.95 0.05 152);
  --down:        oklch(0.56 0.17 25);
  --down-soft:   oklch(0.95 0.045 28);
  --shadow-sm:   0 1px 2px rgba(20,20,20,0.05), 0 1px 1px rgba(20,20,20,0.03);
  --shadow-md:   0 1px 2px rgba(20,20,20,0.04), 0 10px 28px -16px rgba(20,20,20,0.18);
  --shadow-lg:   0 2px 4px rgba(20,20,20,0.04), 0 30px 60px -26px rgba(20,20,20,0.26);
}

[data-az="dark"]{
  --canvas:      oklch(0.165 0 0);
  --surface:     oklch(0.208 0 0);
  --surface-2:   oklch(0.188 0 0);
  --ink:         oklch(0.945 0 0);
  --ink-2:       oklch(0.74 0 0);
  --ink-3:       oklch(0.60 0 0);
  --ink-4:       oklch(0.46 0 0);
  --line:        oklch(0.30 0 0);
  --line-2:      oklch(0.255 0 0);
  --brand:       oklch(0.945 0 0);  /* reversed near-white */
  --brand-soft:  oklch(0.30 0 0);
  --on-brand:    oklch(0.165 0 0);
  --up:          oklch(0.70 0.15 152);
  --up-soft:     oklch(0.30 0.06 152);
  --down:        oklch(0.66 0.17 25);
  --down-soft:   oklch(0.31 0.07 28);
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:   0 1px 2px rgba(0,0,0,0.30), 0 12px 30px -16px rgba(0,0,0,0.6);
  --shadow-lg:   0 2px 4px rgba(0,0,0,0.35), 0 30px 60px -26px rgba(0,0,0,0.72);
}

:root{
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* ---- shared primitives (prefixed .az- to avoid leaking) ---- */
.az-root{ background:var(--canvas); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.az-root *{ box-sizing:border-box; }

.az-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); }
.az-mono{ font-family:var(--mono); }

.az-btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:15px; line-height:1; padding:13px 20px; border-radius:11px; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.az-btn:active{ transform:translateY(1px); }
.az-btn-solid{ background:var(--brand); color:var(--on-brand); }
.az-btn-solid:hover{ filter:brightness(1.06); }
.az-btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.az-btn-ghost:hover{ border-color:var(--ink-3); background:var(--surface-2); }

.az-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:var(--surface); }

/* market deltas */
.az-up{ color:var(--up); } .az-down{ color:var(--down); }