/* AstroPal theme. Every colour comes from the app's Dark theme (src/css/tokens.css and
   src/js/ui/wheel-palette.js). The app also has a Light theme; the site keeps the one dark look: no toggle.
   Accent rules, as in the app:
   - Gold means "selected / the main thing": the active tab there, the primary button and the active nav link here.
   - The four-colour logo gradient belongs to the ASTROPAL wordmark only.
   - Violet is for section titles and labels (the app's .section-title).
   - Element colours only mark elements (the wheel's sign band); aspect colours only mark aspects. */
:root {
  --bg: #0a0a1a;               /* app body gradient: #0a0a1a → #1a1a3a → #0d0d2b */
  --bg-2: #1a1a3a;
  --bg-3: #0d0d2b;
  --bg-well: #0c0c20;
  --surface: #121230;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .12);
  --line-3: rgba(255, 255, 255, .2);
  --text: #e0e0ff;             /* app text */
  --head: #f2f1ff;             /* headlines, a touch brighter than the text */
  --sub: #aaaacc;              /* app secondary text, 8.9:1 on --bg */
  --muted: #9494b8;            /* captions, 6.6:1 on --bg, 5.4:1 on --bg-2 */

  --gold: #ffd700;             /* app: active tab, sign names, "Your reading" */
  --gold-rgb: 255, 215, 0;
  --violet: #c084fc;           /* app: section titles */
  --violet-rgb: 192, 132, 252;
  --lilac: #a78bfa;
  --pink: #ff6b9d;
  --blue: #60a5fa;
  --blue-rgb: 96, 165, 250;
  --green: #4ade80;
  --logo: linear-gradient(135deg, #ffd700, #ff6b9d, #c084fc, #60a5fa); /* the app's .logo */
  --cta-from: #ffe14d;
  --cta-to: #ffc400;
  --cta-ink: #17122b;          /* on the gold CTA: 12:1 */

  /* the chart wheel (wheel.js): element band and aspect lines */
  --fire: #e63946;
  --earth: #2d6a4f;
  --air: #e9c46a;
  --water: #264653;
  --asp-conj: #e8d6a0;
  --asp-soft: #7dd3fc;         /* trine, sextile */
  --asp-hard: #fda4af;         /* square, opposition */

  --ambient: radial-gradient(1.2px 1.2px at 8% 14%, rgba(255, 255, 255, .55), transparent),
             radial-gradient(1.2px 1.2px at 23% 31%, rgba(255, 255, 255, .35), transparent),
             radial-gradient(1.4px 1.4px at 37% 9%, rgba(255, 255, 255, .5), transparent),
             radial-gradient(1.2px 1.2px at 52% 22%, rgba(255, 255, 255, .3), transparent),
             radial-gradient(1.2px 1.2px at 66% 12%, rgba(255, 255, 255, .45), transparent),
             radial-gradient(1.4px 1.4px at 81% 27%, rgba(255, 255, 255, .4), transparent),
             radial-gradient(1.2px 1.2px at 93% 8%, rgba(255, 255, 255, .5), transparent),
             radial-gradient(1.2px 1.2px at 14% 58%, rgba(255, 255, 255, .3), transparent),
             radial-gradient(1.2px 1.2px at 31% 72%, rgba(255, 255, 255, .35), transparent),
             radial-gradient(1.2px 1.2px at 47% 64%, rgba(255, 255, 255, .25), transparent),
             radial-gradient(1.4px 1.4px at 72% 56%, rgba(255, 255, 255, .35), transparent),
             radial-gradient(1.2px 1.2px at 88% 69%, rgba(255, 255, 255, .3), transparent),
             radial-gradient(1.2px 1.2px at 61% 88%, rgba(255, 255, 255, .3), transparent),
             radial-gradient(1.2px 1.2px at 19% 91%, rgba(255, 255, 255, .35), transparent),
             radial-gradient(60% 45% at 88% 6%, rgba(192, 132, 252, .08), transparent 70%),
             radial-gradient(45% 40% at 4% 46%, rgba(96, 165, 250, .07), transparent 70%),
             radial-gradient(55% 45% at 82% 94%, rgba(255, 215, 0, .05), transparent 70%); /* faint tints only: the page
             base stays --bg, so the hero (which fades to --bg) meets it without a seam */
  --poster: url("img/hero-still.webp");
  --poster-m: url("img/hero-still-m.webp");

  /* shared LD Coda footer (ldc-footer.css); text colours meet WCAG AA on the footer background */
  --ldc-footer-bg: #08081a;
  --ldc-footer-border: rgba(255, 255, 255, .08);
  --ldc-footer-link: #aaaacc;
  --ldc-footer-link-h: #f2f1ff;
  --ldc-footer-current: #ffd700;
  --ldc-footer-cat: #9494b8;
  --ldc-footer-dot: #4a4a6a;
  --ldc-footer-meta: #9494b8;
}