/* ───────────────────────────────────────────────────────────────────────
   Meridian — foundation CSS for the Atiom Directory
   Tokens copied from Atiom-Brain/design/meridian/tokens-cheatsheet.md (v4.1).
   Fonts self-hosted (no Google Fonts dependency).
   Rules honoured: indigo is the sole interactive colour; copper editorial only;
   three-tier type (Fraunces display / Mona Sans structural / DM Sans body);
   dark leads, cream sustains; never raw hex in components — always a token.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Self-hosted fonts ── */
@font-face {
  font-family: "Mona Sans VF";
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fonts/MonaSansVF.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/fraunces-normal-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/dmsans-normal-latin.woff2") format("woff2");
}

:root {
  /* ── Primary Indigo (THE interactive colour) ── */
  --primary-indigo: #6c4fe0;
  --primary-light: #8b72f0;
  --primary-pale: #f0ecff;
  --text-indigo: #4e35b1;

  /* ── Copper (editorial only — NEVER buttons/CTAs) ── */
  --copper: #d4956a;
  --copper-light: #e8b892;
  --copper-deep: #b87a4e;

  /* ── Warm Neutrals (working voice — cream sustains) ── */
  --cream: #faf7f2;
  --stone: #f0ede6;
  --sand: #e4dfd5;
  --charcoal: #2a2622;
  --text-mid: #6b6158;
  --text-light: #9a9083;

  /* ── Dark Mode (premium voice — dark leads) ── */
  --deep: #151020;
  --indigo-dark: #1e1538;

  /* ── Surface-keyed text (defaults = on-light) ── */
  --tx: #6b6158;
  --tx-strong: #2a2622;
  --tx-mute: #9a9083;

  /* ── Functional ── */
  --success: #34b87a;
  --warning: #d4a023;
  --error: #c75b4a;
  --info: #6c4fe0;

  /* ── Typography — Three-Tier System ── */
  --font-display: "Fraunces", Georgia, "Garamond", serif;
  --font-structural: "Mona Sans VF", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-body: "DM Sans", "Calibri", "Segoe UI", system-ui, sans-serif;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-state: 200ms;
  --dur-reveal: 500ms;
}

/* Surface text trios */
[data-surface="dark"] {
  --tx: rgba(250, 247, 242, 0.66);
  --tx-strong: #faf7f2;
  --tx-mute: rgba(250, 247, 242, 0.5);
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tx);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-structural);
  font-weight: 700;
  color: var(--tx-strong);
  margin: 0;
  line-height: 1.2;
}

a {
  color: var(--text-indigo);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Overline (section label) — DM Sans 600, tracked, uppercase */
.overline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-indigo);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}