/* Ħakke tokens, generated from tokens.json by brand/scripts/build_tokens_css.py. Do not edit. */

:root {
  color-scheme: light;
  --surface-100: #f4f1ea;
  --surface-200: #e8e3d8;
  --hairline: #cfc8b8;
  --ink: #282b30;
  --ink-muted: #5f646a;
  --ember: #c15e25;
  --ember-text: #9a4513;
  --action: var(--ember-text);
  --on-action: #f4f1ea;
  --fjord: #476270;
  --focus: var(--fjord);
  --font-sans: "Hakke Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Hakke Sans", ui-monospace, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --stroke-hairline: 1px;
  --stroke-rule: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-100: #282b30;
    --surface-200: #31353b;
    --hairline: #474c54;
    --ink: #f4f1ea;
    --ink-muted: #b4b8bc;
    --ember-text: #e58a52;
    --on-action: #282b30;
    --fjord: #93b4c4;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-100: #282b30;
  --surface-200: #31353b;
  --hairline: #474c54;
  --ink: #f4f1ea;
  --ink-muted: #b4b8bc;
  --ember-text: #e58a52;
  --on-action: #282b30;
  --fjord: #93b4c4;
}

/* Focus ring: solid 2px with a 2px offset, on every surface. */
:focus-visible { outline: var(--stroke-rule) solid var(--focus); outline-offset: 2px; }

/* Turn on for any column of numbers. */
.tnum { font-feature-settings: "tnum", "zero"; }

.text-display-xl {
  font-family: var(--font-sans);
  font-size: 96px;
  line-height: 92px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-display-lg {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-display-md {
  font-family: var(--font-sans);
  font-size: 44px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.text-h1 {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 42px;
  font-weight: 600;
}

.text-h2 {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
}

.text-h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.text-body-lg {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}

.text-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

.text-small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.text-label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-label-sm {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}