/*
  NOCTURNE — aurora-noir design system
  Three-layer tokens: primitive (seed) → semantic → component.
  Literal colour values live ONLY on --seed-* lines.
*/

:root {
  /* ── primitive: colour ─────────────────────────────── */
  --seed-black: #05050b;
  --seed-ink: #f4f1ff;
  --seed-muted: #a49cbe;
  --seed-surface: #12101f;
  --seed-primary: #a66cff;
  --seed-accent: #4fe3d0;
  --seed-gold: #e7c79b;
  --seed-white: #ffffff;

  /* ── primitive: scale ──────────────────────────────── */
  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 24px;
  --primitive-space-6: 32px;
  --primitive-space-7: 48px;
  --primitive-space-8: 64px;
  --primitive-radius-sm: 8px;
  --primitive-radius-md: 14px;
  --primitive-radius-lg: 22px;
  --primitive-duration-fast: 150ms;
  --primitive-duration-normal: 240ms;

  /* ── nudge seeds (safe to patch) ───────────────────── */
  --seed-radius-multiplier: 1;
  --seed-gap: 1;
  --seed-motion: 1;
  --hero-image: url("assets/anime-hero-01.jpg");

  /* ── semantic: colour ──────────────────────────────── */
  --color-bg: var(--seed-black);
  --color-surface: var(--seed-surface);
  --color-fg: var(--seed-ink);
  --color-muted: var(--seed-muted);
  --color-primary: var(--seed-primary);
  --color-accent: var(--seed-accent);
  --color-gold: var(--seed-gold);
  --color-line: color-mix(in oklab, var(--seed-white) 10%, transparent);
  --color-line-strong: color-mix(in oklab, var(--seed-white) 20%, transparent);
  --color-glass: color-mix(in oklab, var(--seed-white) 6%, transparent);
  --color-glass-strong: color-mix(in oklab, var(--seed-white) 12%, transparent);
  --color-scrim: color-mix(in oklab, var(--seed-black) 76%, transparent);
  --color-scrim-soft: color-mix(in oklab, var(--seed-black) 42%, transparent);
  --color-primary-soft: color-mix(in oklab, var(--seed-primary) 22%, transparent);
  --color-accent-soft: color-mix(in oklab, var(--seed-accent) 18%, transparent);
  --color-gold-soft: color-mix(in oklab, var(--seed-gold) 18%, transparent);

  /* ── semantic: type ────────────────────────────────── */
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
  --font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;
  --fs-display: clamp(32px, 4.6vw, 56px);
  --fs-h2: clamp(22px, 2.1vw, 30px);
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-caption: 11px;

  /* ── semantic: space / radius / motion ─────────────── */
  --spacing-xs: calc(var(--primitive-space-1) * var(--seed-gap));
  --spacing-sm: calc(var(--primitive-space-2) * var(--seed-gap));
  --spacing-md: calc(var(--primitive-space-3) * var(--seed-gap));
  --spacing-lg: calc(var(--primitive-space-4) * var(--seed-gap));
  --spacing-xl: calc(var(--primitive-space-5) * var(--seed-gap));
  --spacing-2xl: calc(var(--primitive-space-6) * var(--seed-gap));
  --radius-sm: calc(var(--primitive-radius-sm) * var(--seed-radius-multiplier));
  --radius-md: calc(var(--primitive-radius-md) * var(--seed-radius-multiplier));
  --radius-lg: calc(var(--primitive-radius-lg) * var(--seed-radius-multiplier));
  --radius-pill: 999px;
  --duration-fast: calc(var(--primitive-duration-fast) * var(--seed-motion));
  --duration-normal: calc(var(--primitive-duration-normal) * var(--seed-motion));
  --shadow-sm: 0 2px 8px color-mix(in oklab, var(--seed-black) 55%, transparent);
  --shadow-md: 0 18px 48px color-mix(in oklab, var(--seed-black) 62%, transparent);

  /* ── component tokens ──────────────────────────────── */
  --button-bg: var(--color-primary);
  --button-fg: var(--seed-black);
  --button-border: transparent;
  --button-bg-hover: color-mix(in oklab, var(--color-primary) 82%, var(--color-fg));
  --card-bg: var(--color-surface);
  --card-border: var(--color-line);
  --input-bg: var(--color-glass);
  --input-border: var(--color-line);
  --input-fg: var(--color-fg);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-fg); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── components ──────────────────────────────────────── */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 44px;
  padding: 0 var(--spacing-lg);
  border: 1px solid var(--button-border);
  border-radius: var(--radius-pill);
  background: var(--button-bg);
  color: var(--button-fg);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.ds-button:hover { background: var(--button-bg-hover); }
.ds-button:active { transform: translateY(1px); }
.ds-button:disabled { opacity: 0.45; cursor: not-allowed; }
.ds-button[data-loading="true"] { color: transparent; position: relative; }
.ds-button[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-fg);
  border-top-color: transparent;
  animation: ds-spin calc(700ms * var(--seed-motion)) linear infinite;
}

.ds-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ds-input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--spacing-md);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-pill);
  background: var(--input-bg);
  color: var(--input-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.ds-input::placeholder { color: var(--color-muted); }
.ds-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}