@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../assets/fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../../assets/fonts/fira-code-latin-wght-normal.woff2") format("woff2");
}

:root {
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-code: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;

  --text-xs: 1.2rem;
  --text-sm: 1.4rem;
  --text-base: 1.65rem;
  --text-lg: 2rem;
  --text-xl: 2.5rem;
  --text-2xl: 3.125rem;
  --text-3xl: 3.9rem;

  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 6.4rem;

  --radius-sm: 0.4rem;
  --radius-md: 0.8rem;
  --rule-hair: 1px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 160ms;

  --shadow-code: 0 1rem 2.8rem oklch(29% 0.02 255 / 0.06);
  --shadow-focus: 0 0 0 0.3rem color-mix(in oklch, var(--links) 16%, transparent);
  --shadow-popup: 0 1.2rem 3rem oklch(29% 0.02 255 / 0.14);

  --layerfs-art-opacity: 0.08;
  --layerfs-art-cycle-duration: 36s;

  --sidebar-target-width: 29rem;
  --page-padding: clamp(1.6rem, 3vw, 4rem);
  --content-max-width: 86rem;
  --menu-bar-height: 5.6rem;
  --mono-font: var(--font-code);
}

.light,
html:not(.js) {
  --color-canvas: oklch(98.3% 0.006 85);
  --color-card: oklch(99.6% 0.003 85);
  --color-sidebar: oklch(96.5% 0.009 85);
  --color-code: oklch(95.8% 0.009 85);
  --color-callout: oklch(97.5% 0.01 250);
  --color-ink: oklch(29% 0.02 255);
  --color-ink-muted: oklch(51% 0.035 260);
  --color-rule: oklch(90.5% 0.012 85);
  --color-rule-strong: oklch(82% 0.018 85);
  --color-accent: oklch(54.6% 0.215 263);
  --color-accent-strong: oklch(47% 0.22 263);
  --color-accent-soft: oklch(96.5% 0.025 255);
  --color-focus: oklch(54.6% 0.215 263);
  --color-toolbar: oklch(98.3% 0.006 85 / 0.96);

  --bg: var(--color-canvas);
  --fg: var(--color-ink);
  --sidebar-bg: var(--color-sidebar);
  --sidebar-fg: var(--color-ink);
  --sidebar-non-existant: var(--color-ink-muted);
  --sidebar-active: var(--color-accent-strong);
  --sidebar-spacer: var(--color-rule);
  --scrollbar: var(--color-rule-strong);
  --icons: var(--color-ink-muted);
  --icons-hover: var(--color-ink);
  --links: var(--color-accent-strong);
  --inline-code-color: var(--color-accent-strong);
  --theme-popup-bg: var(--color-card);
  --theme-popup-border: var(--color-rule);
  --theme-hover: var(--color-accent-soft);
  --quote-bg: var(--color-callout);
  --quote-border: var(--color-accent);
  --table-border-color: var(--color-rule);
  --table-header-bg: var(--color-sidebar);
  --table-alternate-bg: var(--color-card);
  --searchbar-border-color: var(--color-rule-strong);
  --searchbar-bg: var(--color-card);
  --searchbar-fg: var(--color-ink);
  --searchbar-shadow-color: var(--color-focus);
  --searchresults-header-fg: var(--color-ink-muted);
  --searchresults-border-color: var(--color-rule);
  --searchresults-li-bg: var(--color-accent-soft);
  --search-mark-bg: oklch(89% 0.08 250);
  --overlay-bg: oklch(29% 0.02 255 / 0.42);
  --sidebar-header-border-color: var(--color-accent);
  --color-scheme: light;
}

@media (min-width: 48rem) {
  :root {
    --layerfs-art-opacity: 0.14;
  }
}