@font-face {
  font-family: "Sora";
  src: url("./assets/Sora-SemiBold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Montserrat";
  src: url("./assets/Montserrat-Medium.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

:root {
  color-scheme: light dark;

  --core-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --core-font-body: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  /* Taken from the post-intro app: 680px frame, 20px viewport gutters, 720px breakpoint. */
  --core-content-max: 680px;
  --core-page-gutter: 20px;
  --core-hero-width: 100%;
  --core-hero-ratio: 1.86;

  /* Binks-style elliptical asymmetry, normalized so it survives every viewport. */
  --core-shape-hero: 11% 16% 18% 12% / 29% 36% 31% 34%;

  /* Cargo's well treatment, enlarged without adding a border or outer elevation. */
  --core-depth-inset-hero:
    inset 0 clamp(12px, 1.8vw, 24px) clamp(22px, 3.5vw, 46px) clamp(-20px, -1.5vw, -10px) rgba(31, 18, 47, 0.16),
    inset clamp(8px, 1.15vw, 16px) 0 clamp(18px, 2.6vw, 34px) clamp(-18px, -1.2vw, -8px) rgba(31, 18, 47, 0.09),
    inset 0 -1px 0 rgba(255, 255, 255, 0.70);

  --core-bg: #f4f1f9;
  --core-well-fill: #ebe6f4;
  --core-ink: #1b1326;
  --core-ink-2: #4d4460;
  --core-mesh-glow: rgba(133, 90, 192, 0.12);
  --core-mesh-glow-2: rgba(243, 29, 119, 0.07);
  --core-grid-dot: rgba(40, 28, 60, 0.06);
  --core-gradient: linear-gradient(118deg, #5e2f93 0%, #e0156b 100%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --core-bg: #0c0a11;
  --core-well-fill: #181321;
  --core-ink: #f5f2fb;
  --core-ink-2: #bcb4cf;
  --core-mesh-glow: rgba(162, 116, 230, 0.16);
  --core-mesh-glow-2: rgba(243, 29, 119, 0.10);
  --core-grid-dot: rgba(255, 255, 255, 0.045);
  --core-gradient: linear-gradient(118deg, #b78ff0 0%, #f53f8e 100%);
  --core-depth-inset-hero:
    inset 0 clamp(14px, 2vw, 28px) clamp(24px, 3.8vw, 52px) clamp(-21px, -1.6vw, -10px) rgba(0, 0, 0, 0.48),
    inset clamp(9px, 1.25vw, 18px) 0 clamp(18px, 2.8vw, 38px) clamp(-18px, -1.2vw, -8px) rgba(0, 0, 0, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --core-bg: #0c0a11;
    --core-well-fill: #181321;
    --core-ink: #f5f2fb;
    --core-ink-2: #bcb4cf;
    --core-mesh-glow: rgba(162, 116, 230, 0.16);
    --core-mesh-glow-2: rgba(243, 29, 119, 0.10);
    --core-grid-dot: rgba(255, 255, 255, 0.045);
    --core-gradient: linear-gradient(118deg, #b78ff0 0%, #f53f8e 100%);
    --core-depth-inset-hero:
      inset 0 clamp(14px, 2vw, 28px) clamp(24px, 3.8vw, 52px) clamp(-21px, -1.6vw, -10px) rgba(0, 0, 0, 0.48),
      inset clamp(9px, 1.25vw, 18px) 0 clamp(18px, 2.8vw, 38px) clamp(-18px, -1.2vw, -8px) rgba(0, 0, 0, 0.24),
      inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  }
}

@media (max-width: 719px) {
  :root {
    --core-hero-ratio: 1.64;
  }
}