/* ============================================================
   Mikewavs — design tokens
   Imported from the Mikewavs design system
   (_ds/mikewavs-design-system-d6223dd4-e25c-4eea-aca5-67182c7ed263):
   tokens/fonts.css + tokens/colors.css + tokens/typography.css.

   Trimmed to what this page set needs:
   - Volda Sans (body/UI) in 5 weights, plus Mortend Bold/Extrabold for the
     interior-page headings. Mortend Regular and the Outline cut aren't used
     by any page here, so they aren't bundled.
   - The DS type scale and line-height tokens are omitted; these pages size
     type directly, matching the source components.
   - --mw-font-mono drops the DS's leading "Space Mono" (no webfont is
     bundled for it) so the stack starts at Courier New, which is what the
     source components asked for inline.
   ============================================================ */

/* ---- Mortend (display) — headings on the interior pages ---- */
@font-face {
  font-family: "Mortend";
  src: url("../assets/fonts/Mortend-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mortend";
  src: url("../assets/fonts/Mortend-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Volda Sans (body / UI) ---- */
@font-face {
  font-family: "Volda Sans";
  src: url("../assets/fonts/VoldaSans-Regular.woff2") format("woff2"),
       url("../assets/fonts/VoldaSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Volda Sans";
  src: url("../assets/fonts/VoldaSans-Italic.woff2") format("woff2"),
       url("../assets/fonts/VoldaSans-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Volda Sans";
  src: url("../assets/fonts/VoldaSans-Medium.woff2") format("woff2"),
       url("../assets/fonts/VoldaSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Volda Sans";
  src: url("../assets/fonts/VoldaSans-SemiBold.woff2") format("woff2"),
       url("../assets/fonts/VoldaSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Volda Sans";
  src: url("../assets/fonts/VoldaSans-Bold.woff2") format("woff2"),
       url("../assets/fonts/VoldaSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Base palette ---- */
  --mw-background:     #080810; /* page canvas — one step darker than primary */
  --mw-primary:        #0C0C14; /* calibrated depth — near-black, cold undertone */
  --mw-surface:        #1E1E2A; /* elevated surface — cards, modals, panels */
  --mw-accent:         #8141F7; /* electric purple — marks, CTAs, labels */
  --mw-secondary:      #B8956A; /* cognac / earned brass — headlines, decorative */
  --mw-neutral-light:  #E6E4DD; /* warm off-white — primary body text on dark */

  /* ---- Accent ramp (derived from #8141F7) ---- */
  --mw-accent-hover:   #9258f8; /* lighter — hover on dark */
  --mw-accent-press:   #6d31d6; /* darker — pressed */
  --mw-accent-soft:    rgba(129, 65, 247, 0.14); /* tint fills, hovers */
  --mw-accent-line:    rgba(129, 65, 247, 0.30); /* hairline borders, dividers */

  /* Accent as TEXT on the canvas. The base #8141F7 measures 3.83:1 against
     #080810 — below the 4.5:1 needed for normal text, and it was being used
     for the eyebrow label on every interior page. This lightened cut is
     4.74:1. Use --mw-accent for fills, borders and marks; this for type. */
  --mw-accent-text:    #9159F8;

  /* ---- Secondary ramp ---- */
  --mw-secondary-soft: rgba(184, 149, 106, 0.14);
  --mw-secondary-line: rgba(184, 149, 106, 0.28);

  /* ---- Neutral ramp on dark ----
     Measured against the #080810 canvas. The muted tier used to sit one
     notch too dim across the board: faint was 3.87:1 and disabled 2.27:1,
     both under the 4.5:1 that captions, labels and meta text need. Raised
     to 5.59:1 and 3.61:1 respectively.

     --mw-text-disabled still fails 4.5:1 by design — it is only for things
     that carry no information (the hatched image-slot label). Anything a
     reader actually needs, including the footer line and the "optional"
     field marker, uses --mw-text-faint. */
  --mw-text:           #E6E4DD;                       /* primary text — 15.7:1 */
  --mw-text-muted:     rgba(230, 228, 221, 0.72);     /* secondary text — 8.2:1 */
  --mw-text-faint:     rgba(230, 228, 221, 0.58);     /* captions, meta — 5.6:1 */
  --mw-text-disabled:  rgba(230, 228, 221, 0.44);     /* decorative only — 3.6:1 */
  --mw-hairline:       rgba(230, 228, 221, 0.10);     /* default border on dark */
  --mw-hairline-strong:rgba(230, 228, 221, 0.18);

  /* ---- Semantic ---- */
  --mw-success:        #5BC98A;
  --mw-warning:        #E0A04B;
  --mw-danger:         #E5604D;
  --mw-info:           var(--mw-accent);

  /* ---- Families ---- */
  --mw-font-display: "Mortend", "Arial Narrow", sans-serif;
  --mw-font-body:    "Volda Sans", system-ui, -apple-system, sans-serif;
  --mw-font-mono:    "Courier New", ui-monospace, monospace;

  /* ---- Weights ---- */
  --mw-weight-body:      400;
  --mw-weight-medium:    500;
  --mw-weight-semibold:  600;
  --mw-weight-bold:      700;

  /* ---- Letter spacing ---- */
  --mw-tracking-label:   1.5px;

  /* ---- Canvas veil ----
     Flat darkening pass over the animated canvas. It sits above the blobs and
     below the content, so raising it deepens the background without touching
     text contrast — every ratio in the neutral ramp above stays as measured.
     Turn it off with `transparent`. */
  --mw-veil: rgba(0, 0, 0, 0.05);

  /* ---- Motion ----
     The site previously used a single `0.18s ease` on every transition, from
     a 4px arrow nudge to a full-card lift. Uniform timing is what makes an
     interface feel generic: a short move finished in 180ms reads sluggish,
     and a long one finished in 180ms reads abrupt.

     The rule here is that duration tracks distance travelled. Pick the token
     by how far the thing actually moves, not by how important it is.

       fast  — under ~6px, or a pure colour change      (arrows, numerals)
       base  — 6–16px, the common interactive case      (titles, cards, tints)
       slow  — entrances and anything crossing the page (reveals, transitions)

     Two curves. --mw-ease is symmetric-ish and used for interaction, where
     the element must feel attached to the pointer. --mw-ease-out decelerates
     hard and is used for entrances, where the element should arrive settled
     rather than coast. */
  --mw-dur-fast:  120ms;
  --mw-dur:       220ms;
  --mw-dur-slow:  460ms;
  --mw-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --mw-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --mw-stagger:   45ms;  /* per-item delay in sequenced reveals */
}

/* Collapse every duration at the source rather than unsetting animations
   one by one downstream. Individual components still opt out of transforms
   in their own reduced-motion blocks; this guarantees that nothing anywhere
   can animate for a perceptible length of time. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mw-dur-fast: 1ms;
    --mw-dur:      1ms;
    --mw-dur-slow: 1ms;
    --mw-stagger:  0ms;
  }
}