/*
  instance-ui tokens. Direction A "Depth".
  Source of truth: ~/ideas/ui-directions/direction-a.html (the approved prototype).

  Font: Geist only. Either
    1. next/font:   const geist = Geist({ subsets: ["latin"], variable: "--font-geist" })
                    and put geist.variable on <html>. --font picks it up below.
    2. Google Fonts: <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&display=swap" rel="stylesheet">
                    then the literal "Geist" family below resolves.
  No monospace anywhere: every control, code, kbd, pre and svg text is set to --font.
*/

:root{
  --font: var(--font-geist, "Geist"), "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* type scale, compact: 11 / 12 / 13 / 15 / 20 / 28 (10.5 for micro labels and chart axes) */
  --t-2xs: 10.5px;
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-lg: 15px;
  --t-xl: 20px;
  --t-2xl: 28px;
  --lh: 1.38;
  --w-regular: 450;
  --w-medium: 550;
  --w-semibold: 600;
  --w-bold: 650;

  /* spacing, 4px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* radii */
  --r-xs: 3px; --r-sm: 5px; --r-md: 7px; --r-lg: 9px; --r-pill: 999px;

  /* density */
  --row: 30px;        /* table row */
  --bar: 44px;        /* top bar */
  --subbar: 34px;     /* sub nav */
  --ph: 38px;         /* panel header */
  --control: 36px;    /* input height */
  --control-sm: 28px;
  --control-lg: 40px;

  /* light (paper terminal) */
  --bg: #EEF1F5;
  --bg-sunk: #E4E8EE;
  --panel: #FFFFFF;
  --panel-2: #F6F8FA;
  --line: #DCE1E8;
  --line-strong: #C7CED8;
  --text: #0E1621;
  --text-2: #4A5565;
  --text-3: #7A8596;
  --accent: #3B5BDB;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(59,91,219,.10);
  --up: #0F9D63;
  --up-soft: rgba(15,157,99,.12);
  --down: #D93A47;
  --down-soft: rgba(217,58,71,.11);
  --warn: #B7791F;
  --warn-soft: color-mix(in srgb, var(--warn) 12%, transparent);
  --on-signal: #FFFFFF; /* text on solid up/down fills */
  --focus: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
  --shadow-1: 0 1px 0 rgba(14,22,33,.04);
  --shadow-pop: 0 12px 32px -8px rgba(14,22,33,.22), 0 0 0 1px var(--line);

  /* chart */
  --chart-grid: #E7EBF0;
  --chart-line: var(--text);
  --chart-ref: var(--text-3);
  --chart-band: var(--accent-soft);
  --chart-band-edge: var(--accent);
  --chart-window: var(--warn);
  --chart-now: var(--accent);
  --chart-axis: var(--text-3);

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #090D13;
    --bg-sunk: #06090E;
    --panel: #0F141C;
    --panel-2: #141B25;
    --line: #1C2531;
    --line-strong: #283343;
    --text: #E4E9F0;
    --text-2: #A3AEBE;
    --text-3: #6B7787;
    --accent: #7F95FF;
    --accent-ink: #070B12;
    --accent-soft: rgba(127,149,255,.13);
    --up: #2FD08A;
    --up-soft: rgba(47,208,138,.12);
    --down: #FF5D6A;
    --down-soft: rgba(255,93,106,.12);
    --warn: #E9B44C;
    --shadow-1: 0 1px 0 rgba(0,0,0,.3);
    --shadow-pop: 0 16px 40px -10px rgba(0,0,0,.7), 0 0 0 1px var(--line-strong);
    --chart-grid: #18202B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg: #090D13;
  --bg-sunk: #06090E;
  --panel: #0F141C;
  --panel-2: #141B25;
  --line: #1C2531;
  --line-strong: #283343;
  --text: #E4E9F0;
  --text-2: #A3AEBE;
  --text-3: #6B7787;
  --accent: #7F95FF;
  --accent-ink: #070B12;
  --accent-soft: rgba(127,149,255,.13);
  --up: #2FD08A;
  --up-soft: rgba(47,208,138,.12);
  --down: #FF5D6A;
  --down-soft: rgba(255,93,106,.12);
  --warn: #E9B44C;
  --shadow-1: 0 1px 0 rgba(0,0,0,.3);
  --shadow-pop: 0 16px 40px -10px rgba(0,0,0,.7), 0 0 0 1px var(--line-strong);
  --chart-grid: #18202B;
  color-scheme: dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--t-md);
  line-height:var(--lh);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
}
/* No monospace, ever. UA styles give these a monospace face by default. */
button,input,select,textarea,optgroup,code,kbd,samp,pre,tt,var,svg text,svg tspan{
  font-family:var(--font);
  font-variant-numeric:tabular-nums;
}
code,kbd,samp,pre{font-size:inherit}
:focus-visible{outline:none;box-shadow:var(--focus)}
.iu-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.iu-muted{color:var(--text-2)}
.iu-faint{color:var(--text-3)}
.iu-up{color:var(--up)}
.iu-down{color:var(--down)}
.iu-warn{color:var(--warn)}
.iu-r{text-align:right}
@media (max-width:999px){.iu-hide-sm{display:none !important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}