/* JFun design tokens: custom properties only. Moved verbatim from jfun-brand.css, jfun-game.css, jfun-ui.css (STEP 6), original order. Loaded FIRST by includes/pwa_head.php and includes/game_head.php. */

/* from jfun-brand.css */
/* JFun Brand v1 - pink / pastel + glassmorphism design system.
   Loaded AFTER each page's own <style>. Uses html:root (higher specificity than a page's :root),
   so it wins no matter where the <link> sits. New classes start with jf-.
   Logo colours: magenta #F20289 -> coral #FB2B52. */

/* ---------- 1. Tokens (light) ---------- */
html:root {
    --jf-pink-dark: #C4006E;
    --jf-coral: #FB2B52;
    --jf-page-bg: linear-gradient(160deg, #FFF3F8 0%, #FFE6F1 50%, #F6E9FF 100%), #FFF3F8;
    --jf-solid: #FFFFFF;
    --jf-radius: 16px;
    --jf-radius-sm: 12px;
    --jf-active: #E8338F;
    --jf-text: #8A6A80;
    --jf-fg: #3A1F33;
    --jf-skel-a: #FFE3EF;
    --jf-skel-b: #FFF0F6;
    /* semantic status tokens (solid colour, soft background, text on that background) */
  --ui-ok: #1F9D6E;
    --ui-ok-bg: #D8F5E8;
    --ui-ok-text: #0F6B49;
    --ui-warn: #D9822B;
    --ui-warn-bg: #FFEBD6;
    --ui-warn-text: #8A4B0B;
    --ui-bad: #E5484D;
    --ui-bad-bg: #FFE0E4;
    --ui-bad-text: #A3162A;
    --ui-info: #4A7BE0;
    --ui-info-bg: #E0EAFF;
    --ui-info-text: #2B4FA3;
    /* Pastel Pink Glass background blobs (used by body.jg-ui::before in jfun-ui.css) */
  --jf-blob-pink: rgba(255, 150, 200, 0.55);
    --jf-blob-lilac: rgba(200, 170, 255, 0.50);
    --jf-blob-peach: rgba(255, 200, 170, 0.50);
}

/* from jfun-brand.css */
/* ---------- 2. Tokens (dark) ---------- */
html[data-theme="dark"]:root {
    --jf-page-bg:
    radial-gradient(900px 520px at 8% -8%, rgba(242,2,137,0.28) 0%, rgba(242,2,137,0) 62%),
    radial-gradient(820px 520px at 100% 4%, rgba(251,43,82,0.20) 0%, rgba(251,43,82,0) 58%),
    radial-gradient(760px 620px at 55% 108%, rgba(140,90,255,0.22) 0%, rgba(140,90,255,0) 62%),
    #150A16;
    --jf-solid: #241226;
    --jf-active: #FF5AA9;
    --jf-text: #C9A7BD;
    --jf-fg: #FCEAF4;
    --jf-skel-a: #341A36;
    --jf-skel-b: #452446;
    --ui-ok: #2FBF8B;
    --ui-ok-bg: rgba(47, 191, 139, 0.20);
    --ui-ok-text: #8FE8C4;
    --ui-warn: #FF9A55;
    --ui-warn-bg: rgba(255, 154, 85, 0.20);
    --ui-warn-text: #FFC999;
    --ui-bad: #FF4D6D;
    --ui-bad-bg: rgba(255, 77, 109, 0.20);
    --ui-bad-text: #FF9DB0;
    --ui-info: #5B8DEF;
    --ui-info-bg: rgba(91, 141, 239, 0.22);
    --ui-info-text: #A9C4FF;
}

/* from jfun-game.css */
/* JFun Gaming UI v1
   Loaded AFTER jfun-brand.css. Dark-first "gaming" look on the same brand colours
   (magenta #F20289 -> coral #FB2B52). New classes start with jg-.
   Page files: assets/brand/game/<name>.css, overrides written as html body.jg-<page> .class */

/* ---------- A. Tokens ---------- */
html:root {
    --jg-font-display: 'Rajdhani', 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --jg-font-body: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --jg-radius: 18px;
    --jg-radius-sm: 12px;
    --jg-tap: 44px;
    --jf-nav-h: 64px;
    --jf-nav-gap: 10px;
    --jf-nav-clear: calc(var(--jf-nav-h) + var(--jf-nav-gap) + 22px);
    /* the ONE bottom-nav size: pill height, gap to the screen edge, content clearance */
  --jg-glow: 0 0 0 1px rgba(242, 2, 137, 0.35), 0 8px 24px rgba(242, 2, 137, 0.35);
    /* P21 tokens: player card, muted chip, win glow, confetti palette (read by jfun-fx.js via getComputedStyle) */
  --jg-pcard-bg: linear-gradient(160deg, #1B0D26 0%, #12081B 100%);
    --jg-chip-muted: #6B5A75;
    --jg-ok-glow: rgba(47, 191, 139, 0.45);
    --jg-confetti-1: #F20289;
    --jg-confetti-2: var(--jf-coral);
    --jg-confetti-3: var(--jg-warn);
    --jg-confetti-4: var(--accent-purple);
    --jg-confetti-5: #FFFFFF;
    /* Ludo board tokens (light glass default; dark set in the dark block below). board.js reads them with cssVar(); seat colours keep >= 3:1 on the light board */
  --ld-red: #D81B60;
    --ld-red-hi: #E876A0;
    --ld-red-lo: #971343;
    --ld-red-edge: #A21448;
    --ld-green: #1E8E4A;
    --ld-green-hi: #78BB92;
    --ld-green-lo: #156334;
    --ld-green-edge: #166A38;
    --ld-yellow: #B87400;
    --ld-yellow-hi: #D4AC66;
    --ld-yellow-lo: #815100;
    --ld-yellow-edge: #8A5700;
    --ld-blue: #1E64D0;
    --ld-blue-hi: #78A2E3;
    --ld-blue-lo: #154692;
    --ld-blue-edge: #164B9C;
    --ld-board-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 228, 242, 0.82) 100%);
    --ld-board-border: rgba(232, 51, 143, 0.45);
    --ld-board-shadow: 0 0 0 1px rgba(255, 255, 255, 0.70), 0 10px 28px rgba(226, 80, 150, 0.22);
    --ld-cell: rgba(255, 255, 255, 0.72);
    --ld-cell-border: rgba(232, 51, 143, 0.38);
    --ld-yard-inner: rgba(255, 255, 255, 0.74);
    --ld-star: #B3125E;
    --ld-centre-alpha: 0.88;
    --ld-centre-edge: rgba(255, 255, 255, 0.85);
    --ld-centre-line: rgba(255, 255, 255, 0.90);
    --ld-centre-dot: rgba(255, 255, 255, 0.92);
    --ld-centre-ring: rgba(232, 51, 143, 0.70);
    --ld-gloss: #FFFFFF;
    --ld-hl: #3D1450;
    --ld-hl-gap: #FFFFFF;
    --ld-last: #6F4A63;
    --ld-token-shadow: 0 3px 6px rgba(90, 20, 60, 0.35);
    --ld-token-ring: rgba(255, 255, 255, 0.85);
    --ld-token-shine: rgba(255, 255, 255, 0.60);
    --ld-die-face: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 226, 240, 0.82) 100%);
    --ld-die-border: rgba(232, 51, 143, 0.55);
    --ld-die-glow: 0 0 12px rgba(242, 2, 137, 0.25);
    --ld-die-inset: inset 0 0 8px rgba(255, 255, 255, 0.90);
    --ld-die-floor: rgba(90, 20, 60, 0.45);
    --ld-pip: #3A0F2C;
    --ld-title-glow: none;
}

/* from jfun-game.css */
/* dark = everything except an explicit light theme (light keeps the brand pastel tokens) */
html:root:not([data-theme="light"]) {
    --jf-page-bg:
    radial-gradient(700px 420px at 10% -6%, rgba(242, 2, 137, 0.30), transparent 62%),
    radial-gradient(640px 420px at 100% 0%, rgba(251, 43, 82, 0.20), transparent 60%),
    radial-gradient(700px 520px at 50% 110%, rgba(120, 70, 255, 0.22), transparent 62%),
    #0E0714;
    --jf-solid: #1E0F26;
    --jf-active: #FF5AA9;
    --jf-text: #C9A7BD;
    --jf-fg: #FDEFF7;
    --jf-skel-a: #341A36;
    --jf-skel-b: #452446;
    /* Ludo board tokens, dark set (the previous neon look) */
  --ld-red: #e91e63;
    --ld-red-hi: #F278A1;
    --ld-red-lo: #A31545;
    --ld-red-edge: #c2185b;
    --ld-green: #4CAF50;
    --ld-green-hi: #94CF96;
    --ld-green-lo: #357A38;
    --ld-green-edge: #388E3C;
    --ld-yellow: #FF9800;
    --ld-yellow-hi: #FFC166;
    --ld-yellow-lo: #B26A00;
    --ld-yellow-edge: #F57C00;
    --ld-blue: #2196F3;
    --ld-blue-hi: #7AC0F8;
    --ld-blue-lo: #1769AA;
    --ld-blue-edge: #1976D2;
    --ld-board-bg: linear-gradient(160deg, #1B0D26 0%, #12081B 100%);
    --ld-board-border: rgba(242, 2, 137, 0.70);
    --ld-board-shadow: 0 0 0 1px rgba(242, 2, 137, 0.25), 0 0 22px rgba(242, 2, 137, 0.30), 0 12px 32px rgba(0, 0, 0, 0.55);
    --ld-cell: #22102D;
    --ld-cell-border: rgba(255, 255, 255, 0.12);
    --ld-yard-inner: #22102D;
    --ld-star: #C9A7BD;
    --ld-centre-alpha: 1;
    --ld-centre-edge: transparent;
    --ld-centre-line: rgba(255, 255, 255, 0.85);
    --ld-centre-dot: #12081B;
    --ld-centre-ring: rgba(255, 255, 255, 0.40);
    --ld-gloss: #FFFFFF;
    --ld-hl: #FF9800;
    --ld-hl-gap: transparent;
    --ld-last: #C9A7BD;
    --ld-token-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    --ld-token-ring: rgba(255, 255, 255, 0.75);
    --ld-token-shine: rgba(255, 255, 255, 0.55);
    --ld-die-face: #22102D;
    --ld-die-border: rgba(242, 2, 137, 0.70);
    --ld-die-glow: 0 0 14px rgba(242, 2, 137, 0.30);
    --ld-die-inset: inset 0 0 8px rgba(242, 2, 137, 0.30);
    --ld-die-floor: rgba(0, 0, 0, 0.75);
    --ld-pip: #FDEFF7;
    --ld-title-glow: 0 0 14px rgba(242, 2, 137, 0.55);
}

/* from jfun-game.css */
/* ---------- Tic Tac Toe + Barah Tehni board tokens (moved from the page css files; light default, dark under data-theme=dark) ---------- */
:root {
    --ttt-x: #C2185B;
    --ttt-o: #1565C0;
    --ttt-x-glow: rgba(194, 24, 91, 0.45);
    --ttt-o-glow: rgba(21, 101, 192, 0.45);
    --ttt-pink: #F20289;
    --ttt-frame-bg: rgba(255, 255, 255, 0.55);
    --ttt-frame-border: rgba(242, 2, 137, 0.60);
    --ttt-frame-glow: rgba(242, 2, 137, 0.28);
    --ttt-frame-shadow: rgba(60, 20, 50, 0.18);
    --ttt-cell-bg: rgba(255, 255, 255, 0.50);
    --ttt-cell-border: rgba(242, 2, 137, 0.45);
    --ttt-cell-hi: rgba(255, 255, 255, 0.85);
    --ttt-cell-lo: rgba(242, 2, 137, 0.10);
    --ttt-win: #1E8E5A;
    --ttt-win-bg: rgba(47, 191, 139, 0.22);
    --ttt-win-glow: rgba(47, 191, 139, 0.65);
    --ttt-win-glow-soft: rgba(47, 191, 139, 0.45);
    --ttt-pink-40: rgba(242, 2, 137, 0.40);
    --ttt-pink-30: rgba(242, 2, 137, 0.30);
    --ttt-pink-25: rgba(242, 2, 137, 0.25);
    --ttt-pink-20: rgba(242, 2, 137, 0.20);
    --ttt-pink-10: rgba(242, 2, 137, 0.10);
    --ttt-pink-08: rgba(242, 2, 137, 0.08);
    --ttt-shade-20: rgba(0, 0, 0, 0.20);
    --ttt-shade-10: rgba(0, 0, 0, 0.10);
    --ttt-shade-25: rgba(0, 0, 0, 0.25);
    --ttt-flame-glow: rgba(255, 87, 34, 0.80);
    --ttt-blue-deep: #1976D2;
    --ttt-violet-a: #667eea;
    --ttt-violet-b: #764ba2;
    --ttt-gold: #f0b90b;
    --ttt-purple-a: #f3e5f5;
    --ttt-purple-b: #e1bee7;
    --ttt-green-a: #e8f5e9;
    --ttt-green-b: #c8e6c9;
    --ttt-amber-a: #fff3cd;
    --ttt-amber-b: #ffeaa7;
    --ttt-amber-line: #ffd54f;
    --ttt-disabled: #cccccc;
    --ttt-input-bg: rgba(255, 255, 255, 0.60);
    --ttt-input-border: rgba(242, 2, 137, 0.30);
}

/* from jfun-game.css */
html[data-theme="dark"]:root {
    --ttt-x: #FF4F9A;
    --ttt-o: #4DB3FF;
    --ttt-x-glow: rgba(255, 79, 154, 0.60);
    --ttt-o-glow: rgba(77, 179, 255, 0.60);
    --ttt-frame-bg: rgba(27, 13, 38, 0.80);
    --ttt-frame-shadow: rgba(0, 0, 0, 0.55);
    --ttt-cell-bg: rgba(46, 23, 64, 0.80);
    --ttt-cell-border: rgba(255, 255, 255, 0.12);
    --ttt-cell-hi: rgba(255, 255, 255, 0.06);
    --ttt-cell-lo: rgba(0, 0, 0, 0.35);
    --ttt-win: #4CD08F;
    --ttt-purple-a: rgba(166, 107, 255, 0.18);
    --ttt-purple-b: rgba(166, 107, 255, 0.30);
    --ttt-green-a: rgba(47, 191, 139, 0.18);
    --ttt-green-b: rgba(47, 191, 139, 0.30);
    --ttt-amber-a: rgba(255, 154, 85, 0.18);
    --ttt-amber-b: rgba(255, 154, 85, 0.30);
    --ttt-disabled: #4a3a55;
    --ttt-input-bg: rgba(0, 0, 0, 0.25);
    --ttt-input-border: rgba(255, 255, 255, 0.18);
}

/* from jfun-game.css */
:root {
    --bt-p1: #D81B60;
    --bt-p1-edge: #880E4F;
    --bt-p2: #1565C0;
    --bt-p2-edge: #0D47A1;
    --bt-board-a: rgba(255, 255, 255, 0.78);
    --bt-board-b: rgba(255, 236, 246, 0.62);
    --bt-board-border: rgba(242, 2, 137, 0.55);
    --bt-line: rgba(242, 2, 137, 0.45);
    --bt-node-fill: rgba(255, 255, 255, 0.80);
    --bt-node-stroke: rgba(242, 2, 137, 0.50);
    --bt-piece-shadow: rgba(60, 20, 50, 0.35);
    --bt-hi-1: rgba(255, 255, 255, 0.80);
    --bt-hi-2: rgba(255, 255, 255, 0.60);
    --bt-select: #E65100;
    --bt-select-fill: rgba(230, 81, 0, 0.20);
    --bt-legal-fill: rgba(46, 125, 50, 0.92);
    --bt-legal-ring: rgba(46, 125, 50, 0.65);
    --bt-cap: #C62828;
    --bt-cap-fill: rgba(198, 40, 40, 0.92);
    --bt-cap-ring: rgba(198, 40, 40, 0.65);
    --bt-on-dot: #FFFFFF;
    --bt-board-shadow: 0 0 0 1px rgba(242, 2, 137, 0.25), 0 0 22px rgba(242, 2, 137, 0.28), 0 12px 32px rgba(60, 20, 50, 0.18);
    --bt-pink-40: rgba(242, 2, 137, 0.40);
    --bt-pink-30: rgba(242, 2, 137, 0.30);
    --bt-pink-25: rgba(242, 2, 137, 0.25);
    --bt-pink-20: rgba(242, 2, 137, 0.20);
    --bt-pink-10: rgba(242, 2, 137, 0.10);
    --bt-pink-08: rgba(242, 2, 137, 0.08);
    --bt-shade-25: rgba(0, 0, 0, 0.25);
    --bt-shade-20: rgba(0, 0, 0, 0.20);
    --bt-shade-10: rgba(0, 0, 0, 0.10);
    --bt-flame-glow: rgba(255, 87, 34, 0.80);
    --bt-blue-deep: #1976D2;
    --bt-violet-a: #667eea;
    --bt-violet-b: #764ba2;
    --bt-gold: #f0b90b;
    --bt-purple-a: #f3e5f5;
    --bt-purple-b: #e1bee7;
    --bt-green-a: #e8f5e9;
    --bt-green-b: #c8e6c9;
    --bt-amber-a: #fff3cd;
    --bt-amber-b: #ffeaa7;
    --bt-amber-line: #ffd54f;
    --bt-disabled: #cccccc;
    --bt-input-bg: rgba(255, 255, 255, 0.60);
    --bt-input-border: rgba(242, 2, 137, 0.30);
}

/* from jfun-game.css */
html[data-theme="dark"]:root {
    --bt-p1: #FF4F9A;
    --bt-p1-edge: #C4006E;
    --bt-p2: #4DB3FF;
    --bt-p2-edge: #1976D2;
    --bt-board-a: rgba(27, 13, 38, 0.92);
    --bt-board-b: rgba(18, 8, 27, 0.92);
    --bt-line: rgba(255, 255, 255, 0.22);
    --bt-node-fill: rgba(34, 16, 45, 1);
    --bt-node-stroke: rgba(255, 255, 255, 0.28);
    --bt-piece-shadow: rgba(0, 0, 0, 0.50);
    --bt-hi-1: rgba(255, 255, 255, 0.75);
    --bt-hi-2: rgba(255, 255, 255, 0.55);
    --bt-select: #FF9800;
    --bt-select-fill: rgba(255, 152, 0, 0.25);
    --bt-legal-fill: rgba(76, 175, 80, 0.85);
    --bt-legal-ring: rgba(76, 175, 80, 0.60);
    --bt-cap: #F44336;
    --bt-cap-fill: rgba(244, 67, 54, 0.90);
    --bt-cap-ring: rgba(244, 67, 54, 0.60);
    --bt-board-shadow: 0 0 0 1px rgba(242, 2, 137, 0.25), 0 0 22px rgba(242, 2, 137, 0.30), 0 12px 32px rgba(0, 0, 0, 0.55);
    --bt-purple-a: rgba(166, 107, 255, 0.18);
    --bt-purple-b: rgba(166, 107, 255, 0.30);
    --bt-green-a: rgba(47, 191, 139, 0.18);
    --bt-green-b: rgba(47, 191, 139, 0.30);
    --bt-amber-a: rgba(255, 154, 85, 0.18);
    --bt-amber-b: rgba(255, 154, 85, 0.30);
    --bt-disabled: #4a3a55;
    --bt-input-bg: rgba(0, 0, 0, 0.25);
    --bt-input-border: rgba(255, 255, 255, 0.18);
}

/* from jfun-ui.css */
/* JFun UI Kit v1 - single source of the shared look. Edit only via a "Design Change" step. */

/* ===================== TOKENS ===================== */
:root {
    /* spacing */
  --ui-s1: 4px;
    --ui-s2: 8px;
    --ui-s3: 12px;
    --ui-s4: 16px;
    --ui-s5: 24px;
    --ui-s6: 32px;
    /* spacing standard (Polish Pack) */
  --ui-gap: 12px;
  /* vertical gap between cards on frame pages, R12 */
  --ui-card-gap: var(--ui-gap);
    --ui-gap-sm: 8px;
    --ui-pad-lg: 16px;
    --ui-pad-md: 12px;
    --ui-page-x: 16px;
    /* page frame: side padding, top padding and max width of every page (PF, R11) */
    --ui-frame-x: 12px; --ui-frame-top: 10px; --ui-frame-max: 640px;
    --ui-section-gap: 20px;
    /* radius */
  --ui-r-sm: 12px;
    --ui-r-md: 16px;
    --ui-r-lg: 20px;
    --ui-r-pill: 999px;
    /* font sizes */
  --ui-fs-xs: 12px;
    --ui-fs-sm: 14px;
    --ui-fs-md: 16px;
    --ui-fs-lg: 20px;
    --ui-fs-xl: 28px;
    /* sizes + motion */
  --ui-tap: 48px;
    --ui-tap-sm: 40px;
    --ui-topbar-h: 56px;
    --ui-ease: 150ms ease;
    /* fonts */
  --ui-font-display: var(--jg-font-display, 'Rajdhani', system-ui, sans-serif);
    --ui-font-body: var(--jg-font-body, 'Poppins', system-ui, sans-serif);
    /* colour aliases (existing tokens, so dark and light themes keep working) */
  --ui-text: var(--text-color);
    --ui-muted: var(--text-secondary);
    --ui-surface: var(--jf-glass);
    --ui-surface-solid: var(--jg-surface-2, var(--card-bg));
    --ui-border: var(--jf-glass-border);
    --ui-shadow: var(--jf-glass-shadow);
    --ui-accent: var(--jf-pink);
    --ui-grad: var(--jf-grad);
    --ui-grad-soft: var(--jf-grad-soft);
    --ui-ok: var(--jg-ok);
    --ui-warn: var(--jg-warn);
    --ui-bad: var(--jg-bad);
    --ui-nav-bg: var(--jf-nav-bg);
    --ui-nav-border: var(--jf-nav-border);
    --ui-nav-shadow: var(--jf-nav-shadow);
    --ui-toast-bg: var(--jf-toast-bg);
    /* literals (allowed only here) */
  --ui-on-accent: #fff;
    --ui-accent-shadow: 0 6px 18px rgba(242,2,137,0.30);
    /* P12 tokens: solid accent gradients for icon discs / buttons (white icon on them), scrims, on-accent tints, footer badge */
  --ui-grad-ok: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    --ui-grad-info: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    --ui-grad-warn: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    --ui-grad-purple: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    --ui-glow-purple: 0 5px 15px rgba(156,39,176,0.40);
    --ui-glow-purple-lg: 0 10px 25px rgba(156,39,176,0.60);
    --ui-scrim-20: rgba(0,0,0,0.20);
    --ui-scrim-28: rgba(0,0,0,0.28);
    --ui-scrim-30: rgba(0,0,0,0.30);
    --ui-scrim-40: rgba(0,0,0,0.40);
    --ui-on-accent-22: rgba(255,255,255,0.22);
    --ui-bad-strong: #C62828;
    /* P13 tokens: deep ends of the accent gradients, purple pair, extra on-accent tints */
  --ui-info-deep: #1565C0;
    --ui-warn-deep: #F57C00;
    --ui-ok-deep: #2E7D32;
    --ui-purple: #9C27B0;
    --ui-purple-deep: #7B1FA2;
    --ui-purple-text: #7B1FA2;
    --ui-on-accent-10: rgba(255,255,255,0.10);
    --ui-on-accent-30: rgba(255,255,255,0.30);
    --ui-accent-glow: rgba(242,2,137,0.55);
    /* P15 tokens: deep-orange accent (games card), stronger white tint */
  --ui-flame: #FF5722;
    --ui-flame-deep: #E64A19;
    --ui-flame-text: #E64A19;
    --ui-on-accent-50: rgba(255,255,255,0.50);
    --ui-on-accent-85: rgba(255,255,255,0.85);
    /* P17 tokens (money pages): accent ring/lift shadows, status tints, text on ok/bad buttons */
  --ui-accent-ring: rgba(242,2,137,0.30);
    --ui-accent-lift: 0 12px 26px rgba(242,2,137,0.36);
    --ui-accent-lift-sm: 0 8px 20px rgba(242,2,137,0.28);
    --ui-ok-tint: rgba(47,191,139,0.16);
    --ui-warn-tint: rgba(255,154,85,0.16);
    --ui-bad-tint: rgba(255,77,109,0.16);
    --ui-ok-tint-08: rgba(47,191,139,0.08);
    --ui-warn-tint-08: rgba(255,154,85,0.08);
    --ui-on-ok: #062A1E;
    --ui-on-bad: #2A0510;
    --ui-purple-bg: #F3E5F5;
    /* P19 tokens: ok/bad button glows (balance transfer accept/reject) */
  --ui-ok-shadow: 0 4px 12px rgba(76,175,80,0.30);
    --ui-ok-shadow-lg: 0 6px 16px rgba(76,175,80,0.40);
    --ui-bad-shadow: 0 4px 12px rgba(244,67,54,0.30);
    --ui-bad-shadow-lg: 0 6px 16px rgba(244,67,54,0.40);
    /* P20 tokens (referrals): fixed deep pink for text on a white button, info tint */
  --ui-accent-deep: #A3005F;
    --ui-info-tint: rgba(91,141,239,0.16);
}

/* from jfun-ui.css */
html[data-theme="dark"]:root {
    --ui-flame-text: #FFAB91;
}

/* from jfun-ui.css */
html[data-theme="dark"]:root {
    --ui-purple-text: #D9A8E8;
}

/* from jfun-ui.css */
html[data-theme="dark"]:root {
    --ui-purple-bg: rgba(166,107,255,0.16);
}

/* from jfun-ui.css */
/* Pastel Pink Glass (P10) - text/ring/button tokens that pass WCAG AA (>= 4.5:1 text, >= 3:1 rings) on the glass surfaces of BOTH themes.
   Brand colour --ui-accent stays for borders/fills; use --ui-accent-text for pink TEXT and icons. White-on-pink needs the darker --ui-grad-btn. */
html:root {
    --ui-muted: #735068;
    --ui-accent-text: #B3125E;
    --ui-grad-btn: linear-gradient(135deg, #C4006E 0%, #D0103A 100%);
    --ui-btn-shadow: 0 6px 18px rgba(196, 0, 110, 0.28);
    --ui-danger-btn: #B4232A;
    --ui-focus: #B3125E;
    --ui-glass-edge: rgba(255, 255, 255, 0.85);
    --ui-disabled-bg: rgba(115, 80, 104, 0.12);
}

/* from jfun-ui.css */
html[data-theme="dark"]:root {
    --ui-muted: var(--text-secondary);
    --ui-accent-text: var(--jf-active);
    --ui-focus: #FF8FC4;
    --ui-glass-edge: rgba(255, 255, 255, 0.08);
    --ui-disabled-bg: rgba(255, 255, 255, 0.08);
}

/* from jfun-ui.css */
/* P11 tokens (forms, semantic pastels, modal glass). Opaque pastels on purpose: text keeps >= 4.5:1 on any background behind them. */
html:root {
    --ui-input-bg: var(--jf-glass-strong);
    --ui-input-border: rgba(115, 80, 104, 0.45);
    --ui-focus-ring: rgba(179, 18, 94, 0.22);
    --ui-ok-bg: #E4F7EC;
    --ui-ok-text: #14603C;
    --ui-ok-line: #8FD2AC;
    --ui-warn-bg: #FFF3D9;
    --ui-warn-text: #7A4A00;
    --ui-warn-line: #EDC878;
    --ui-bad-bg: #FFE4E8;
    --ui-bad-text: #9C1C2B;
    --ui-bad-line: #EE9BA8;
    --ui-info-bg: #E6EEFF;
    --ui-info-text: #1F4FA8;
    --ui-info-line: #A2B8EE;
    --ui-overlay-soft: rgba(255, 205, 230, 0.55);
    --ui-skel-a: rgba(179, 18, 94, 0.08);
    --ui-skel-b: rgba(179, 18, 94, 0.16);
    --ui-row-hover: rgba(242, 2, 137, 0.06);
}

/* from jfun-ui.css */
html[data-theme="dark"]:root {
    --ui-input-border: rgba(255, 255, 255, 0.24);
    --ui-focus-ring: rgba(255, 143, 196, 0.28);
    --ui-ok-bg: #17382A;
    --ui-ok-text: #8FE5B8;
    --ui-ok-line: #2F7556;
    --ui-warn-bg: #3D2F10;
    --ui-warn-text: #FFD98A;
    --ui-warn-line: #8A6A1E;
    --ui-bad-bg: #43181F;
    --ui-bad-text: #FFA3AF;
    --ui-bad-line: #8F3340;
    --ui-info-bg: #1B2A4A;
    --ui-info-text: #A9C4FF;
    --ui-info-line: #3F5FA8;
    --ui-overlay-soft: rgba(24, 8, 30, 0.62);
    --ui-skel-a: rgba(255, 255, 255, 0.06);
    --ui-skel-b: rgba(255, 255, 255, 0.14);
    --ui-row-hover: rgba(255, 143, 196, 0.08);
}