/*
  Luna Spiegel — design tokens
  Source: docs/tasks/issue-7-initial-site/04-concept-reviewed.md §2

  Self-hosted fonts only (must-fix GDPR requirement from Elli — see
  05-storyboard-reviewed.md, "Bilingual structure"). Every @font-face
  below points at /assets/fonts/*.woff2 shipped inside this repo.
  Never add a <link> to fonts.googleapis.com / fonts.gstatic.com or any
  other third-party font host, including "temporarily".
*/

/* ---------- Self-hosted fonts ---------- */

@font-face {
  font-family: "Fraunces Variable";
  src: url("../fonts/Fraunces-Roman.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces Variable";
  src: url("../fonts/Fraunces-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color ---------- */
  --paper: #faf6f0;
  --ink: #1b1712;
  --night: #181310;
  --night-ink: #f5efe6;
  --brass: #96612b;
  --brass-tint: #d9ae73;
  --rose: #a63d56;
  --rose-tint: #e7a2af;
  --wash-teal: #1f4c4a;
  --paper-brass: #f5eee1;
  --paper-rose: #f6e9ea;

  /*
    --surface-card: dedicated card-surface token, added for the "moonlight"
    theme (#140). Declared here as *exactly* today's --paper value, so the
    default theme does not change by a single pixel — .card and the
    .section--paper-brass / .section--paper-rose card overrides point at
    this token instead of --paper from now on. In the moonlight theme
    --surface-card is repointed to a surface *lighter* than that theme's
    own --paper, which --paper alone can't do once --paper becomes the
    darkest neutral in that theme. See
    docs/tasks/issue-140-dark-blue-color-schema/04-concept-reviewed.md §4.3.
  */
  --surface-card: #faf6f0;

  /*
    --moon: the one genuinely new hue the moonlight theme introduces (the
    switch glyph, the moon-wash light source, and a free hairline/eyebrow
    accent). Declared in both themes so the token always resolves even
    though nothing in the light theme consumes it today. Measured 8.32:1
    on --paper (corrected from an initial 8.5:1 estimate during Elli's
    review — see 04-concept-reviewed.md §4.2).
  */
  --moon: #3b4a63;

  /*
    Decorative-hairline / shadow / wash tokens, added for #140 so the
    moonlight override block below has named tokens to re-point instead of
    literals baked into styles.css. Each is declared here at its *current*
    literal value, byte-identical to what styles.css already hard-coded in
    place, so the default theme is unchanged. These are decorative, not
    SC 1.4.11 boundaries — --ink-rule / --night-rule keep that job.
  */
  --hairline: rgba(27, 23, 18, 0.08);
  --hairline-strong: rgba(27, 23, 18, 0.1);
  --shadow-pop: 0 12px 32px rgba(27, 23, 18, 0.12);
  --wash-a: rgba(150, 97, 43, 0.5);
  --wash-b: rgba(166, 61, 86, 0.5);
  --wash-mid: #241a14;
  --night-dot: rgba(245, 239, 230, 0.06);

  /*
    --brass-deep: a darkened brass used specifically for small mono-set
    eyebrow labels on light backgrounds. Full-strength --brass measures
    ~4.4-4.8:1 depending on the exact light tint behind it — enough on
    plain --paper, but not reliably >=4.5:1 on --paper-rose/--paper-brass
    at the ~13-14px size eyebrows are set at. Verified against the WCAG
    contrast formula (see scripts used during build): --brass-deep clears
    ~6:1 on every light background token above. Not part of Elli's
    original token table — added at implementation to close a small AA
    gap her review flagged as "verify with a contrast checker."
  */
  --brass-deep: #7a4f22;

  /*
    --rose-deep: a darkened rose for small/high-emphasis rose text on light
    backgrounds (--paper). Full-strength --rose measures 5.70:1 on --paper —
    legal AA, but the weakest foreground colour used in the header, and the
    header uses it precisely where it needs to be the *strongest* signal (the
    current-language indicator in .lang-switch, set at 13px). Companion to
    --brass-deep above, same rationale: verified against the WCAG contrast
    formula, --rose-deep clears ~7.7:1 on --paper.
  */
  --rose-deep: #863146;

  /*
    --ink-rule: --ink composited over --paper at 60%, expressed as an opaque
    hex so its contrast is directly checkable instead of hidden behind an
    alpha value. Used for interactive control boundaries (form fields), which
    WCAG 2.2 SC 1.4.11 requires to reach 3:1 against adjacent colours.
    Measured: 4.57:1 on --paper, 4.26:1 on --paper-brass, 4.16:1 on
    --paper-rose. Added for issue #43, where the previous
    rgba(27, 23, 18, 0.25) border resolved to #c2beb8 = 1.72:1 and failed.
    Not for decorative container hairlines — those stay as they are.
  */
  --ink-rule: #74706b;

  /*
    --ink-muted: --ink composited over --paper at 70%, expressed as an opaque
    hex so its contrast is directly checkable instead of hidden behind an
    alpha value. Same rationale as --ink-rule / --night-rule above. Replaces
    an `opacity: 0.7` on a text element — the pattern already removed once
    from .hero__sublede as a silent SC 1.4.3 contrast reducer.
    Measured: 6.35:1 on --paper, 5.93:1 on --paper-brass, 5.79:1 on --paper-rose.
    Light surfaces only; no night counterpart exists yet because nothing needs
    one — add it with its own measured ratio when something does.
  */
  --ink-muted: #5e5a55;

  /*
    --night-rule: --night-ink composited over --night at 38%, expressed as an
    opaque hex so its contrast is directly checkable instead of hidden behind an
    alpha value. Night-side counterpart to --ink-rule above, same rationale.
    Measured 3.29:1 on --night, and 3.08:1 against the brightest pixels of the
    .section--night::after dot texture (~#1f1a16) — clears SC 1.4.11's 3:1 in
    both cases. Added for issue #50, where the previous
    rgba(245, 239, 230, 0.25) border resolved to #4f4a46 = 2.11:1.
    For container boundaries that are the sole shape-defining element of a
    component (e.g. .fact-chip, which has no fill). NOT for the decorative
    night hairlines at 0.12-0.2 alpha (styles.css 1071, 1111, 1248) — those
    re-emphasise boundaries that already exist and stay as they are.
  */
  --night-rule: #6c6761;

  /*
    Contrast rule of thumb (Elli, 04-concept-reviewed.md §2.1):
    full-strength --brass / --rose = large text (>=24px), icons,
    borders, graphic fills, on either background. Small/body text
    always uses the *-tint variant on --night, or the base color on
    --paper. These are Elli's best manual estimates against WCAG
    formulas — re-verify with a contrast checker before public launch.
    Exception (added for issue #23): small, high-emphasis rose text on
    --paper (e.g. an active/current-state indicator) uses --rose-deep,
    not base --rose — base --rose is legible but reads as the weakest
    foreground colour available for that job at small sizes.
  */

  /* ---------- Type families ---------- */
  --font-display: "Fraunces Variable", ui-serif, Georgia, "Iowan Old Style", serif;
  --font-body: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", "JetBrains Mono",
    Consolas, monospace;

  /* ---------- Fluid type scale ---------- */
  --size-h1: clamp(2.25rem, 6vw, 4.5rem);
  --size-h2: clamp(1.5rem, 4vw, 2.5rem);
  --size-h3: clamp(1.125rem, 2.5vw, 1.375rem);

  /* The display-serif line below h2: a short, high-emphasis value line (a
     venue + date, a name) set in Fraunces at body weight. Deliberately fixed,
     not fluid — it is used for single short lines that never need to shrink,
     and --size-h3's clamp would drop it to 18px on phones (a visual change).
     Do NOT reuse --size-h3 here: that is a heading step in the *body* family. */
  --size-display-sm: 1.375rem;   /* 22px */

  /* Small supporting text: hints, captions, small print. Replaces the one-off
     0.85rem in the legal pages' footnote; matches the 0.875rem already used by
     .field-hint and .embed-card__note (those are not repointed in this issue). */
  --size-note: 0.875rem;         /* 14px */

  --size-lede: clamp(1.125rem, 1.5vw, 1.25rem);
  --size-body: 1rem;
  --size-mono: clamp(0.8125rem, 1vw, 0.875rem);

  /* ---------- Layout ---------- */
  --measure: 70ch;
  --wrapper-max: 1280px;
  /* 48–88px. Was clamp(4rem, 10vw, 8rem): up to 256px of empty space
     between two sections made the page look finished at the fold. */
  --section-padding: clamp(3rem, 7vw, 5.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --footer-pad-block: 3.5rem;
  --sticky-cta-pad-block: 0.75rem;
  --sticky-cta-action-height: max(44px, calc(1.65rem + 1.5rem));
  --sticky-cta-height: calc(
    var(--sticky-cta-pad-block) * 2 +
    var(--sticky-cta-action-height) +
    env(safe-area-inset-bottom, 0px)
  );

  /* ---------- Spacing scale ----------
     One ladder, 0.25rem (4px) per step, numbered by multiple: --space-N is
     N × 0.25rem. If a value you need isn't here, it is off the grid — round
     to the nearest step rather than adding an in-between token. Existing
     literals in styles.css are deliberately NOT retrofitted in this issue
     (see 01-concept.md §2); this scale governs new and converted rules. */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */

  /* ---------- Motion ---------- */
  --motion-fast: 250ms;
  --motion-medium: 350ms;
  --motion-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/*
  ---------- "Moonlight" theme (#140) ----------
  Issue: "Add a new color schema with dark blue as the main colour... Her
  name Luna also means Moon in some languages." Activated via
  data-theme="moonlight" on <html> (see assets/js/site.js, initThemeToggle,
  and the blocking no-flash <script> at the top of every page's <head>).

  Naming contract — read this once before touching a token above or below:
  these names encode a *role*, not a lightness. There are two themes (day
  and moonlight). --paper is the page's own surface in both: day warm
  off-white, moonlight midnight blue.
    --paper   = the page's own surface. Light theme: warm off-white.
                Moonlight: midnight blue.
    --ink     = body text on --paper. Light theme: near-black. Moonlight:
                pale silver.
    --*-deep  = the variant guaranteed AA for *small* text on the --paper
                surface family. Light theme: darker than the base.
                Moonlight: lighter. The name means "high-emphasis", not
                "dark" — --brass-deep holding a *lighter* colour than
                --brass below is correct, not a bug.
    --*-tint  = the variant guaranteed AA for *small* text on --night.
                Lighter than the base in both themes.
  Full reasoning:
  docs/tasks/issue-140-dark-blue-color-schema/04-concept-reviewed.md §4.1.

  This block re-points the *existing* semantic tokens rather than
  introducing a parallel --moonlight-* namespace, so styles.css needs
  almost no changes to support it (04-concept-reviewed.md §4.1). All
  ratios below are WCAG 2.2 measured against the values in this block —
  see 04-concept-reviewed.md §5 for the full contrast matrix.
*/
[data-theme="moonlight"] {
  color-scheme: dark; /* not cosmetic — flips native scrollbars, form-control
                          chrome, the accent-color checkbox rendering, and
                          spellcheck/autofill styling to their dark variants.
                          See 04-concept-reviewed.md §6.4. */

  /* Surfaces — a four-step night sky */
  --paper: #1b2941; /* page surface: midnight blue, the "main colour" the issue asks for */
  --paper-brass: #22314b; /* warm-lifted band (was the brass-tinted paper), 1.12 vs --paper */
  --paper-rose: #262d4b; /* violet-lifted band (was the rose-tinted paper), 1.08 vs --paper */
  --night: #0a1120; /* deepest sky: hero, fact strip, conversion band, footer, sticky CTA, lang gate */
  --surface-card: #26354f; /* raised card surface, 1.06-1.18 above every band it lands on */

  /* Text */
  --ink: #e6ecf8; /* body on the paper family — 12.30:1 on --paper */
  --night-ink: #edf1fb; /* body on --night — 16.68:1 */
  --ink-muted: #a9b6cc; /* muted/small print — 7.12:1 on --paper, 5.39:1 on the wash worst case */

  /* Boundaries (SC 1.4.11, 3:1 targets — never used for text in this theme) */
  --ink-rule: #7c8ca8; /* 4.29:1 on --paper, 3.24:1 on the wash worst case */
  --night-rule: #8894aa; /* 6.16:1 on --night */

  /* Brand accents, lifted for a dark ground. Brass stays brass and rose
     stays rose — they're the brand — they just move up in luminance
     because that's what a dark ground requires. */
  --brass: #c9964f; /* large text / icons / borders / graphic fills only */
  --brass-tint: #e8c48e; /* small text on --night — 11.42:1 */
  --brass-deep: #e2bc85; /* small text on the paper family — 8.17:1 on --paper */
  --rose: #efa3b7; /* CTA fill, focus ring, error/state colour — 7.36:1 on --paper */
  --rose-tint: #f3bcca; /* small rose text on --night — 11.54:1 */
  --rose-deep: #f4c2ce; /* the strongest rose: current-page / current-language marker */

  /* The one new hue this theme introduces */
  --moon: #c6d6ee; /* cold moonlight silver-blue — 9.90:1 on --paper */

  /*
    Decorative hairlines / shadow / wash, re-pointed for a dark ground.
    These stay well clear of --ink-rule / --night-rule's SC 1.4.11 job —
    they're texture, not boundaries, so there's no compliance threshold to
    hit here, only "as barely-there as the light theme's own hairlines".
  */
  --hairline: rgba(230, 236, 248, 0.14);
  --hairline-strong: rgba(230, 236, 248, 0.2);
  --shadow-pop: 0 12px 32px rgba(2, 6, 14, 0.55);
  --wash-a: rgba(160, 190, 235, 0.34); /* the moon itself: cold, soft, off-centre light source */
  --wash-b: rgba(190, 120, 150, 0.2); /* faint rose ember, so the second brand accent stays in the atmosphere */
  --wash-mid: #131f3a; /* brass-wash mid stop: the sky warms marginally toward the middle of the band */
  --night-dot: rgba(230, 236, 248, 0.06); /* Screen Dot texture in the theme's own hue */
}