/* Log Punk's palette.
 *
 * Loaded after style.css on /logpunk only, and it does nothing but reassign the
 * tokens — no rule in here targets a selector. That is the point: the layout,
 * spacing and behaviour stay identical to the Log Pose page, and only the
 * colour changes, so the two read as one site in two liveries.
 *
 * The two colours are the app's own. #091833 is sampled from the app icon's
 * field — the same value as CyberpunkGame.loadingBackground and the launch
 * storyboard — so the site, the launch screen and the loading screen are one
 * navy. #FCEE0A is the neon yellow.
 *
 * Deliberately dark in both light and dark mode. Every other page follows the
 * reader's preference; this one does not, because the brand is a bright mark on
 * a dark ground and a parchment Log Punk would not be Log Punk. The overrides
 * are repeated under the media query and both data-theme selectors so no route
 * into light mode escapes them.
 */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --bg:         #091833;   /* the icon's own field */
  --bg2:        #0E2149;   /* cards and the nav bar */
  --bg3:        #14295A;   /* insets */
  --bdr:        #1E3A6E;

  --txt:        #EDF2FB;
  --muted:      #8FA6CC;   /* 6.1:1 on --bg */

  --accent:     #FCEE0A;   /* neon yellow — 15.9:1 on --bg */
  --gold:       #FCEE0A;
  --teal:       #35E0FF;   /* the second neon, for checks and hero glow */

  /* The Plus badge is a wash of accent, so its text has to be the navy. */
  --on-accent:  #091833;

  /* Solid navy behind the hero rather than the Log Pose artwork the base sheet
     points at. The circuit SVG in .hero-bg is the only figure this hero needs;
     a photograph under it would fight the neon. */
  --hero-bg:    #091833;

  /* .sec.alt tints the background by 30% of this. Yellow at that strength would
     wash the section out, so the alternating band is a lift in the blue instead
     — the same move the base theme makes with its green. */
  --alt-tint:   #2A4A8F;

  --green:      #14295A;   /* .pill.live sits on this with accent text */
  --green-dark: #0E2149;
  --green-bdr:  #1E3A6E;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:         #091833;
    --bg2:        #0E2149;
    --bg3:        #14295A;
    --bdr:        #1E3A6E;
    --txt:        #EDF2FB;
    --muted:      #8FA6CC;
    --accent:     #FCEE0A;
    --gold:       #FCEE0A;
    --teal:       #35E0FF;
    --on-accent:  #091833;
    --hero-bg:    #091833;
    --alt-tint:   #2A4A8F;
    --green:      #14295A;
    --green-dark: #0E2149;
    --green-bdr:  #1E3A6E;
  }
  /* The base sheet darkens the social icons for a light page. This page is
     never light, so they stay inverted. */
  .foot-social a img { filter: brightness(0) invert(1); }
}