/* Lycoris site layer: brand palette and a few safe tweaks on top of DevLab.
   Theme markup, downloads and components stay owned by the submodule. */

:root,
:root[data-theme="light"] {
  --color-bg: #fffafb;
  --color-surface: #f8eef1;
  --color-fg: #20171a;
  --color-muted: #756269;
  --color-border: #ead9df;
  --color-accent: #b81632;
  --color-accent-contrast: #ffffff;
  --color-code-bg: #f4e8ec;
  --color-code-fg: #2b171d;
  --color-pre-bg: #271a1e;
  --color-pre-fg: #f9eef1;
  /* Dark code cards in the light theme need dark syntax tokens. */
  --color-pre-scheme: dark;
  --shadow-color: 64 20 31;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wide-width: 94rem;
  --header-width: 94rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0c090a;
    --color-surface: #151012;
    --color-fg: #f7eef0;
    --color-muted: #b7a2a9;
    --color-border: #332229;
    --color-accent: #f0445f;
    --color-accent-contrast: #18070b;
    --color-code-bg: #21171a;
    --color-code-fg: #f8edf0;
    --color-pre-bg: #080607;
    --color-pre-fg: #f8edf0;
    --color-pre-scheme: dark;
    --shadow-color: 0 0 0;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0c090a;
  --color-surface: #151012;
  --color-fg: #f7eef0;
  --color-muted: #b7a2a9;
  --color-border: #332229;
  --color-accent: #f0445f;
  --color-accent-contrast: #18070b;
  --color-code-bg: #21171a;
  --color-code-fg: #f8edf0;
  --color-pre-bg: #080607;
  --color-pre-fg: #f8edf0;
  --color-pre-scheme: dark;
  --shadow-color: 0 0 0;
}

.site-header {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(18px) saturate(125%);
}

.site-logo {
  font-size: 1.02rem;
  letter-spacing: -0.012em;
}

.site-logo-mark {
  width: 2.2rem;
  height: 2.2rem;
  filter: drop-shadow(0 0 .65rem color-mix(in srgb, var(--color-accent) 28%, transparent));
}

.hero-wide {
  border: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 18% 15%, color-mix(in srgb, var(--color-accent) 17%, transparent), transparent 30%),
    linear-gradient(145deg, var(--color-surface-subtle), var(--color-surface-raised) 56%, var(--color-surface-strong));
}

.hero-wide::before {
  opacity: .2;
}

.hero-title {
  letter-spacing: -0.045em;
}

.hero-with-media .hero-title {
  max-width: 9ch;
}

.hero-media {
  padding-block-start: 0;
  border-color: color-mix(in srgb, var(--color-border) 76%, var(--color-accent));
  background: #070506;
}

.hero-media::before {
  display: none;
}

.hero-media img {
  border: 0;
}

.home-page .feature-card {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
  .home-page .feature-card:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--color-border) 60%, var(--color-accent)),
      0 .8rem 2rem rgb(var(--shadow-color) / 12%);
  }
}

.button-primary {
  box-shadow: 0 .45rem 1.4rem color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.content a:not(.button) {
  text-decoration-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  text-underline-offset: .18em;
}

::selection {
  background: color-mix(in srgb, var(--color-accent) 32%, transparent);
}