/* Hohmann Games design tokens v1.0
   Load fonts first:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
*/
:root {
  /* Core palette */
  --hg-deep-blue: #16325C;   /* primary ground */
  --hg-pink-coral: #F27B94;  /* the burn: planet, transfer, key actions */
  --hg-starlight: #EEF0F7;   /* type and line work on dark */
  /* Supporting */
  --hg-abyss: #0D2140;       /* deeper ground: footers, overlays */
  --hg-tide: #24497A;        /* raised surfaces, cards, borders */
  --hg-mist: #9FB0CC;        /* secondary text, orbit lines */
  --hg-blush: #F7F0EF;       /* light ground */
  --hg-coral-ink: #B23A57;   /* coral for text on light grounds */
  --hg-coral-bright: #DE5F7C;/* coral for graphics on light grounds */

  /* Semantic (dark theme is the default) */
  --bg: var(--hg-deep-blue);
  --bg-deep: var(--hg-abyss);
  --surface: var(--hg-abyss);
  --surface-raised: var(--hg-tide);
  --border: var(--hg-tide);
  --text: var(--hg-starlight);
  --text-muted: var(--hg-mist);
  --accent: var(--hg-pink-coral);
  --accent-text: var(--hg-pink-coral);   /* 4.9:1 on deep blue */
  --on-accent: var(--hg-deep-blue);      /* text on coral buttons */
  --motif: var(--hg-pink-coral);         /* planet, transfer, brand graphics; never text */
  --control-border: var(--hg-mist);      /* input and secondary-button outlines, 5.8:1 */
  --focus: var(--hg-pink-coral);
  --orbit: var(--hg-mist);

  /* Type */
  --font-sans: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  /* 1.25 scale, 17px base */
  --text-sm: 0.875rem;   /* 14 */
  --text-base: 1.0625rem;/* 17 */
  --text-lead: 1.25rem;  /* 20 */
  --text-h4: 1.5625rem;  /* 25 */
  --text-h3: 1.9375rem;  /* 31 */
  --text-h2: 2.4375rem;  /* 39 */
  --text-h1: 3.0625rem;  /* 49 */
  --text-display: clamp(2.75rem, 6vw, 3.8125rem); /* up to 61 */
  --leading-tight: 1.08;
  --leading-body: 1.6;
  --tracking-label: 0.12em;

  /* Space: 4px base */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --content-max: 1200px;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Orbit decoration */
  --orbit-width: 1.6px;
  --orbit-dash: 3 6;
  --orbit-opacity: 0.4;

  /* Motion */
  --ease-transfer: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;
}

[data-theme="light"] {
  --bg: var(--hg-blush);
  --bg-deep: #EFE6E4;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --border: #E2D6D4;
  --text: var(--hg-deep-blue);
  --text-muted: #4A5E80;
  --accent: var(--hg-coral-ink);         /* button fill on light */
  --accent-text: var(--hg-coral-ink);    /* 5.1:1 on blush */
  --on-accent: #FFFFFF;                  /* 5.8:1 on coral ink */
  --motif: var(--hg-coral-bright);       /* graphics only (3.1:1 on blush) */
  --control-border: #4A5E80;
  --focus: var(--hg-coral-ink);
  --orbit: #4A5E80;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}