/* PONS CITY - design tokens.
   Palette lifted verbatim from the pons launchpad's own CSS custom properties,
   not sampled from a screenshot. Extended with the city inks from SPEC.md 1.
   ONE rule governs everything here: lime is a LIGHT, not a fill. */

:root {
  /* --- pons, verbatim --- */
  --bg-page:       #0d0d0d;
  --bg-white:      #161616;
  --bg-elevated:   #1c1c1c;
  --accent:        #d4fc50;
  --accent-soft:   #1c2610;
  --accent-mid:    #2a3a14;
  --accent-green:  #30d158;
  --accent-red:    #ff453a;
  --text-primary:  #f2f2f2;

  /* --- chrome ramp, sampled from the pons logo --- */
  --chrome-dark:   #687868;
  --chrome-mid:    #a0a8a0;
  --chrome-light:  #e8e8e8;

  /* --- city inks --- */
  --asphalt:       #141414;
  --kerb:          #242424;
  --brick:         #2a2422;
  --glass:         #1b2126;
  --window-warm:   #3a3320;
  --window-lit:    #8fa03c;
  --sodium:        #c8a24a;   /* the ONE warm light. keep it rare. */

  /* --- derived text --- */
  --text-dim:      #9a9a9a;
  --text-faint:    #6a6a6a;
  --rule:          #262626;
  --rule-bright:   #333333;

  /* --- geometry. the site inherits the game's pixel discipline: --- */
  /* every radius and gap is a multiple of 4, because the city is 16px tiles. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 16px;
  --gap-4: 24px;
  --gap-5: 40px;
  --gap-6: 64px;
  --gap-7: 96px;

  --maxw: 1120px;
  --maxw-prose: 68ch;

  /* --- lime as light: the only three ways it is allowed to appear --- */
  --glow-sm: 0 0 0 1px var(--accent-mid), 0 0 12px -4px var(--accent);
  --glow-md: 0 0 0 1px var(--accent-mid), 0 0 28px -8px var(--accent);

  /* --- pons's OWN glass + geometry language, read off the live bundle
         2026-09-05 (chunks/1nly_z1gk-4ry.css), not guessed. The launchpad
         renders panels as liquid glass with generous radii. We adopt it for
         the site CHROME so PONS CITY reads as native to the ecosystem, and
         keep every pixel surface hard-edged. Glass is the app; the city
         inside it is the world. That contrast is the point. --- */
  --accent-hover:  #c4ef3c;
  --live-dot:      #d4fc50;
  --banner-bg:     #050505;
  --panel:         #1f1f1f;
  --buy:           #2a2a2a;
  --sell:          #3a3a3a;
  --text-muted:    #f2f2f294;
  --text-subtle:   #f2f2f266;
  --divider:       #f2f2f21f;

  --glass-fill:    #161616c7;
  --glass-border:  #ffffff1a;
  --lg-sheen:      #ffffff0d;
  --lg-specular:   #ffffff24;
  --lg-specular-side: #ffffff14;
  --lg-rim-border: #ffffff24;
  --lg-tint:       #0a0a0a7a;

  --radius-panel:  20px;
  --radius-card:   24px;
  --radius-glass:  24px;
  --radius-float:  28px;
  --radius-pill:   999px;

  --scanline: repeating-linear-gradient(
      180deg, transparent 0 2px, rgba(0,0,0,.22) 2px 4px);
}

/* The site is night. There is no light mode: a city at 3am does not have one,
   and inventing a washed-out inverse would break the single register the whole
   product is built on. We declare that rather than leaving the page transparent. */
:root { color-scheme: dark; }

html { background: var(--bg-page); }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Pixel media never smooths. This is the single most common way a pixel build
   ships looking like mush: the browser bilinear-filters the upscale. */
img[data-pixel], canvas[data-pixel] {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Motion is opt-out everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus must be visible on a near-black ground or the page fails keyboard use. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}