/*
 * Design tokens — every colour, font, radius, shadow, z-index and duration in the app comes from here.
 * Components use var(--token) only; never raw hex. Dark is the native theme ("deep space");
 * light ("observatory paper") is a full peer, not an afterthought.
 */
:root {
  /* type */
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 32px; --fs-hero: clamp(40px, 7vw, 84px);

  /* space + shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --rail-w: 64px; --top-h: 56px; --drawer-w: min(560px, 100vw);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms; --dur-med: 240ms; --dur-slow: 520ms;

  /* layers */
  --z-canvas: 0; --z-hud: 10; --z-chrome: 20; --z-drawer: 40; --z-palette: 60; --z-toast: 80;

  /* dark (default) */
  --bg: #04060c;
  --bg-elev: #0a0f1a;
  --surface: rgba(16, 22, 36, .72);
  --surface-solid: #101624;
  --surface-hover: rgba(30, 40, 62, .8);
  --glass-blur: 18px;
  --line: rgba(160, 180, 220, .12);
  --line-strong: rgba(160, 180, 220, .24);
  --text: #e8edf7;
  --text-dim: #9aa6bd;
  --text-faint: #5f6b82;
  --accent: #ffd27a;          /* starlight gold */
  --accent-2: #7ad7ff;        /* ion blue */
  --accent-ink: #1a1203;
  --good: #3ddc97; --warn: #ffb547; --bad: #ff5d73;
  --mark-bg: rgba(255, 210, 122, .28);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-glow: 0 0 0 1px var(--line-strong), 0 0 32px rgba(122, 215, 255, .12);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-2);
}

/* ---- universe (src/app/views/universe.css + canvas HUD in src/universe/) ------------------------------
 * The 3D canvas is deep space in BOTH themes, so these inks are theme-independent and are not
 * overridden by the light theme below. Owned by the Universe view. */
:root {
  --u-space: #000;
  --u-label-ink: #e8edf7;
  --u-label-dim: #9aa6bd;
  --u-label-accent: #ffd27a;
  --u-ink-bright: #ffffff;
  --u-blackhole: #ffb36b;
  --u-text-shadow: 0 0 2px #000, 0 1px 4px rgba(0, 0, 0, .8);
  --u-caption-shadow: 0 2px 18px rgba(0, 0, 0, .9);
  --u-feed-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  --u-caption-body: rgba(235, 240, 255, .86);
  --u-epoch: rgba(255, 255, 255, .5);
  --u-epoch-off: rgba(255, 255, 255, 0);
}
/* ---- end universe ---- */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; --theme-light: 1; }
}
:root[data-theme="light"] { color-scheme: light; --theme-light: 1; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f1ea; --bg-elev: #fbf9f4; --surface: rgba(255, 253, 248, .82); --surface-solid: #fffdf8;
    --surface-hover: rgba(240, 235, 224, .95); --line: rgba(40, 36, 28, .12); --line-strong: rgba(40, 36, 28, .24);
    --text: #1d1b16; --text-dim: #5d584c; --text-faint: #958e7d; --accent: #a8721a; --accent-2: #1f6fb2; --accent-ink: #fffaf0;
    --mark-bg: rgba(168, 114, 26, .2); --shadow-1: 0 1px 2px rgba(40, 30, 10, .08), 0 8px 24px rgba(40, 30, 10, .08);
    --shadow-glow: 0 0 0 1px var(--line-strong);
  }
}
:root[data-theme="light"] {
  --bg: #f4f1ea; --bg-elev: #fbf9f4; --surface: rgba(255, 253, 248, .82); --surface-solid: #fffdf8;
  --surface-hover: rgba(240, 235, 224, .95); --line: rgba(40, 36, 28, .12); --line-strong: rgba(40, 36, 28, .24);
  --text: #1d1b16; --text-dim: #5d584c; --text-faint: #958e7d; --accent: #a8721a; --accent-2: #1f6fb2; --accent-ink: #fffaf0;
  --mark-bg: rgba(168, 114, 26, .2); --shadow-1: 0 1px 2px rgba(40, 30, 10, .08), 0 8px 24px rgba(40, 30, 10, .08);
  --shadow-glow: 0 0 0 1px var(--line-strong);
}