/* ==========================================================================
   Twin Orbit - design tokens
   --------------------------------------------------------------------------
   Every brand decision lives here: the game's own colours, fonts and soft,
   rounded look. Change these and the whole site follows.
   ========================================================================== */

/* Typefaces (self-hosted, SIL Open Font License; see assets/fonts) ----------
   Titan One for headings, as in the game. "Titan" is a reserved name, and the
   font is only subsetted, not changed. Grandstander Bold for friendly text. */
@font-face {
  font-family: "Titan One";
  src: url("../fonts/titan-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Grandstander";
  src: url("../fonts/grandstander-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Colour: the game's palette */
  --color-ink: #2c1d5e;             /* text on light, footer */
  --color-deep: #3a2a86;            /* header, night sky */
  --color-grape: #5a3fc0;           /* links, accents */
  --color-lilac: #b49cff;
  --color-coral: #ff7a8a;
  --color-lemon: #ffd94d;           /* buttons, highlights */
  --color-lemon-deep: #e89a22;      /* button lip */
  --color-mint: #6fe8bf;
  --color-sky: #7fd4ff;             /* focus ring on dark */
  --color-pink: #f2a0bf;
  --color-page: #fff6e8;            /* page background */
  --color-card: #ffffff;
  --color-text: #2c1d5e;
  --color-muted: #5b4c94;           /* secondary text (6.6:1 on page) */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #e8e0ff;
  --color-header: rgb(58 42 134 / 0.9);
  --sky: linear-gradient(180deg, #2f2273 0%, #5a3fc0 45%, #c28bd0 80%, #f2a0bf 100%);

  /* Type */
  --font-display: "Titan One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Grandstander", "Trebuchet MS", system-ui, sans-serif;
  --font-plain: system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: 0.9375rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --text-3xl: clamp(2.1rem, 1.4rem + 3.6vw, 3.25rem);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --gutter: 1rem;
  --container: 73.75rem;

  /* Shape */
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;
  --shadow-card: 0 0.5rem 0 rgb(90 63 192 / 0.12);
  --shadow-button: 0 0.3rem 0 var(--color-lemon-deep);
  --shadow-picture: 0 0.6rem 1.5rem rgb(44 29 94 / 0.25);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-hop: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoots a little, like a hop landing */
  --header-height: 4.25rem;
}

/* Dark scheme, following the visitor's setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #1d1446;
    --color-card: #2b2063;
    --color-text: #f4eeff;
    --color-muted: #cfc4f7;         /* 9.6:1 on the dark card */
    --color-grape: #ffd94d;         /* links read as lemon on dark */
  }
}