/* Foyerbox tokens. A calm overview: grey canvas, big white cards, near-black type in Geist,
   royal blue for data, magenta for noise and losses, diagonal hatching as the data texture,
   a blue gradient mark. Light is white, dark is black. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+2318, U+21B5, U+25B2, U+25BC, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+FEFF, U+FFFD;
}

:root {
  --canvas: #e4e4e3;
  --frame: #f3f3f2;
  --card: #ffffff;
  --card-2: #f4f4f3;
  --card-3: #ebebea;
  --hover: rgba(17, 17, 17, 0.045);

  --text: #111111;
  --text-2: #4f4f4f;
  --text-3: #6b6b6b;
  --line: rgba(17, 17, 17, 0.08);
  --line-2: rgba(17, 17, 17, 0.14);

  --pill: #191919;
  --on-pill: #ffffff;

  /* data */
  --blue: #2350f5;
  --blue-hover: #1a43e0;
  --blue-soft: #e8edff;
  --blue-hatch: rgba(35, 80, 245, 0.62);
  --pink: #e0307e;
  --pink-text: #c81d68;
  --pink-soft: #fde8f1;
  --pink-hatch: rgba(224, 48, 126, 0.7);
  --up: #138a43;
  --brand: #2f6bff;
  --on-brand: #ffffff;
  --sky-soft: #e3f2fd;
  --sky-text: #0b65a8;
  --grey-hatch: rgba(17, 17, 17, 0.22);

  /* aliases older code reads */
  --accent: var(--blue);
  --accent-hover: var(--blue-hover);
  --accent-soft: var(--blue-soft);
  --accent-text: var(--blue);
  --ok: var(--up);
  --warn: #5146d8;
  --warn-soft: #efeefe;
  --bad: var(--pink-text);

  /* address identity */
  --acc-red: #ff453a;
  --acc-indigo: #5e5ce6;
  --acc-blue: #0a84ff;
  --acc-cyan: #3fb6e8;
  --acc-purple: #bf5af2;
  --acc-pink: #ff375f;

  /* keycaps */
  --key-face: #ffffff;
  --key-edge: rgba(17, 17, 17, 0.16);
  --key-text: #4a4a4a;

  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-frame: 32px;
  --r-card: 24px;
  --r-inner: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px -12px rgba(17, 17, 17, 0.1);
  --shadow-md: 0 1px 2px rgba(17, 17, 17, 0.05), 0 14px 34px -14px rgba(17, 17, 17, 0.18);
  --shadow-pop: 0 2px 6px rgba(17, 17, 17, 0.08), 0 30px 70px -20px rgba(17, 17, 17, 0.32);

  --hatch-blue: repeating-linear-gradient(-45deg, var(--blue-hatch) 0 1.6px, transparent 1.6px 5px);
  --hatch-pink: repeating-linear-gradient(-45deg, var(--pink-hatch) 0 1.6px, transparent 1.6px 5px);
  --hatch-grey: repeating-linear-gradient(-45deg, var(--grey-hatch) 0 1.4px, transparent 1.4px 5px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #000000; --frame: #0b0b0b; --card: #141414; --card-2: #1c1c1c; --card-3: #262626; --hover: rgba(255, 255, 255, 0.05);
    --text: #f4f4f4; --text-2: #b4b4b4; --text-3: #8f8f8f; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.15);
    --pill: #f4f4f4; --on-pill: #0b0b0b;
    --blue: #6b8dff; --blue-hover: #82a0ff; --blue-soft: rgba(74, 117, 255, 0.16); --blue-hatch: rgba(90, 130, 255, 0.7);
    --pink: #ff4f9a; --pink-text: #ff6aa9; --pink-soft: rgba(255, 79, 154, 0.15); --pink-hatch: rgba(255, 79, 154, 0.72);
    --up: #3ccf74; --brand: #6b97ff; --on-brand: #06122b; --sky-soft: rgba(56, 189, 248, 0.14); --sky-text: #7dd3fc; --grey-hatch: rgba(255, 255, 255, 0.24);
    --warn: #a9a3ff; --warn-soft: rgba(129, 120, 255, 0.15);
    --key-face: #222222; --key-edge: rgba(255, 255, 255, 0.16); --key-text: #d6d6d6;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -14px rgba(0, 0, 0, 0.8);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.6), 0 30px 70px -20px rgba(0, 0, 0, 0.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #000000; --frame: #0b0b0b; --card: #141414; --card-2: #1c1c1c; --card-3: #262626; --hover: rgba(255, 255, 255, 0.05);
  --text: #f4f4f4; --text-2: #b4b4b4; --text-3: #8f8f8f; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.15);
  --pill: #f4f4f4; --on-pill: #0b0b0b;
  --blue: #6b8dff; --blue-hover: #82a0ff; --blue-soft: rgba(74, 117, 255, 0.16); --blue-hatch: rgba(90, 130, 255, 0.7);
  --pink: #ff4f9a; --pink-text: #ff6aa9; --pink-soft: rgba(255, 79, 154, 0.15); --pink-hatch: rgba(255, 79, 154, 0.72);
  --up: #3ccf74; --brand: #6b97ff; --on-brand: #06122b; --sky-soft: rgba(56, 189, 248, 0.14); --sky-text: #7dd3fc; --grey-hatch: rgba(255, 255, 255, 0.24);
  --warn: #a9a3ff; --warn-soft: rgba(129, 120, 255, 0.15);
  --key-face: #222222; --key-edge: rgba(255, 255, 255, 0.16); --key-text: #d6d6d6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -14px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.6), 0 30px 70px -20px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--blue);
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgba(35, 80, 245, 0.2);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 10px;
}

a {
  color: var(--blue);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.num {
  font-variant-numeric: tabular-nums;
}

/* keycap */
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.45em;
  border-radius: 0.5em;
  background: var(--key-face);
  color: var(--key-text);
  box-shadow: inset 0 0 0 1px var(--key-edge);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: 0.08em;
  transition: transform 0.12s, box-shadow 0.12s;
}
.keys {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

/* change pill: ▲ 6.2% */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.delta::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-bottom: 6px solid var(--up);
}
.delta.is-down::before {
  border-bottom: 0;
  border-top: 6px solid var(--pink);
}
.delta.is-warn::before {
  border-bottom-color: var(--pink);
}
.delta.is-flat::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
    transition-duration: 0.1s !important;
  }
}