/* Smartout brand / design system — shared by the landing and the static legal
   pages so they live in one night-desert world. Tokens + a small set of
   components (night background, parchment card, buttons, star-marked headings,
   type scale). The landing mirrors these tokens in its Tailwind @theme. */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap");

:root {
  /* Night sky */
  --sky-900: #0b0d2b;
  --sky-800: #14163a;
  --sky-700: #221a4e;
  --sky-600: #322465;
  /* Desert ember horizon */
  --ember: #f97316;
  --ember-deep: #b23c12;
  /* Parchment (lantern-lit sand cards) */
  --sand: #fbf3e0;
  --sand-hi: #fffaf0;
  --sand-edge: #ecd9b0;
  /* Starlight + ink */
  --star: #ffd97a;
  --star-soft: #fff0c2;
  --ink: #2a1d13;
  --ink-soft: #6b5942;
  --cream: #fdf1d6; /* text on night */
  --cream-soft: #c9c3e6;
  /* Subject stars (match the game) */
  --tafel: #fb923c;
  --sommen: #a3e635;
  --klok: #f472b6;
  --lezen: #38bdf8;

  --font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;

  --radius: 1.4rem;
  --shadow-card: 0 18px 44px rgb(0 0 0 / 0.42);
  --maxw: 72rem;
}

/* ── Night background: deep sky + a warm ember glow low on the page ── */
.night {
  background:
    radial-gradient(130% 80% at 78% -8%, rgba(120, 84, 220, 0.30) 0%, rgba(120, 84, 220, 0) 46%),
    radial-gradient(120% 55% at 50% 118%, rgba(249, 115, 22, 0.28) 0%, rgba(249, 115, 22, 0) 55%),
    linear-gradient(180deg, var(--sky-900) 0%, var(--sky-800) 42%, var(--sky-700) 100%);
  background-attachment: fixed;
}

/* ── Parchment card ── */
.card {
  background: linear-gradient(180deg, var(--sand-hi), var(--sand));
  color: var(--ink);
  border: 1px solid var(--sand-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600;
  border-radius: 999px; border: 0; cursor: pointer;
  padding: 0.85rem 1.6rem; font-size: 1.05rem;
  color: #fff; background: var(--ember);
  box-shadow: 0 5px 0 var(--ember-deep), 0 12px 22px rgb(0 0 0 / 0.35);
  transition: transform 0.06s ease, filter 0.12s ease;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ember-deep), 0 5px 12px rgb(0 0 0 / 0.3); }
.btn--ghost {
  background: transparent; color: var(--cream);
  box-shadow: inset 0 0 0 1.5px rgba(255, 217, 122, 0.55);
}
.btn--ghost:active { transform: none; }

/* ── Eyebrow + star-marked headings (the constellation motif as structure) ── */
.eyebrow {
  font-family: var(--font-body); font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.72rem; color: var(--star);
}
.star-h {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 700;
}
.star-h::before {
  content: ""; flex: 0 0 auto;
  width: 0.85rem; height: 0.85rem;
  background: var(--star);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Star list bullets */
.star-list { list-style: none; padding: 0; margin: 0; }
.star-list li { position: relative; padding-left: 1.6rem; margin: 0.4rem 0; }
.star-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.7rem; height: 0.7rem; background: var(--star);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Fill-in placeholder (for the operator to complete) */
.fill {
  background: #fde68a; color: #713f12;
  border-radius: 0.4rem; padding: 0 0.4rem; font-weight: 700;
}

/* ── Legal pages (privacy / terms) — readable content on a parchment card ── */
.legal { font-family: var(--font-body); color: var(--ink); line-height: 1.7; }
.legal .lede { color: var(--ink-soft); font-size: 1.05rem; margin-top: 0; }
.legal h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.3rem); margin: 0 0 0.3rem;
}
.legal h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.2rem; margin: 2rem 0 0.4rem; color: var(--ink);
}
.legal a { color: #1d6fa5; font-weight: 700; }
.legal ul { padding-left: 1.5rem; margin: 0.4rem 0; }
.legal li { margin: 0.3rem 0; }
.legal .meta { color: var(--ink-soft); font-size: 0.9rem; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .night { background-attachment: scroll; }
}