/* ===========================================================================
   Zen Macro theme bridge
   ---------------------------------------------------------------------------
   dashboard.html, login.html and leaderboard.html are the original pages, and
   they are wired to Supabase. Rewriting their markup to match the new landing
   page would mean re-deriving that wiring, which is how working auth flows get
   broken for the sake of a colour.

   They are also, fortunately, entirely token-driven: their CSS reaches for
   var(--surface), var(--border), var(--accent) and so on, and almost never
   hard-codes a value. So this file simply redefines those tokens in terms of
   the app's palette and loads AFTER proto-real.css. No markup changes, no JS
   changes, and every page moves to the new theme at once.

   The old language was translucent glass over a blue haze. The app's is flat
   near-black panels with a hard 1px edge, so the surfaces go solid and the
   borders stop being alpha.

   Load order matters: proto-real.css, then proto-products.css, then this.
   =========================================================================== */

:root {
  /* -- surfaces: glass becomes flat panel ------------------------------- */
  --bg:    #000;
  --bg-2:  #0c0e12;
  --bg-3:  #101319;

  --surface:   #0c0e12;
  --surface-2: #101319;
  /* the two glass tokens back sticky headers and modals, where some
     translucency still earns its keep. Same hue as the app's chrome. */
  --surface-glass:        rgba(6, 8, 11, .82);
  --surface-glass-strong: rgba(10, 13, 18, .95);

  /* -- borders: solid hairlines, as in the app -------------------------- */
  --border:   #1c202a;
  --border-2: #2b313e;

  /* -- ink: the app's three levels, mapped onto the old six ------------- */
  --fg:    #f1f4fa;
  --fg-90: #e4e9f2;
  --fg-70: #a3acbe;
  --fg-60: #a3acbe;
  --fg-50: #69738a;
  --fg-40: #69738a;
  --fg-30: #4d566b;
  --fg-15: #2b313e;

  /* -- accents ---------------------------------------------------------- */
  --accent:       #4d8dff;
  --accent-hover: #2560e8;
  --accent-soft:  rgba(77, 141, 255, .16);
  --accent-pale:  #7aa9ff;
  --hl:           #4d8dff;

  --cyan:        #2ee08a;   /* re-pointed at the app's mint: both meant "live" */
  --accent-cyan: #4ce89b;

  /* resource colours stay recognisable: gold is gold because the game says so */
  --gold:        #f5c542;
  --elixir:      #e356c8;
  --dark-elixir: #8b5cf6;

  /* -- geometry: the app's 13px card corner --------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -26px #000;
  --shadow-3: 0 1px 0 rgba(255,255,255,.04) inset, 0 40px 90px -40px #000;
  --shadow-glow: 0 24px 80px -40px #4d8dff;

  --mono: "Geist Mono", "SF Mono", Consolas, ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* The old sheet leans on backdrop-filter to make glass read as a surface.
   With the surfaces now opaque that blur only costs compositing, so drop it
   everywhere except the sticky nav, where it still separates layers. */
[class*="glass"]:not(nav):not(.nav) { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Panels the old theme drew with an alpha fill and no line now need the line,
   otherwise a flat panel on a flat page has no edge at all. */
.card, .panel, .tile, .box, .zm-card, .zm-panel, .zm-tile {
  border: 1px solid var(--border);
  background: var(--surface);
}

/* Tabular figures anywhere a number is compared down a column, matching the
   app's stat cards and the landing page's leaderboard. */
.zm-stat, .zm-num, .lb-value, [class*="-value"], [class*="-num"] {
  font-variant-numeric: tabular-nums;
}