/* ============================================================
   Design tokens — ANAMA marketing.

   The system is extracted from Luke Hoban's client sites
   (Reome, KÖPPEN, Hyeja, LESSE, Baina) and applied in the ANAMA
   light-Rams language. See README.md for the full description.

   Rules this file encodes:
   · one disciplined type scale — 10/12/14/20/28/40/60, nothing off it
   · earned colour only: green = ahead, red = act, Klein blue =
     money at work. Chrome stays monochrome.
   ============================================================ */

@font-face {
  font-family: "Rhymes Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/rhymes-display-medium.woff2") format("woff2");
}

:root {
  /* --- the scale. Nothing in this build may sit off it. --- */
  --t-10: 10px;
  --t-12: 12px;
  --t-14: 14px;
  --t-20: 20px;
  --t-28: 28px;
  --t-40: 40px;
  --t-60: 60px;

  /* --- grid: 12 columns, 8px gutters, 8px page margin --- */
  --cols: 12;
  --gutter: 8px;
  --margin: 8px;

  /* --- reading measure: policed on all running text --- */
  --measure: 34em;
  --measure-tight: 32em;

  /* --- vertical rhythm. Whitespace lives on this axis. --- */
  --space-xl: 160px;
  --space-l: 64px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- light: the default ground --- */
:root {
  --ground: #ffffff;
  --ink: #15171b;
  --ink-strong: #0b0d11;
  --secondary: #464b54;
  --muted: #767b84;
  --hairline: #dfe1e6;
  --rule: #b5b9c1;
  --accent: #002fa7;
  --signal: #bb3a26;
  --good: #1e7a3f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1a1a18;
    --ink: #eceae4;
    --ink-strong: #f7f6f1;
    --secondary: #b3b1a9;
    --muted: #8b897f;
    --hairline: #31302c;
    --rule: #4a4942;
    --accent: #8fa4ff;
    --signal: #e06b52;
    --good: #62bd85;
  }
}

/* Explicit theme wins over the media query in both directions. */
:root[data-theme="light"] {
  --ground: #ffffff;
  --ink: #15171b;
  --ink-strong: #0b0d11;
  --secondary: #464b54;
  --muted: #767b84;
  --hairline: #dfe1e6;
  --rule: #b5b9c1;
  --accent: #002fa7;
  --signal: #bb3a26;
  --good: #1e7a3f;
}

:root[data-theme="dark"] {
  --ground: #1a1a18;
  --ink: #eceae4;
  --ink-strong: #f7f6f1;
  --secondary: #b3b1a9;
  --muted: #8b897f;
  --hairline: #31302c;
  --rule: #4a4942;
  --accent: #8fa4ff;
  --signal: #e06b52;
  --good: #62bd85;
}

@media (max-width: 800px) {
  :root {
    --space-xl: 88px;
  }
}