/* Hyperbob's product identity is a wrapper concern. This file loads after the neutral kernel CSS.
 *
 * Loading last is what makes the branding stick, and it is also the trap: the kernel puts its dark
 * palette on `[data-mode="dark"]`, which has the same specificity as `:root`. A `:root` block here
 * therefore wins on source order in BOTH schemes, and every token it names stays at its light
 * value however the mode is switched. The light values are scoped to light for that reason, and
 * dark gets its own block rather than being left to lose a tie.
 *
 * The dark palette is Hyperbob's own, taken from the hyperbench's `classic-dark` preset, so the
 * two schemes are one identity rather than a branded light mode and a borrowed dark one.
 */
@font-face {
  font-family: "Bitcount Grid Double";
  src: url("/hyperbob/fonts/BitcountGridDouble-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Scheme-independent. */
:root {
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  --font-display: "Bitcount Grid Double", var(--font-mono);
}

/* Light. Also the pre-hydration default, since `data-mode` is only set once the theme applies. */
html:not([data-mode="dark"]) {
  --color-kumo-base: #fbfbfc;
  --color-kumo-elevated: #f7f8fa;
  --color-kumo-tint: #f3f4f6;
  --color-kumo-overlay: #fbfbfc;
  --color-kumo-recessed: #eef0f3;
  --color-kumo-control: #ffffff;
  --color-kumo-contrast: #111827;
  --color-kumo-fill: #e5e7eb;
  --color-kumo-fill-hover: #d8dbe1;
  --color-kumo-interact: #c3c8d0;
  --color-kumo-brand: #047857;
  --color-kumo-brand-hover: #036249;
  --color-kumo-line: #1118270f;
  --color-kumo-ring: #7f8896;
  --color-kumo-bubble-user: #f1f2f5;
  --color-kumo-tip-shadow: #11182714;

  --text-color-kumo-default: #111827;
  --text-color-kumo-default-hover: #0b1220;
  --text-color-kumo-strong: #0b1220;
  --text-color-kumo-subtle: #6b7280;
  --text-color-kumo-inactive: #9aa1ac;
  --text-color-kumo-brand: #047857;
  --text-color-kumo-link: #047857;

  --color-accent-100: #047857;
  --color-accent-200: #10b981;
  --color-background-100: #fbfbfc;
  --color-background-200: #f7f8fa;
  --color-background-300: #f3f4f6;
  --color-foreground-100: #0b1220;
  --color-foreground-200: #0b1220;
  --color-foreground-300: #111827;
  --color-border-100: #e5e7eb;
  --color-border-100-50: #e5e7eb80;
  --color-selection-bg: #d5f0e4;
  --color-selection-text: #04664a;
  --color-shadow-accent-light: #6ee7b7;
  --color-shadow-accent-dark: #035f46;
}

/* Dark. Surfaces are the hyperbench's blue-black rather than a neutral grey, and the brand green
   lifts to the lighter emerald a dark surface needs to keep the same weight against its ink. */
[data-mode="dark"] {
  --color-kumo-base: #0b1a33;
  --color-kumo-elevated: #0d203f;
  --color-kumo-tint: #132747;
  --color-kumo-overlay: #0d203f;
  --color-kumo-recessed: #081527;
  --color-kumo-control: #132747;
  --color-kumo-contrast: #e5e7eb;
  --color-kumo-fill: #1b3358;
  --color-kumo-fill-hover: #22406e;
  --color-kumo-interact: #2c4d80;
  --color-kumo-brand: #34d399;
  --color-kumo-brand-hover: #6ee7b7;
  --color-kumo-line: #e5e7eb1f;
  --color-kumo-ring: #60a5fa;
  --color-kumo-bubble-user: #132747;
  --color-kumo-tip-shadow: #00000066;

  --text-color-kumo-default: #e5e7eb;
  --text-color-kumo-default-hover: #f8fafc;
  --text-color-kumo-strong: #f8fafc;
  --text-color-kumo-subtle: #94a3b8;
  --text-color-kumo-inactive: #64748b;
  --text-color-kumo-brand: #34d399;
  --text-color-kumo-link: #60a5fa;

  --color-accent-100: #34d399;
  --color-accent-200: #6ee7b7;
  --color-background-100: #0b1a33;
  --color-background-200: #0d203f;
  --color-background-300: #132747;
  --color-foreground-100: #f8fafc;
  --color-foreground-200: #f8fafc;
  --color-foreground-300: #e5e7eb;
  --color-border-100: #1b3358;
  --color-border-100-50: #1b335880;
  --color-selection-bg: #04664a;
  --color-selection-text: #d5f0e4;
  --color-shadow-accent-light: #34d399;
  --color-shadow-accent-dark: #065f46;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.02em;
  /* 20% larger than the original 1.32em Hyperbob wordmark. */
  font-size: 1.584em;
}