/*
 * @generated by `astryx theme build` — do not edit manually.
 * Source: source/theme.mjs
 * Command: astryx theme build source/theme.mjs --out source/public/assets/theme.css
 * Generated: 2026-10-29T15:20:21.927Z
 */

@layer reset {
@scope ([data-astryx-theme="db-shells"]) to ([data-astryx-theme]) {
  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-family-heading);
    color: var(--color-text-primary);
  }

  :where(h1) {
    font-size: var(--text-heading-1-size);
    font-weight: var(--text-heading-1-weight);
    line-height: var(--text-heading-1-leading);
  }

  :where(h2) {
    font-size: var(--text-heading-2-size);
    font-weight: var(--text-heading-2-weight);
    line-height: var(--text-heading-2-leading);
  }

  :where(h3) {
    font-size: var(--text-heading-3-size);
    font-weight: var(--text-heading-3-weight);
    line-height: var(--text-heading-3-leading);
  }

  :where(h4) {
    font-size: var(--text-heading-4-size);
    font-weight: var(--text-heading-4-weight);
    line-height: var(--text-heading-4-leading);
  }

  :where(h5) {
    font-size: var(--text-heading-5-size);
    font-weight: var(--text-heading-5-weight);
    line-height: var(--text-heading-5-leading);
  }

  :where(h6) {
    font-size: var(--text-heading-6-size);
    font-weight: var(--text-heading-6-weight);
    line-height: var(--text-heading-6-leading);
  }

  :where(p) {
    font-family: var(--font-family-body);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-leading);
    color: var(--color-text-primary);
  }

  :where(small) {
    font-size: var(--text-supporting-size);
    font-weight: var(--text-supporting-weight);
    line-height: var(--text-supporting-leading);
    color: var(--color-text-secondary);
  }

  :where(code, pre) {
    font-family: var(--font-family-code);
    font-size: var(--text-code-size);
    line-height: var(--text-code-leading);
  }

  :where(hr) {
    border: none;
    border-top: 1px solid var(--color-border);
  }
}
}

@layer astryx-theme {
  :root { color-scheme: light dark; }

@scope ([data-astryx-theme="db-shells"]) to ([data-astryx-theme]) {
  :scope {
    --color-accent: light-dark(#7A5901, #EDC06D);
    --color-accent-muted: light-dark(#7A590133, #EDC06D40);
    --color-on-accent: light-dark(#FFFFFF, #472C00);
    --color-neutral: light-dark(#201B121A, #EAE1D533);
    --color-background-surface: light-dark(#FFFFFF, #080A0B);
    --color-background-body: light-dark(#FFFFFF, #080A0B);
    --color-overlay: light-dark(#201B1266, #201B1299);
    --color-overlay-hover: light-dark(#201B120D, #FFFFFF0D);
    --color-overlay-pressed: light-dark(#201B121A, #FFFFFF1A);
    --color-background-muted: light-dark(#201B120D, #201B1280);
    --color-text-primary: light-dark(#151614, #FFFFFF);
    --color-text-secondary: light-dark(#666862, #C8C8C0);
    --color-text-disabled: light-dark(#9A8F7F, #675D4E);
    --color-text-accent: light-dark(#5F4200, #EDC06D);
    --color-icon-accent: light-dark(#7A5901, #EDC06D);
    --color-icon-primary: light-dark(#201B12, #EAE1D5);
    --color-icon-secondary: light-dark(#4F4537, #B5AA99);
    --color-icon-disabled: light-dark(#9A8F7F, #675D4E);
    --color-background-card: light-dark(#FFFBF3, #201B12);
    --color-background-popover: light-dark(#FFFBF3, #363026);
    --color-background-inverted: light-dark(#201B12, #FFFBF3);
    --color-border: light-dark(#DEDCD6, #383B37);
    --color-border-emphasized: light-dark(#B5AA99, #4F4537);
    --color-skeleton: light-dark(#B5AA99, #4F4537);
    --color-track: light-dark(#B5AA99, #4F4537);
    --color-shadow: light-dark(#0000001A, #0000004D);
    --color-tint-hover: light-dark(black, white);
    --radius-none: 0px;
    --radius-inner: 0px;
    --radius-element: 0px;
    --radius-container: 0px;
    --radius-page: 0px;
    --radius-chat: 0px;
    --radius-full: 9999px;
    --font-family-body: Manrope, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-family-heading: "EB Garamond", "Noto Serif SC", "Songti SC", SimSun, serif;
    --font-family-code: "Overpass Mono", "Noto Sans SC", monospace;
    --color-background-wash: light-dark(#F7F7F5, #0C0E0E);
    --font-size-base: 1rem;
    --font-size-sm: .875rem;
    --font-size-xs: .75rem;
    --font-size-2xs: .625rem;
    --font-family-label: "Overpass Mono", "Noto Sans SC", monospace;
    --font-weight-editorial: 440;
    --font-size-display: 4rem;
    --font-size-display-mobile: 2.75rem;
    --font-size-section: 2.5rem;
    --font-size-section-mobile: 2rem;
    --font-size-reading: 1.0625rem;
    --font-size-navigation: .8125rem;
    --font-size-label: .75rem;
    --line-height-display: 1.05;
    --line-height-section: 1.15;
    --line-height-subheading: 1.2;
    --line-height-label: 1.5;
    --line-height-reading: 1.7;
    --line-height-navigation: 1.54;
    --tracking-heading: .02em;
    --tracking-label: .12em;
    --tracking-brand: .12em;
    --header-row-height: 3.5rem;
    --header-row-height-mobile: 3.25rem;
    --header-brand-size: 1.375rem;
    --header-brand-mobile-size: 1.125rem;
    --header-brand-size-zh: 1.5rem;
    --header-brand-mobile-size-zh: 1.25rem;
    --header-navigation-size: .8125rem;
    --header-navigation-gap: 2rem;
    --header-navigation-gap-mobile: 1.25rem;
    --header-tracking-brand: .1em;
    --header-tracking-navigation: .015em;
    --header-tracking-navigation-zh: .035em;
  }
}
}

@layer astryx-theme {
@scope ([data-astryx-theme="db-shells"]) to ([data-astryx-theme]) {
  [data-astryx-media="dark"] {
    color-scheme: dark;
    --color-text-primary: var(--color-on-dark);
    --color-icon-primary: var(--color-on-dark);
    --color-accent: var(--color-on-dark);
  }

  [data-astryx-media="light"] {
    color-scheme: light;
    --color-text-primary: var(--color-on-light);
    --color-icon-primary: var(--color-on-light);
    --color-accent: var(--color-on-light);
  }
}
}