/* ============================================================
   Poncash tokens. Glass-first, modelled on the ponsfamily.com
   surface language: near-black ground, translucent refracting
   panels, a lime accent, and a violet-to-pink action gradient.
   Light is the base, :root.dark overrides only what changes.
   ============================================================ */
:root {
  --radius: 0.85rem;
  --radius-lg: 1.35rem;

  --bg: oklch(97.5% 0.002 286);
  --bg-deep: oklch(94% 0.003 286);
  --fg: oklch(18.29% 0.0083 274.43);
  --card: oklch(100% 0 0);
  --card-fg: oklch(18.29% 0.0083 274.43);
  --muted: oklch(94.37% 0.0027 286.35);
  --muted-fg: oklch(50% 0.014 280.86);
  --border: oklch(88.65% 0.0054 286.29);
  --border-soft: oklch(93% 0.004 286);
  --input: oklch(100% 0 0);
  --elev: oklch(100% 0 0);

  /* --- glass layer --- */
  --glass-bg: oklch(100% 0 0 / 0.62);
  --glass-bg-strong: oklch(100% 0 0 / 0.8);
  --glass-bg-faint: oklch(100% 0 0 / 0.4);
  --glass-border: oklch(0% 0 0 / 0.09);
  --glass-hi: oklch(100% 0 0 / 0.9);      /* top inner highlight */
  --glass-lo: oklch(0% 0 0 / 0.06);        /* bottom inner shade */
  --glass-blur: 18px;
  --glass-sat: 1.5;
  --glass-bright: 1.02;
  --glass-shadow: 0 1px 1px oklch(0% 0 0 / 0.05), 0 10px 34px oklch(0% 0 0 / 0.09);

  --primary: oklch(54.9% 0.2055 286.94);
  --primary-fg: oklch(100% 0 0);
  --primary-end: oklch(72% 0.18 340);
  --primary-grad: linear-gradient(159deg, var(--primary) 15%, var(--primary-end) 171%);
  --primary-soft: oklch(60% 0.19 289);
  --ring: oklch(54.9% 0.2055 286.94);

  /* ponsfamily lime, used for the connect action and live markers */
  --lime: oklch(88% 0.19 118);
  --lime-fg: oklch(22% 0.05 118);
  --lime-glow: oklch(88% 0.19 118 / 0.22);

  --success: oklch(58% 0.16 148);
  --warning: oklch(68.9% 0.148 70.13);
  --danger: oklch(55.91% 0.1826 23.66);

  /* wireframe backdrop */
  --wire: oklch(0% 0 0 / 0.09);
  --wire-hot: oklch(54.9% 0.2055 286.94 / 0.5);
  --wire-node: oklch(0% 0 0 / 0.22);

  --rarity-common: oklch(59% 0 0);
  --rarity-uncommon: oklch(72% 0.16 157.73);
  --rarity-rare: oklch(72% 0.1 220.03);
  --rarity-mythic: oklch(63% 0.23 303.91);
  --rarity-legendary: oklch(82% 0.13 91.84);

  --grad-common: linear-gradient(162.7deg, #7e7e7e 15%, #c3c3c4 35%, #82838b 51%, #84848b 69%, #5c5c5e 86%);
  --grad-uncommon: linear-gradient(166deg, #2ec27e 15%, #52d699 35%, #2ec27e 51%, #2a9966 69%, #63dca4 86%);
  --grad-rare: linear-gradient(159deg, #4db5d3 15%, #76c7df 35%, #4db5d3 51%, #2e839c 69%, #87cde1 86%);
  --grad-mythic: linear-gradient(163deg, #a855f7 15%, #b290d3 35%, #a855f7 51%, #9750da 69%, #b290d3 86%);
  --grad-legendary: linear-gradient(166deg, #e3c154 15%, #9c8331 35%, #e3c154 51%, #a88f3f 69%, #ead696 86%);
  --grad-gold: linear-gradient(180deg, #f3d36b, #d4a90f);
  --grad-silver: linear-gradient(180deg, #dbdbdb, #757575);

  --font-display: Anton, 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell-w: 1220px;
  --header-h: 62px;
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.06), 0 4px 14px oklch(0% 0 0 / 0.05);
  --shadow-2: 0 18px 50px oklch(0% 0 0 / 0.14);
}

:root.dark {
  --bg: oklch(13.5% 0.004 270);
  --bg-deep: oklch(9.5% 0.004 270);
  --fg: oklch(97.34% 0.0013 286.37);
  --card: oklch(17.5% 0.006 272);
  --card-fg: oklch(97.34% 0.0013 286.37);
  --muted: oklch(21.5% 0.007 272);
  --muted-fg: oklch(67% 0.012 278);
  --border: oklch(26% 0.008 272);
  --border-soft: oklch(21% 0.007 272);
  --input: oklch(19% 0.007 272);
  --elev: oklch(16.5% 0.006 272);

  --glass-bg: oklch(100% 0 0 / 0.055);
  --glass-bg-strong: oklch(100% 0 0 / 0.1);
  --glass-bg-faint: oklch(100% 0 0 / 0.03);
  --glass-border: oklch(100% 0 0 / 0.11);
  --glass-hi: oklch(100% 0 0 / 0.24);
  --glass-lo: oklch(0% 0 0 / 0.3);
  --glass-blur: 20px;
  --glass-sat: 1.55;
  --glass-bright: 1.06;
  --glass-shadow: 0 1px 1px oklch(0% 0 0 / 0.5), 0 16px 48px oklch(0% 0 0 / 0.55);

  --primary: oklch(62% 0.2 288);
  --primary-soft: oklch(75% 0.155 290);

  --wire: oklch(100% 0 0 / 0.07);
  --wire-hot: oklch(75% 0.155 290 / 0.55);
  --wire-node: oklch(100% 0 0 / 0.2);

  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.5), 0 6px 20px oklch(0% 0 0 / 0.35);
  --shadow-2: 0 24px 70px oklch(0% 0 0 / 0.62);
}

/* Browsers without backdrop-filter get an opaque fallback so glass panels
   never turn into unreadable washes. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: var(--card); --glass-bg-strong: var(--card); --glass-bg-faint: var(--card); }
  :root.dark { --glass-bg: var(--card); --glass-bg-strong: var(--card); --glass-bg-faint: var(--card); }
}