/* ============================================================
   EXTRA-CAPSA — Shared Design System  (single source of truth)
   ------------------------------------------------------------
   Tweak a token here and it propagates to the landing AND every
   Almanac app page that links this file. The app pages already
   reference these variable names (they were built light); this
   file overrides them with the cosmic "wizard" palette derived
   from the hero art (cobalt sky + gold + a luminous mint accent).

   Link it LAST in <head> (after a page's inline <style>) so these
   base rules win:
     <link rel="stylesheet" href="/capsa-theme.css" />
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=JetBrains+Mono:wght@300..700&display=swap");

:root {
  color-scheme: dark;

  /* — Text — */
  --ink-deep: #f4f8ff;   /* brightest: display headings */
  --ink: #d7e3f7;        /* body text */
  --vellum-dim: #aebfda; /* muted body / secondary copy */
  --moonstone: #8aa0c6;  /* dimmest secondary */

  /* — Surfaces (kept named "vellum" so the app pages flip for free) — */
  --vellum: #081628;       /* page base — deep night */
  --vellum-paper: #0e2444; /* panel / card surface — cobalt night */
  --vellum-soft: rgba(28, 64, 116, 0.40); /* cell / row wash */
  --surface-rgb: 28, 64, 116; /* cobalt surface base — used as rgba(var(--surface-rgb), a)
                                 by app-page washes that were parchment literals */

  /* — Gold (primary accent) — */
  --gold: #e3b765;
  --gold-warm: #f0c878;
  --gold-deep: #c79a47;
  --gold-hairline: rgba(227, 183, 101, 0.32);

  /* — Mint/teal = positive · ember = negative — */
  --copper: #5fc9a3;
  --copper-warm: #74d6a3;
  --ember: #e0794f;

  /* — Labels & hairlines — */
  --shade: #8094b6;
  --smoke: #9fb0cf;
  --rule-dark: rgba(150, 180, 225, 0.14);
  --rule-mid: rgba(150, 180, 225, 0.24);
  --rule-bright: rgba(227, 183, 101, 0.55);

  /* — Type — */
  --display: "Fraunces", "Cormorant Garamond", "Georgia", serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* — Canvas: night sky with faint gold/blue star-dots + survey grid — */
html {
  background: var(--vellum);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 22%, rgba(227, 183, 101, 0.07) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 38%, rgba(120, 170, 235, 0.08) 0 1px, transparent 1.6px),
    linear-gradient(to right, rgba(150, 180, 225, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #0b1e3a 0%, #07142a 100%);
  background-attachment: fixed;
  background-size: auto, auto, 92px 100%, auto;
}

/* App pages paint a light survey grid via body::before — the grid now
   lives in the body background above, so neutralize the pseudo to avoid
   a double grid / z-index fights. */
body::before {
  background-image: none !important;
}

::selection {
  color: #081628;
  background: var(--gold);
}

/* Cosmic scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #081628;
}
::-webkit-scrollbar-thumb {
  background: #1c4a86;
  border: 3px solid #081628;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2f6dbf;
}
