/* The token contract. Every page reads these names and never writes a raw
   colour, so the two themes stay in step and a new page cannot invent a sixth
   accent. Meaning is fixed to the name: --a-live is what is alive in both
   themes, --a-warn is what needs attention in both. Only the value changes.

   Light is not the dark palette inverted. On paper the cosmos loses its stars
   (bright dots on white read as dust, not sky) and keeps only a soft gradient,
   and every accent is darkened until it holds against white — the same hue,
   enough contrast to read. */

:root,
:root[data-theme="dark"] {
  --bg: #070d18;
  --bg-raised: #0d1526;
  --bg-sunken: #050a13;

  --ink: #eef4ff;
  --ink-soft: #b9c6dc;
  --ink-dim: #8592a8;
  --ink-faint: #4d5a70;   /* lines only, never text */

  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.06);

  --a-live: #7ee7c2;
  --a-warn: #f2b768;
  --a-link: #8ed4ff;
  --a-brand: #5b8cff;

  --sky-1: #0c1826;
  --sky-2: #08131d;
  --sky-3: #050a11;
  --star: rgba(255, 255, 255, 0.55);
  --glow-a: rgba(142, 212, 255, 0.13);
  --glow-b: rgba(91, 140, 255, 0.12);
}

:root[data-theme="light"] {
  --bg: #f7f9fc;
  --bg-raised: #ffffff;
  --bg-sunken: #eef2f8;

  --ink: #10151c;
  --ink-soft: #3c4757;
  --ink-dim: #5d6a7d;
  --ink-faint: #aab4c2;   /* lines only, never text */

  --line: rgba(16, 21, 28, 0.14);
  --line-soft: rgba(16, 21, 28, 0.07);

  /* Darkened until each holds against white; hue and meaning unchanged. */
  --a-live: #1f7a63;
  --a-warn: #a4700f;
  --a-link: #1d6fb8;
  --a-brand: #3a5ccc;

  --sky-1: #eef3fb;
  --sky-2: #f6f8fc;
  --sky-3: #ffffff;
  --star: transparent;    /* no stars on paper */
  --glow-a: rgba(29, 111, 184, 0.08);
  --glow-b: rgba(58, 92, 204, 0.07);
}

/* The child surface keeps its own face in both themes: blue and pink, softer
   than the rest of the project, because it is the screen a child looks at. */
:root[data-theme="dark"] .child-surface,
:root[data-theme="dark"] body.child-runtime {
  --sky-1: #0a1230;
  --sky-2: #120b26;
  --sky-3: #170b26;
  --glow-a: rgba(120, 190, 255, 0.16);
  --glow-b: rgba(255, 150, 205, 0.14);
}

:root[data-theme="light"] .child-surface,
:root[data-theme="light"] body.child-runtime {
  --sky-1: #eaf2ff;
  --sky-2: #f6eefb;
  --sky-3: #fff6fb;
  --glow-a: rgba(120, 190, 255, 0.22);
  --glow-b: rgba(255, 150, 205, 0.20);
  --star: transparent;
}

html {
  background: var(--bg);
  color: var(--ink);
}