/* What every page on nacrelearning.com shares: the self-hosted fonts, the
   "Inside the shell" material, the wordmark and the main action slab.
   Values come from the app (lib/palettes.ts: Pearl morning and Deep sea;
   docs/brand.md). Fonts are OFL, served from /fonts so no page makes a
   third-party request. */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-VF.woff2') format('woff2-variations'), url('/fonts/Fraunces-VF.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-Italic-VF.woff2') format('woff2-variations'), url('/fonts/Fraunces-Italic-VF.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/AtkinsonNext-VF.woff2') format('woff2-variations'), url('/fonts/AtkinsonNext-VF.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/AtkinsonNext-Italic-VF.woff2') format('woff2-variations'), url('/fonts/AtkinsonNext-Italic-VF.woff2') format('woff2');
  font-weight: 200 800; font-style: italic; font-display: swap;
}

:root {
  --n-base: #EFEBF3;
  --n-glow-1: rgba(244, 201, 216, 0.50);
  --n-glow-2: rgba(191, 231, 228, 0.46);
  --n-glow-3: rgba(217, 205, 243, 0.55);
  --n-grain-blend: multiply;
  --n-slab-1: #0E7480; --n-slab-2: #0B6670;
  --n-plate: rgba(255, 255, 255, 0.55);
  --n-plate-hi: rgba(255, 255, 255, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-base: #0A0E1C;
    --n-glow-1: rgba(99, 180, 190, 0.22);
    --n-glow-2: rgba(150, 120, 210, 0.16);
    --n-glow-3: rgba(220, 140, 180, 0.11);
    --n-grain-blend: screen;
    --n-slab-1: #17808A; --n-slab-2: #0E6670;
    --n-plate: rgba(255, 255, 255, 0.055);
    --n-plate-hi: rgba(255, 255, 255, 0.08);
  }
}
:root[data-theme="dark"] {
  --n-base: #0A0E1C;
  --n-glow-1: rgba(99, 180, 190, 0.22);
  --n-glow-2: rgba(150, 120, 210, 0.16);
  --n-glow-3: rgba(220, 140, 180, 0.11);
  --n-grain-blend: screen;
  --n-slab-1: #17808A; --n-slab-2: #0E6670;
  --n-plate: rgba(255, 255, 255, 0.055);
  --n-plate-hi: rgba(255, 255, 255, 0.08);
}

/* The material: three soft glows that drift very slowly, and fine grain.
   It sits behind everything (html::before and ::after, z-index -1). */
html::before, html::after {
  content: ""; position: fixed; pointer-events: none; z-index: -1;
}
html::before {
  inset: -12vmax;
  background:
    radial-gradient(42vmax 36vmax at 18% 22%, var(--n-glow-1), transparent 70%),
    radial-gradient(40vmax 34vmax at 84% 38%, var(--n-glow-2), transparent 70%),
    radial-gradient(46vmax 38vmax at 42% 88%, var(--n-glow-3), transparent 70%);
  animation: n-drift 80s ease-in-out infinite alternate;
}
html::after {
  inset: 0;
  opacity: .05;
  mix-blend-mode: var(--n-grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
@keyframes n-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(3vmax, -2vmax, 0) rotate(6deg); }
  100% { transform: translate3d(-2vmax, 2.5vmax, 0) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { html::before { animation: none; } }

/* The wordmark: live text, Fraunces Light, SOFT 100 and the wonky leaning n. */
.word {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-optical-sizing: auto;
  font-weight: 330; font-size: 26px; line-height: 1; letter-spacing: .14em;
  text-decoration: none; color: inherit; padding-block: 8px; display: inline-block;
}
@media (max-width: 760px) { .word { font-size: 22px; } }

/* The main action: the app's slab. Teal, white text, a light top edge. */
.slab {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 18px; border: 0;
  background: linear-gradient(180deg, var(--n-slab-1), var(--n-slab-2));
  color: #FFFFFF; text-decoration: none; cursor: pointer;
  font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -14px rgba(11, 102, 112, .7);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.slab svg { width: 12px; height: 12px; transition: transform .2s ease; }
.slab:hover { filter: brightness(1.06); }
.slab:hover svg { transform: translateX(3px); }
.slab:active { transform: scale(.98); }
.slab:focus-visible { outline: 2px solid var(--n-slab-1); outline-offset: 3px; }