@font-face {
  font-family: "Die Grotesk Astraed";
  src: url("../../assets/fonts/die-grotesk/DieGroteskVF-Roman.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Die Grotesk Astraed";
  src: url("../../assets/fonts/die-grotesk/DieGroteskVF-Italic.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --ae-canvas: #ffffff;
  --ae-surface: #f7f7f5;
  --ae-surface-raised: #ffffff;
  --ae-ink: #0a0a0a;
  --ae-text-secondary: rgba(10, 10, 10, 0.72);
  --ae-text-tertiary: rgba(10, 10, 10, 0.5);
  --ae-text-meta: rgba(10, 10, 10, 0.64);
  --ae-text-faint: rgba(10, 10, 10, 0.34);
  --ae-line: rgba(10, 10, 10, 0.12);
  --ae-line-strong: rgba(10, 10, 10, 0.22);
  --ae-media-matte: #f0ede7;
  --ae-scrim: rgba(255, 255, 255, 0.72);
  --ae-overlay: rgba(0, 0, 0, 0.64);
  --ae-focus: #0a0a0a;
  --ae-font: "Die Grotesk Astraed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ae-type-display: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  --ae-type-h2: clamp(1.75rem, 1.375rem + 1.5vw, 2.5rem);
  --ae-type-h3: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
  --ae-type-h4: 18px;
  --ae-type-body-lg: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem);
  --ae-type-body: 17px;
  --ae-type-body-sm: 16px;
  --ae-type-small: 14px;
  --ae-type-meta: 12px;
  --ae-weight-body: 400;
  --ae-weight-display: 400;
  --ae-weight-heading: 450;
  --ae-weight-label: 500;
  --ae-leading-display: 1.18;
  --ae-leading-h2: 1.2;
  --ae-leading-h3: 1.3;
  --ae-leading-body: 1.65;
  --ae-leading-small: 1.5;
  --ae-leading-meta: 1.4;
  --ae-tracking-display: -0.005em;
  --ae-tracking-h2: -0.005em;
  --ae-tracking-h3: 0;
  --ae-tracking-body: 0;
  --ae-heading-gap: clamp(16px, 2vw, 24px);
  --ae-space-1: 4px;
  --ae-space-2: 8px;
  --ae-space-3: 12px;
  --ae-space-4: 16px;
  --ae-space-5: 24px;
  --ae-space-6: 32px;
  --ae-space-7: 48px;
  --ae-space-8: 64px;
  --ae-space-9: 96px;
  --ae-space-10: 128px;
  --ae-space-11: 160px;
  --ae-container-wide: 1280px;
  --ae-container-display: 1000px;
  --ae-container-media: 1080px;
  --ae-container-reading: 720px;
  --ae-measure-intro: 620px;
  --ae-measure: 640px;
  --ae-gutter: clamp(20px, 4vw, 64px);
  --ae-grid-columns: 12;
  --ae-grid-gap: 24px;
  --ae-section-space: 128px;
  --ae-header-height: 64px;
  --ae-radius-control: 6px;
  --ae-radius-card: 12px;
  --ae-radius-product: 12px;
  --ae-radius-media: 24px;
  --ae-radius-pill: 999px;
  --ae-shadow-overlay: 0 24px 80px rgba(0, 0, 0, 0.28);
  --ae-fast: 160ms;
  --ae-base: 320ms;
  --ae-enter: 480ms;
  --ae-hero-enter: 560ms;
  --ae-hero-reveal-distance: 12px;
  --ae-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ae-z-header: 40;
  --ae-z-menu: 50;
  --ae-z-dialog: 80;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ae-canvas: #000000;
    --ae-surface: #080808;
    --ae-surface-raised: #101010;
    --ae-ink: #ffffff;
    --ae-text-secondary: rgba(255, 255, 255, 0.72);
    --ae-text-tertiary: rgba(255, 255, 255, 0.5);
    --ae-text-meta: rgba(255, 255, 255, 0.64);
    --ae-text-faint: rgba(255, 255, 255, 0.34);
    --ae-line: rgba(255, 255, 255, 0.14);
    --ae-line-strong: rgba(255, 255, 255, 0.24);
    --ae-media-matte: #000000;
    --ae-scrim: rgba(0, 0, 0, 0.72);
    --ae-overlay: rgba(0, 0, 0, 0.78);
    --ae-focus: #ffffff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ae-canvas: #000000;
  --ae-surface: #080808;
  --ae-surface-raised: #101010;
  --ae-ink: #ffffff;
  --ae-text-secondary: rgba(255, 255, 255, 0.72);
  --ae-text-tertiary: rgba(255, 255, 255, 0.5);
  --ae-text-meta: rgba(255, 255, 255, 0.64);
  --ae-text-faint: rgba(255, 255, 255, 0.34);
  --ae-line: rgba(255, 255, 255, 0.14);
  --ae-line-strong: rgba(255, 255, 255, 0.24);
  --ae-media-matte: #000000;
  --ae-scrim: rgba(0, 0, 0, 0.72);
  --ae-overlay: rgba(0, 0, 0, 0.78);
  --ae-focus: #ffffff;
}

@media (max-width: 1199px) {
  :root,
  :root[data-theme="light"],
  :root[data-theme="dark"] {
    --ae-grid-columns: 8;
    --ae-grid-gap: 16px;
    --ae-section-space: 96px;
  }
}

@media (max-width: 639px) {
  :root,
  :root[data-theme="light"],
  :root[data-theme="dark"] {
    --ae-grid-columns: 4;
    --ae-grid-gap: 8px;
    --ae-section-space: 72px;
  }
}

/* Public pages use a fixed black canvas; reference specimens retain both themes. */
:root[data-theme-fixed="true"] {
  --ae-canvas: #000000;
  --ae-surface: #000000;
  --ae-media-matte: #000000;
}