/* ============================================================
   CATBACK design tokens — the ONLY place colors/fonts live.
   ============================================================ */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/fonts/press-start-2p.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('../assets/fonts/vt323.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* ---- palette ------------------------------------------- */
  /* THE CANVAS IS CREAM (user direction, 2026-08-05) — the warm pale yellow
     of the ATM's own header plate. The theme is INVERTED from the original
     terminal look: dark green ink on cream paper, panels are lighter cards
     with green borders, and "glow" is a soft shadow rather than neon.
     Token NAMES are kept (hundreds of references) but their MEANING is now:
       --ink*      = page + surface creams (light)
       --terminal* = the green ink you read (dark)
     Earlier attempts at a pastel-blue and a true-black canvas were both
     replaced; this cream is the current direction. */
  --ink:            #fbf3c7;   /* page background — warm cream  */
  --ink-2:          #f6ecb4;   /* recessed surface (bars, nav)  */
  --ink-3:          #fffbe4;   /* raised card surface           */
  --forest:         #cbbf86;   /* soft rule / low-contrast edge */
  --forest-2:       #2f6b34;   /* panel borders (green)         */
  --moss:           #55a04f;   /* mid green                     */
  --atm-green:      #76b93e;   /* ATM body green (unchanged)    */
  --terminal:       #14140f;   /* PRIMARY ink — headings, black */
  --terminal-dim:   #5f5f54;   /* muted labels                  */
  --terminal-soft:  #1c1c16;   /* body copy — black             */
  --note-pale:      #3d3d33;   /* quiet ink                     */
  --cream:          #14140f;   /* was light-on-dark → now ink   */
  --charcoal:       #2a3530;   /* ATM panel grey (unchanged)    */
  /* ---- THE BANK ACCENT SET (2026-08-05) ---------------------
     The site is set inside a premium CATBACK bank branch, so the
     DECORATIVE palette is the branch palette and nothing else:
     CATBACK green, deep emerald, deep forest, olive, bronze,
     branch gold, dark charcoal, cream / warm white.
     NO violet, NO denim blue, NO pink, NO neon — the room must
     read expensive, not cyberpunk.

     Variety still matters (the user does not want monotone
     green): the spread is emerald -> olive -> bronze -> gold ->
     charcoal, five clearly distinct hues, all muted and dark
     enough to read as ink on cream.

     Token NAMES are kept on purpose — hundreds of CSS references
     and several canvases (leaderboard avatars, tokenomics chart,
     guide icons, critters) read them at runtime, so re-mapping
     the HUE here re-colours the whole site at once. The old
     names now mean:
       --sol-cyan   = DEEP EMERALD   (was teal)
       --sol-purple = OLIVE          (was violet)
       --e-blue     = DEEP FOREST    (was denim blue)
       --amber      = BRONZE         (was burnt orange)

     --alert is the ONE functional exception and stays red: SELL
     rows, errors and warnings must never be green. It carries
     meaning and is never used as decoration. */
  --alert:          #a8382b;   /* oxblood red — SELL / ERROR / WARN ONLY */
  --amber:          #7a4718;   /* bronze — caution, TBA, demo tags       */
  --gold:           #8a6704;   /* branch gold — rewards, rank 1          */
  --sol-purple:     #55611c;   /* OLIVE (name kept for compatibility)    */
  --sol-cyan:       #0f5c46;   /* DEEP EMERALD (name kept)               */
  --e-blue:         #14432a;   /* DEEP FOREST (name kept)                */
  --white-hi:       #000000;   /* deepest ink                            */

  /* Named hues for per-section character (the department colours).
     Literal hex on every one — canvases read these raw. */
  --c-green:        #1c5c26;   /* CATBACK green   */
  --c-emerald:      #0f5c46;   /* deep emerald    */
  --c-forest:       #14432a;   /* deep forest     */
  --c-olive:        #55611c;   /* olive           */
  --c-bronze:       #7a4718;   /* bronze          */
  --c-gold:         #8a6704;   /* branch gold     */
  --c-charcoal:     #2f3733;   /* dark charcoal   */
  --c-brown:        #4a3a24;   /* charcoal brown  */
  /* FUNCTIONAL red only — same hue as --alert. This is NOT a decoration
     slot. js/guide.js still reaches for it as the step-6 icon accent
     (ICON_HUES, ~4 painted pixels); that one reference should move to
     --c-bronze so no red survives anywhere as decoration. */
  --c-red:          #a8382b;
  /* polished brass — a SURFACE, not an ink. Dark type only on top of it
     (black on brass ≈ 7:1). Used for engraved branch plates. */
  --brass:          #c49a2e;
  --brass-hi:       #d8ac3a;   /* lit top edge of a brass plate  */
  --brass-lo:       #a87f1c;   /* shaded bottom edge             */
  /* legacy aliases, same bank hues (kept so existing refs resolve) */
  --c-teal:         #0f5c46;
  --c-blue:         #14432a;
  --c-violet:       #55611c;
  --c-orange:       #7a4718;

  /* "glow" on paper = a soft warm shadow, never neon */
  --glow-terminal:  rgba(47, 107, 52, 0.30);
  --glow-soft:      rgba(47, 107, 52, 0.12);
  --glow-cyan:      rgba(15, 92, 70, 0.22);    /* emerald (name kept)  */
  --glow-purple:    rgba(85, 97, 28, 0.18);    /* olive (name kept)    */
  --glow-gold:      rgba(138, 103, 4, 0.22);
  --scanline:       rgba(90, 80, 30, 0.05);

  /* ---- branch fixture chrome -------------------------------
     Shared recipe for "this panel is a physical object bolted to
     the branch wall": a crisp stepped bezel plus a soft cast
     shadow falling onto the stone behind it. */
  --shade:          rgba(18, 24, 18, 0.30);    /* wall shade         */
  --shade-soft:     rgba(18, 24, 18, 0.16);
  --cast-shadow:    0 calc(6 * var(--px)) 0 0 var(--shade-soft),
                    0 22px 40px rgba(18, 24, 18, 0.30);
  --bezel:          0 0 0 var(--px) var(--ink-3),
                    0 0 0 calc(3 * var(--px)) var(--forest-2),
                    0 0 0 calc(4 * var(--px)) var(--shade-soft);

  /* ---- fonts ---------------------------------------------- */
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;  /* headings, labels — small doses */
  --font-term:  'VT323', 'Consolas', monospace;              /* terminal data, larger sizes ok */
  --font-body:  system-ui, 'Segoe UI', sans-serif;           /* long-form copy */

  /* ---- scale ---------------------------------------------- */
  --nav-h: 52px;
  --radius-px: 0px;            /* pixel world: no rounded corners */
  --px: 2px;                   /* the "pixel unit" for chunky borders */
  --z-bg: -1;
  --z-content: 1;
  --z-nav: 60;
  --z-buddy: 65;               /* ambient cat assistant           */
  --z-ticker: 70;              /* bottom status ticker            */
  --z-windows: 75;             /* draggable retro OS windows      */
  --z-overlay: 80;             /* maintenance screen, mobile menu */
  --z-toast: 90;
  --z-intro: 120;              /* boot sequence covers everything */
  --ticker-h: 28px;            /* reserved height of the ticker   */

  /* ---- motion --------------------------------------------- */
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-mech: cubic-bezier(0.65, 0, 0.35, 1);   /* mechanical, ATM-ish */
  --dur-fast: 140ms;
  --dur-med: 320ms;
  --dur-slow: 700ms;
}

/* ---- shared pixel-world primitives ------------------------ */

/* chunky pixel border via box-shadow steps (crisp, zoom-safe) */
.px-border {
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--forest-2),
    0 var(--px) 0 0 var(--forest-2),
    calc(-1 * var(--px)) 0 0 0 var(--forest-2),
    var(--px) 0 0 0 var(--forest-2);
}

/* retro terminal panel: dark surface + scanlines + soft green glow */
.term-panel {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, var(--scanline) 2px 4px),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: var(--px) solid var(--forest-2);
  outline: var(--px) solid var(--ink);
  box-shadow: 0 0 0 var(--px) var(--forest), 0 0 18px var(--glow-soft);
  color: var(--terminal-soft);
  font-family: var(--font-term);
}

.pixelated, .pixelated img, img.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}