/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — THE ONLY file in frontend/ allowed to contain colour literals.
   Enforced by server/test/frontend-colors.test.js.

   Dark is the product default and lives in :root. The light overrides land in
   a :root[data-theme="light"] block (added in stage 2 of the light-theme
   plan); the attribute is set by an inline boot script in each page's <head>.

   ⚠️ EVERY VALUE HERE IS BYTE-IDENTICAL to the pre-sweep style.css :root, and
   every NEW token takes a value that already appears somewhere in the
   codebase. That invariant is what makes the screenshot parity guard
   meaningful — a dark diff means a literal was mis-mapped, not that a colour
   was retuned.

   Spec: docs/superpowers/specs/2026-09-05-light-theme-design.md
   Map:  docs/superpowers/plans/light-theme-colour-map.md
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ground ─────────────────────────────────────────────────────────────
     --canvas is the body's multi-layer wash. Fixed so it stays put while the
     app scrolls over it.                                                    */
  --canvas:
    radial-gradient(50% 40% at 12% 6%,  rgba(255,107,53,.20), transparent 64%),
    radial-gradient(50% 40% at 88% 10%, rgba(124,92,255,.24), transparent 64%),
    radial-gradient(46% 38% at 50% 42%, rgba(34,211,238,.13), transparent 64%),
    radial-gradient(50% 40% at 10% 78%, rgba(124,92,255,.20), transparent 64%),
    radial-gradient(50% 40% at 90% 96%, rgba(255,107,53,.16), transparent 64%),
    linear-gradient(180deg, #0a0a18, #0b0a1c 50%, #090a18);
  /* The fixed full-screen star overlay (body::before). 14 dots; one token
     because it is one decorative object, not fourteen colour decisions. */
  --starfield:
    radial-gradient(1px 1px at 10% 15%, rgba(255,179,64,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 25%, rgba(255,107,53,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 10%, rgba(255,179,64,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 45%, rgba(255,255,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 70%, rgba(91,141,239,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 85%, rgba(255,77,124,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 90%, rgba(255,179,64,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 38%, rgba(255,255,255,0.18) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 62%, rgba(255,107,53,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 28%, rgba(255,255,255,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 48%, rgba(91,141,239,0.25) 0%, transparent 100%);

  /* Opaque counterpart, for places that need a solid fill rather than the
     gradient — e.g. the constellation header <rect> in index.html. */
  --canvas-solid:   #0a0a1e;
  /* Star dots in the constellation banner SVG (index.html). */
  --star:           #ffffff;
  /* Video letterbox. Black in BOTH themes — a video looks wrong on white. */
  --video-bg:       #000000;
  /* Image lightbox scrim. Dark in BOTH themes — you view a photo against
     darkness whatever the app is wearing. */
  --lightbox-bg:    rgba(0,0,0,0.85);
  /* Telegram's own brand blue (the connect button). A brand colour never
     follows the theme — the same rule as the .int-icon platform tiles. */
  --brand-telegram: #229ED9;

  --bg:             #08081a;
  --bg2:            #0d0d22;
  --bg3:            #12122c;
  --surface:        #181830;
  --surface2:       #1e1e3a;
  --surface-3:      #12122c;
  /* Two hover/raised steps. The codebase had six ad-hoc alphas (.02-.08);
     these collapse them with a maximum shift of 0.02. */
  --surface-hover:  rgba(255,255,255,0.04);
  --surface-hover2: rgba(255,255,255,0.08);
  --scrim:          rgba(8,8,26,0.9);

  /* ── Borders ────────────────────────────────────────────────────────── */
  --border-faint:   rgba(255,255,255,0.04);
  --border:         rgba(255,255,255,0.08);
  --border2:        rgba(255,255,255,0.15);
  --border-3:       rgba(255,255,255,0.25);

  /* ── Text ───────────────────────────────────────────────────────────────
     ⚠️ --text is #f0f0ff, NOT pure white. --text-strong is the pure-white
     emphasis step used by panel titles and form inputs; folding it into
     --text would shift 14 sites by rgb(15,15,0) and break parity.
     --text-invert is for text sitting ON a filled accent.                   */
  --text:           #f0f0ff;
  --text-strong:    #ffffff;
  --muted:          #9090b8;
  --muted2:         #b0b0d8;
  --text-invert:    #ffffff;
  /* ⚠️ Translucent whites that sit ON a filled accent (a spinner track inside
     the orange send button, the buttons on the orange impersonation banner).
     These stay WHITE in light mode — the surface under them is orange in both
     themes, so theming them would make them vanish. */
  --invert-dim:     rgba(255,255,255,0.2);
  --invert-dim2:    rgba(255,255,255,0.3);
  --invert-border:  rgba(255,255,255,0.4);

  /* ── Accents ────────────────────────────────────────────────────────────
     Each hue has a fill, a -text variant and one or more -dim washes.
     ⚠️ In DARK, fill and -text are the same value. They diverge only in
     light, where #FF6B35 on white is 2.84:1 and illegal for text. Do not
     "simplify" the pairs back to a single token.                            */
  --solar:          #FF6B35;
  --solar-light:    #FF8C5A;
  --solar-text:     #FF6B35;
  --solar-text-2:   #FF8C5A;
  --solar-dim:      rgba(255,107,53,0.15);
  --solar-dim2:     rgba(255,107,53,0.07);
  --solar-dim3:     rgba(255,107,53,0.35);

  --gold:           #FFB340;
  --gold-light:     #FFD070;
  --gold-text:      #FFB340;
  --gold-dim:       rgba(255,179,64,0.12);

  --teal:           #00C9A7;
  --teal-text:      #00C9A7;
  --teal-dim:       rgba(0,201,167,0.12);

  --nebula:         #FF4D7C;
  --nebula-text:    #FF4D7C;
  --nebula-dim:     rgba(255,77,124,0.12);
  --nebula-dim2:    rgba(255,80,128,0.2);

  --orbit:          #5B8DEF;
  --orbit-text:     #5B8DEF;
  --orbit-dim:      rgba(91,141,239,0.12);

  --red:            #FF4D6A;
  --red-text:       #FF4D6A;
  --red-dim:        rgba(255,77,106,0.12);

  /* Violet — a first-class accent that was never tokenised. .tm-role-admin
     sits between .tm-role-manager and .tm-role-member, both of which use
     token pairs, while admin alone used raw literals. */
  --violet:         #8B7EFF;
  --violet-text:    #B794F6;
  --violet-dim:     rgba(139,92,246,0.18);
  --violet-dim2:    rgba(139,126,255,0.08);

  /* PRO / upgrade marker. Named for the job, not the hue. The gradient pair
     is used on the PRO badge and the upgrade CTA. */
  --pro:            #7C3AED;
  --pro-2:          #C026D3;
  --pro-text:       #7C3AED;
  --pro-dim:        rgba(124,58,237,0.18);

  /* ── Depth ──────────────────────────────────────────────────────────── */
  /* Two full shadows for the geometries the codebase actually repeats, plus
     three colour-only tokens for the one-off geometries, which keep their own
     offsets and blur. Black shadows read as dirt on a light ground, so the
     light block swaps the colour for the indigo-black. */
  --shadow-md:      0 8px 32px rgba(0,0,0,0.3);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.4);
  --shadow-weak:    rgba(0,0,0,0.2);
  --shadow-color:   rgba(0,0,0,0.3);
  --shadow-strong:  rgba(0,0,0,0.4);
  --code-bg:        rgba(0,0,0,0.35);
  --overlay:        rgba(0,0,0,0.6);
  --overlay-soft:   rgba(0,0,0,0.5);
  --focus-ring:     rgba(255,107,53,0.45);

  /* ── Type (theme-independent) ───────────────────────────────────────── */
  --font-body:      system-ui, -apple-system, sans-serif;
  --font-mono:      'DM Mono', 'Courier New', monospace;
  --font-display:   Georgia, 'Times New Roman', serif;

  /* ── RGB triplets ───────────────────────────────────────────────────────
     Used as rgba(var(--x-rgb), <alpha>) so a wash keeps its exact opacity
     instead of being forced onto a coarse ladder. style.css had 17 different
     orange alphas alone; this preserves every one of them byte-for-byte while
     still letting the hue change with the theme.                            */
  --solar-rgb:      255,107,53;
  --gold-rgb:       255,179,64;
  --teal-rgb:       0,201,167;
  --nebula-rgb:     255,77,124;
  --orbit-rgb:      91,141,239;
  --red-rgb:        255,77,106;
  --violet-rgb:     139,126,255;
  --pro-rgb:        124,58,237;
  --bg-rgb:         8,8,26;
  --bg2-rgb:        13,13,34;
  --muted-rgb:      144,144,184;

  /* ── Back-compat aliases ────────────────────────────────────────────────
     Defined with var() so they follow the theme automatically. Do NOT
     restate them in the light block.                                        */
  --accent:  var(--solar);
  --accent2: var(--solar-light);
  --green:   var(--teal);
  --amber:   var(--gold);
  --cyan:    var(--orbit);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT — "cool slate". A light inversion of the indigo canvas, no radial
   washes. Only tokens that CHANGE are restated.

   ⚠️ THE MUTED LADDER REVERSES. In dark, --muted2 (#b0b0d8) is BRIGHTER than
   --muted (#9090b8) — it means "more prominent secondary". In light, more
   prominent means DARKER, so --muted2 (#4A4866) is darker than --muted
   (#605E80). Anyone reading this will assume the ladders run parallel; they
   do not.

   ⚠️ NOT restated here, on purpose:
     --text-invert / --invert-* — they sit ON a filled accent, which is the
       same colour in both themes. Theming them makes them vanish.
     --video-bg — a video letterboxes on black in any theme.
     --font-* — theme-independent.
     --accent / --accent2 / --green / --amber / --cyan — var() aliases that
       follow their target automatically.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  --canvas:         linear-gradient(180deg, #F5F6FC, #F1F2FA);
  --starfield:
    radial-gradient(1px 1px at 10% 15%, rgba(163,74,8,0.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 60%, rgba(23,22,50,0.16) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 25%, rgba(255,107,53,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 80%, rgba(23,22,50,0.11) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 10%, rgba(163,74,8,0.16) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 45%, rgba(23,22,50,0.13) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 70%, rgba(59,111,212,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 85%, rgba(219,39,119,0.16) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 50%, rgba(23,22,50,0.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 90%, rgba(163,74,8,0.11) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 38%, rgba(23,22,50,0.10) 0%, transparent 100%),
    radial-gradient(1px 1px at 73% 62%, rgba(255,107,53,0.11) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 28%, rgba(23,22,50,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 48%, rgba(59,111,212,0.14) 0%, transparent 100%);
  --canvas-solid:   #E7E9F4;
  --star:           #171632;

  --bg:             #F3F4FB;
  --bg2:            #EDEFF8;
  --bg3:            #E7E9F4;
  --surface:        #FFFFFF;
  --surface2:       #FAFAFE;
  --surface-3:      #F3F4FB;
  --surface-hover:  rgba(23,22,50,0.04);
  --surface-hover2: rgba(23,22,50,0.07);
  --scrim:          rgba(243,244,251,0.92);

  --border-faint:   #EDEEF7;
  --border:         #E0E1EF;
  --border2:        #CFD1E4;
  --border-3:       #B9BCD6;

  --text:           #171632;
  --text-strong:    #0F0E24;
  --muted:          #605E80;
  --muted2:         #4A4866;

  /* Fills stay vivid; -text darkens to clear 4.5:1 on the ground. */
  --solar:          #FF6B35;
  --solar-light:    #FF8C5A;
  --solar-text:     #B33C0B;
  --solar-text-2:   #B33C0B;
  --solar-dim:      rgba(255,107,53,0.13);
  --solar-dim2:     rgba(255,107,53,0.06);
  --solar-dim3:     rgba(255,107,53,0.30);

  --gold:           #B45309;
  --gold-light:     #D97706;
  --gold-text:      #92400E;
  --gold-dim:       rgba(163,74,8,0.12);

  --teal:           #0B6E5B;
  --teal-text:      #0B6E5B;
  --teal-dim:       rgba(11,110,91,0.11);

  --nebula:         #DB2777;
  --nebula-text:    #BE185D;
  --nebula-dim:     rgba(219,39,119,0.10);
  --nebula-dim2:    rgba(219,39,119,0.16);

  --orbit:          #3B6FD4;
  --orbit-text:     #2C5AAF;
  --orbit-dim:      rgba(59,111,212,0.11);

  --red:            #DC2626;
  --red-text:       #C81E3A;
  --red-dim:        rgba(220,38,38,0.10);

  --violet:         #5B3FD9;
  --violet-text:    #6D28D9;
  --violet-dim:     rgba(109,40,217,0.12);
  --violet-dim2:    rgba(109,40,217,0.06);

  /* The PRO gradient survives unchanged — white text on #7C3AED is 5.70:1. */
  --pro:            #7C3AED;
  --pro-2:          #C026D3;
  --pro-text:       #6D28D9;
  --pro-dim:        rgba(124,58,237,0.13);

  /* Black shadows read as dirt on a light ground; use the indigo-black. */
  --shadow-md:      0 8px 32px rgba(23,22,50,0.10);
  --shadow-lg:      0 8px 32px rgba(23,22,50,0.14);
  --shadow-weak:    rgba(23,22,50,0.06);
  --shadow-color:   rgba(23,22,50,0.10);
  --shadow-strong:  rgba(23,22,50,0.14);
  --code-bg:        rgba(23,22,50,0.06);
  --overlay:        rgba(23,22,50,0.45);
  --overlay-soft:   rgba(23,22,50,0.38);
  --focus-ring:     rgba(255,107,53,0.40);

  --solar-rgb:      255,107,53;
  --gold-rgb:       163,74,8;
  --teal-rgb:       11,110,91;
  --nebula-rgb:     219,39,119;
  --orbit-rgb:      59,111,212;
  --red-rgb:        220,38,38;
  --violet-rgb:     109,40,217;
  --pro-rgb:        124,58,237;
  --bg-rgb:         243,244,251;
  --bg2-rgb:        237,239,248;
  --muted-rgb:      96,94,128;
}