/* Stellar Vista Observatory design tokens — copied from the SVO design system (tokens/colors.css, spacing.css, typography.css). Fonts load from Google Fonts in the layout head. */
:root {
  /* Night sky — base */
  --night-950: #05070f;   /* page / desk behind the site */
  --night-900: #070b18;   /* overlays, dropdowns (use at .72–.96 alpha) */
  --night-800: #0a1022;   /* primary site background */
  --night-700: #131a33;   /* raised surface: donate bands, cards, panels */
  --night-600: #1b2240;   /* image placeholder fill */
  --logo-navy: #1c3044;   /* disc of the square mark — logo use only */
  --night-400: #4b5070;   /* separators in breadcrumbs */

  /* Starlight — accents */
  --gold-500: #e7c98f;    /* primary accent, CTAs, eyebrows, links */
  --gold-300: #fff3d6;    /* link hover */
  --copper-500: #c98a6a;  /* secondary accent: Phase II, dimensions */

  /* Ink — text on night */
  --ink-0: #ffffff;       /* headlines */
  --ink-100: #e9e6de;     /* default UI text */
  --ink-200: #e0ddd5;     /* long-form article body */
  --ink-300: #dcd8cf;     /* hero subhead */
  --ink-400: #c4c1ba;     /* supporting paragraphs */
  --ink-500: #a9a8b8;     /* captions, stat labels */
  --ink-600: #8d8ca0;     /* meta, footer */
  --ink-700: #6d6c84;     /* placeholder labels */

  /* Lines — gold at low alpha */
  --line-soft: rgba(231,201,143,.15);
  --line: rgba(231,201,143,.2);
  --line-strong: rgba(231,201,143,.25);
  --line-control: rgba(231,201,143,.35);
  --line-button: rgba(231,201,143,.5);
  --line-ghost-light: rgba(255,255,255,.4);
  --tint-gold: rgba(231,201,143,.1);

  /* Semantic */
  --bg-page: var(--night-950);
  --bg-site: var(--night-800);
  --surface-raised: var(--night-700);
  --surface-overlay: rgba(7,11,24,.96);
  --surface-glass: rgba(7,11,24,.72);
  --text-heading: var(--ink-0);
  --text-body: var(--ink-100);
  --text-article: var(--ink-200);
  --text-muted: var(--ink-400);
  --text-caption: var(--ink-500);
  --text-meta: var(--ink-600);
  --accent: var(--gold-500);
  --accent-hover: var(--gold-300);
  --accent-2: var(--copper-500);
  --on-accent: var(--night-800);
  --phase-1: var(--gold-500);
  --phase-2: var(--copper-500);

  /* Image protection */
  --scrim-hero: linear-gradient(180deg,rgba(10,16,34,.92) 0%,rgba(10,16,34,.55) 32%,rgba(10,16,34,0) 55%,rgba(10,16,34,.2) 75%,#0a1022 100%);
  --scrim-bottom: linear-gradient(0deg,rgba(10,16,34,.9),rgba(10,16,34,0) 60%);
  --scrim-banner: linear-gradient(180deg,rgba(10,16,34,.2),rgba(10,16,34,.92));
}
:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 14px;
  --space-5: 18px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-9: 40px; --space-10: 48px; --space-11: 56px; --space-12: 64px;
  --space-13: 80px; --space-14: 96px; --space-15: 110px;

  --gutter: 56px;          /* page side padding at 1280 */
  --site-width: 1280px;
  --measure-article: 680px;
  --measure-header: 820px;
  --section-gap: 96px;

  --radius-0: 0;           /* default — everything is square */
  --radius-button: 2px;    /* header CTA only */
  --radius-pill: 50%;      /* map pins, avatars */

  --shadow-dropdown: 0 18px 40px rgba(0,0,0,.5);
  --shadow-site: 0 30px 80px rgba(0,0,0,.6);
  --shadow-pin: 0 2px 8px rgba(0,0,0,.4);
  --ring-pin-active: 0 0 0 8px rgba(231,201,143,.3);
  --blur-glass: blur(8px);
  --ease: .2s ease;
}
:root {
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Display — Newsreader Light 300, tight tracking */
  --type-hero: 300 76px/1.02 var(--font-serif);
  --type-h1: 300 64px/1.02 var(--font-serif);
  --type-h1-article: 300 60px/1.05 var(--font-serif);
  --type-h2: 300 48px/1.08 var(--font-serif);
  --type-h2-band: 300 46px/1.1 var(--font-serif);
  --type-stat: 300 44px/1 var(--font-serif);
  --type-h3: 400 32px/1.15 var(--font-serif);
  --type-h4: 400 24px/1.25 var(--font-serif);
  --type-lede: 300 23px/1.45 var(--font-serif);
  --type-quote: italic 300 34px/1.3 var(--font-serif);
  --type-article: 400 20px/1.7 var(--font-serif);
  --tracking-display: -.015em;

  /* UI — Hanken Grotesk */
  --type-body-lg: 400 19px/1.5 var(--font-sans);
  --type-body: 400 16px/1.6 var(--font-sans);
  --type-ui: 400 14px/1.4 var(--font-sans);
  --type-button: 600 15px/1 var(--font-sans);
  --type-small: 400 13px/1.5 var(--font-sans);

  /* Labels — JetBrains Mono caps */
  --type-eyebrow: 500 12px/1.2 var(--font-mono);
  --type-label: 500 11px/1.2 var(--font-mono);
  --tracking-eyebrow: .14em;
  --tracking-label: .12em;
}