/* Missionly design tokens. One definition per token: light-dark() resolves against the element's color-scheme,
   so any block can opt into the dark set with `color-scheme: dark` (the auction room board does). */
:root {
  color-scheme: light dark;

  /* surfaces, from the window down to what floats above it */
  --bg: light-dark(#f6f6f8, #0f0f12);
  --sidebar: light-dark(#ededf1, #17171b);
  --surface: light-dark(#ffffff, #1b1b1f);
  --raised: light-dark(#ffffff, #26262b);
  --sunken: light-dark(#f2f2f5, #141417);
  --material: light-dark(rgb(246 246 248 / .72), rgb(15 15 18 / .68));
  --material-side: light-dark(rgb(237 237 241 / .82), rgb(23 23 27 / .82));
  --scrim: light-dark(rgb(20 20 30 / .32), rgb(0 0 0 / .56));

  /* ink */
  --ink: light-dark(#1d1d1f, #f5f5f7);
  --ink-2: light-dark(#48484d, #c9c9ce);
  --muted: light-dark(#6e6e73, #9a9aa1);
  --faint: light-dark(#aeaeb2, #5f5f66);
  --line: light-dark(rgb(0 0 0 / .12), rgb(255 255 255 / .14));
  --line-2: light-dark(rgb(0 0 0 / .07), rgb(255 255 255 / .08));
  --fill: light-dark(rgb(0 0 0 / .045), rgb(255 255 255 / .07));
  --fill-2: light-dark(rgb(0 0 0 / .085), rgb(255 255 255 / .13));

  /* accent: --accent is for text and icons, --accent-fill sits under white text */
  --accent: light-dark(#4338ca, #a5a1ff);
  --accent-fill: light-dark(#4f46e5, #5f57ee);
  --accent-press: light-dark(#4338ca, #6f68f5);
  --tint: light-dark(rgb(79 70 229 / .08), rgb(165 161 255 / .13));
  --tint-2: light-dark(rgb(79 70 229 / .15), rgb(165 161 255 / .22));
  --focus: light-dark(rgb(79 70 229 / .32), rgb(165 161 255 / .42));
  --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
  --hero-a: #4338ca;
  --hero-b: #1e1b4b;

  /* status and named hues, stepped to clear 4.5:1 as text on both surfaces */
  --green: light-dark(#156c2e, #4cd27a);
  --amber: light-dark(#855000, #f5b544);
  --red: light-dark(#b5221a, #ff7a70);
  --blue: light-dark(#0a66c2, #62a9ff);
  --purple: light-dark(#7a3fd1, #c49bff);
  --pink: light-dark(#c2255c, #ff7fa8);
  --orange: light-dark(#c2500c, #ff9f5a);
  --gray: light-dark(#6e6e73, #9a9aa1);
  --green-bg: color-mix(in srgb, var(--green) 14%, transparent);
  --amber-bg: color-mix(in srgb, var(--amber) 15%, transparent);
  --red-bg: color-mix(in srgb, var(--red) 13%, transparent);
  --purple-bg: color-mix(in srgb, var(--purple) 14%, transparent);

  /* charts: eight slots in a fixed order, checked for colorblind separation on each surface */
  --s1: light-dark(#6250d6, #9085e9);
  --s2: light-dark(#eb6834, #d95926);
  --s3: light-dark(#1baf7a, #199e70);
  --s4: light-dark(#eda100, #c98500);
  --s5: light-dark(#e87ba4, #d55181);
  --s6: #008300;
  --s7: light-dark(#2a78d6, #3987e5);
  --s8: light-dark(#e34948, #e66767);

  /* depth: light casts a soft shadow, dark swaps it for a hairline edge */
  --edge: light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .08));
  --sh-1: light-dark(rgb(0 0 0 / .04), rgb(0 0 0 / .3));
  --sh-2: light-dark(rgb(0 0 0 / .05), rgb(0 0 0 / .35));
  --sh-3: light-dark(rgb(0 0 0 / .16), rgb(0 0 0 / .6));
  --shadow: 0 0 0 1px var(--edge), 0 1px 2px var(--sh-1), 0 6px 20px var(--sh-2);
  --shadow-l: 0 0 0 1px var(--edge), 0 2px 6px var(--sh-1), 0 18px 50px var(--sh-3);

  /* shape */
  --r: 14px;
  --r-s: 9px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --top-h: calc(52px + var(--safe-t));
  --stick: calc(var(--top-h) + 12px);

  /* motion: a critically damped spring sampled for CSS, so nothing overshoots without a gesture behind it */
  --spring: linear(0, .0864, .2549, .4293, .58, .6994, .7891, .8544, .9007, .9329, .9551, .9701, .9802, .987, 1);
  --spring-fast: linear(0, .1508, .3981, .609, .7588, .8562, .9163, .9522, .9731, .985, 1);
  --t-spring: .38s;
  --t-fast: .24s;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media print { :root, :root[data-theme="dark"] { color-scheme: light; } }

/* A theme change cross-fades, so a full-screen brightness jump never lands in one frame. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease-out; }

/* Every page shares these, so a person's contrast setting works everywhere */
@media (prefers-contrast: more) {
  :root { --line: light-dark(rgb(0 0 0 / .5), rgb(255 255 255 / .55)); --line-2: light-dark(rgb(0 0 0 / .3), rgb(255 255 255 / .35)); --edge: light-dark(rgb(0 0 0 / .4), rgb(255 255 255 / .45)); --muted: light-dark(#48484d, #c9c9ce); }
}

/* iOS Text Size: rem follows the setting. Touch only, because macOS Safari resolves this font to 13px. */
@supports (font: -apple-system-body) {
  @media (pointer: coarse) { html { font: -apple-system-body; } }
}