/* Design tokens: astronomy-basics. Night-sky theme.
   The shared layout CSS assumes light page paper with dark header/footer, so the night sky is the
   header, footer and illustration panels (space-black), with pale starlight paper for reading.
   Palette: space-black, starlight paper, gold accent (borders, fills), indigo links, cyan/gold inside dark panels.
   Contrast (hand-calculated, AA+): ink on paper ~16:1, indigo link (navy-700) on paper ~9:1,
   paper on space-black header ~16:1, gold on space-black ~11:1, cyan on space-black ~10:1.
   Type: system stacks only, 1.25 scale, roomy line height. */
:root {
  --color-space-950: #060914;
  --color-space-900: #0b1024;
  --color-space-800: #141b38;
  --color-space-700: #232c52;
  --color-starlight: #eef2fb;
  --color-muted: #aab4d0;
  --color-gold: #f2c45a;
  --color-gold-dark: #d9a52f;
  --color-cyan: #6fd3e8;
  --color-planet-rust: #c46a4a;
  --color-error: #ff9b94;
  --color-focus: #0b63ce;

  /* names read by css/layout.css */
  --color-paper: #eef1f8;
  --color-surface: #ffffff;
  --color-ink: #0b1024;
  --color-navy-800: #0b1024;
  --color-navy-700: #2b3a78;
  --color-safety: #f2c45a;
  --color-steel-300: #b9c0d6;
  --color-steel-700: #4a5578;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-sm: 0.9rem;
  --text-base: 1.0625rem;
  --text-md: 1.3rem;
  --text-lg: 1.65rem;
  --text-xl: 2.1rem;
  --text-2xl: 2.8rem;
  --leading-tight: 1.2;
  --leading-body: 1.7;
  --weight-heading: 700;

  --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;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --border-width: 1px;
  --border-color: var(--color-space-700);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --content-width: 66rem;
  --measure: 64ch;
  --focus-ring: 3px solid var(--color-focus);
}
