@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
    U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+20ac, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+feff, U+fffd;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da,
    U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+20ac, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+feff, U+fffd;
}

:root {
  color-scheme: light;
  --color-bg: #fff9ef;
  --color-bg-deep: #f3e7d4;
  --color-surface: #fffdf9;
  --color-surface-raised: #ffffff;
  --color-surface-inverse: #0f172a;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #526174;
  --color-border: #d8cdbe;
  --color-border-strong: #a99984;
  --color-interactive: #6541d8;
  --color-interactive-hover: #5634c1;
  --color-interactive-pressed: #472aa5;
  --color-on-interactive: #ffffff;
  --color-gold: #d4a72c;
  --color-gold-text: #826000;
  --color-gold-soft: #fff0bd;
  --color-navy: #0f172a;
  --color-navy-soft: #18233d;
  --color-success: #167c55;
  --color-success-soft: #e5f6ee;
  --color-warning: #8b5d00;
  --color-warning-soft: #fff1c7;
  --color-danger: #b42318;
  --color-danger-soft: #feeceb;
  --color-info: #1d4ed8;
  --color-info-soft: #e8f0ff;
  --chart-1: #6541d8;
  --chart-2: #d4a72c;
  --chart-3: #167c55;
  --chart-4: #1d4ed8;
  --chart-5: #c2410c;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --control-height: 3rem;
  --content-max: 75rem;
  --reading-max: 68ch;
  --sidebar-width: 16.25rem;
  --duration-fast: 160ms;
  --duration-standard: 220ms;
  --duration-slow: 280ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 8%), 0 2px 8px rgb(15 23 42 / 5%);
  --shadow-md: 0 8px 24px rgb(15 23 42 / 10%);
  --shadow-lg: 0 24px 60px rgb(15 23 42 / 14%);
  --font-sans: "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

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

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 8% 2%, rgb(212 167 44 / 14%), transparent 24rem),
    linear-gradient(180deg, var(--color-bg) 0%, #fbf4e8 100%);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.app-body {
  background: #f6f0e7;
}

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

button,
[type="button"],
[type="submit"] {
  cursor: pointer;
}

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

a {
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-interactive);
  outline-offset: 3px;
}

::selection {
  background: var(--color-gold-soft);
  color: var(--color-navy);
}

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

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

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: #6b5f50;
    --color-text-secondary: #283548;
    --color-text-muted: #3e4b5e;
  }
}