/* Shared design tokens and theme utilities */
:root,
:root[data-theme="default"] {
  color-scheme: dark;

  /* Foundation: colors */
  --fd-color-hex-00e676: #00e676;
  --fd-color-hex-06bbd9: #06BBD9;
  --fd-color-hex-07121a: #07121a;
  --fd-color-hex-08d4f5: #08d4f5;
  --fd-color-hex-0a0b0d: #0a0b0d;
  --fd-color-hex-0f1113: #0f1113;
  --fd-color-hex-111215: #111215;
  --fd-color-hex-111215cc: #111215cc;
  --fd-color-hex-1e2126: #1e2126;
  --fd-color-hex-2a2e35: #2a2e35;
  --fd-color-hex-444: #444;
  --fd-color-hex-4ade80: #4ade80;
  --fd-color-hex-63b3ed: #63b3ed;
  --fd-color-hex-64e65a: #64e65a;
  --fd-color-hex-68d391: #68d391;
  --fd-color-hex-6b7280: #6b7280;
  --fd-color-hex-888: #888;
  --fd-color-hex-8b1a1a: #8b1a1a;
  --fd-color-hex-999: #999;
  --fd-color-hex-9ca3af: #9ca3af;
  --fd-color-hex-ff4c4c: #FF4C4C;
  --fd-color-hex-b46e3c: #b46e3c;
  --fd-color-hex-b4b4c3: #b4b4c3;
  --fd-color-hex-c070f0: #c070f0;
  --fd-color-hex-dde1e8: #dde1e8;
  --fd-color-hex-e05252: #e05252;
  --fd-color-hex-e0e0e0: #e0e0e0;
  --fd-color-hex-f0609a: #f0609a;
  --fd-color-hex-f59e0b: #f59e0b;
  --fd-color-hex-f5c842: #f5c842;
  --fd-color-hex-f87171: #f87171;
  --fd-color-hex-fb923c: #fb923c;
  --fd-color-hex-ff6b6b: #ff6b6b;
  --fd-color-hex-ff9800: #ff9800;
  --fd-color-hex-ff9c54: #ff9c54;
  --fd-color-hex-ffc832: #ffc832;
  --fd-color-hex-ffd700: #ffd700;
  --fd-color-hex-ffeb3b: #ffeb3b;
  --fd-color-hex-fff: #fff;
  --fd-color-rgba-0-0-0-0: rgba(0, 0, 0, 0.00);
  --fd-color-rgba-0-0-0-0-3: rgba(0,0,0,0.3);
  --fd-color-rgba-0-0-0-0-35: rgba(0, 0, 0, 0.35);
  --fd-color-rgba-0-0-0-0-4: rgba(0,0,0,0.4);
  --fd-color-rgba-0-0-0-0-5: rgba(0,0,0,0.5);
  --fd-color-rgba-0-0-0-0-65: rgba(0, 0, 0, 0.65);
  --fd-color-rgba-0-0-0-0-66: rgba(0, 0, 0, 0.66);
  --fd-color-rgba-0-0-0-0-9: rgba(0, 0, 0, 0.90);
  --fd-color-rgba-0-0-0-0-98: rgba(0, 0, 0, 0.98);
  --fd-color-rgba-0-230-118-0-06: rgba(0, 230, 118, 0.06);
  --fd-color-rgba-0-230-118-0-12: rgba(0, 230, 118, 0.12);
  --fd-color-rgba-0-230-118-0-3: rgba(0, 230, 118, 0.3);
  --fd-color-rgba-0-0-0-0-45: rgba(0,0,0,0.45);
  --fd-color-rgba-0-0-0-0-55: rgba(0,0,0,0.55);
  --fd-color-rgba-0-0-0-0-6: rgba(0,0,0,0.6);
  --fd-color-rgba-0-0-0-0-7: rgba(0,0,0,0.7);
  --fd-color-rgba-0-0-0-0-8: rgba(0,0,0,0.8);
  --fd-color-rgba-0-0-0-0-85: rgba(0,0,0,0.85);
  --fd-color-rgba-10-11-13-0: rgba(10, 11, 13, 0);
  --fd-color-rgba-100-230-90-0-12: rgba(100, 230, 90, 0.12);
  --fd-color-rgba-154-230-180-0-15: rgba(154,230,180,0.15);
  --fd-color-rgba-154-230-180-0-3: rgba(154,230,180,0.3);
  --fd-color-rgba-17-24-38-0-94: rgba(17, 24, 38, 0.94);
  --fd-color-rgba-180-0-255-0-12: rgba(180, 0, 255, 0.12);
  --fd-color-rgba-180-110-60-0-18: rgba(180,110,60,0.18);
  --fd-color-rgba-180-180-195-0-15: rgba(180,180,195,0.15);
  --fd-color-rgba-20-22-26-0-85: rgba(20,22,26,0.85);
  --fd-color-rgba-224-82-82-0-1: rgba(224,82,82,0.1);
  --fd-color-rgba-224-82-82-0-15: rgba(224,82,82,0.15);
  --fd-color-rgba-245-200-66-0-12: rgba(245,200,66,0.12);
  --fd-color-rgba-245-200-66-0-35: rgba(245,200,66,0.35);
  --fd-color-rgba-248-113-113-0-1: rgba(248,113,113,0.1);
  --fd-color-rgba-251-146-60-0-1: rgba(251,146,60,0.1);
  --fd-color-rgba-251-146-60-0-15: rgba(251,146,60,0.15);
  --fd-color-rgba-251-146-60-0-28: rgba(251,146,60,0.28);
  --fd-color-rgba-251-146-60-0-35: rgba(251,146,60,0.35);
  --fd-color-rgba-255-152-0-0-13: rgba(255, 152, 0, 0.13);
  --fd-color-rgba-255-152-0-0-15: rgba(255, 152, 0, 0.15);
  --fd-color-rgba-255-152-0-0-28: rgba(255, 152, 0, 0.28);
  --fd-color-rgba-255-152-0-0-3: rgba(255, 152, 0, 0.3);
  --fd-color-rgba-255-152-0-0-45: rgba(255, 152, 0, 0.45);
  --fd-color-rgba-255-215-0-0-45: rgba(255, 215, 0, 0.45);
  --fd-color-rgba-255-235-59-0-12: rgba(255, 235, 59, 0.12);
  --fd-color-rgba-255-255-255-0-08: rgba(255,255,255,0.08);
  --fd-color-rgba-255-60-120-0-12: rgba(255, 60, 120, 0.12);
  --fd-color-rgba-255-76-76-0-06: rgba(255,76,76,0.06);
  --fd-color-rgba-255-76-76-0-12: rgba(255, 76, 76, 0.12);
  --fd-color-rgba-255-76-76-0-15: rgba(255, 76, 76, 0.15);
  --fd-color-rgba-255-76-76-0-28: rgba(255, 76, 76, 0.28);
  --fd-color-rgba-255-76-76-0-3: rgba(255, 76, 76, 0.3);
  --fd-color-rgba-255-76-76-0-5: rgba(255, 76, 76, 0.5);
  --fd-color-rgba-255-200-50-0-12: rgba(255,200,50,0.12);
  --fd-color-rgba-255-200-50-0-15: rgba(255,200,50,0.15);
  --fd-color-rgba-255-200-50-0-18: rgba(255,200,50,0.18);
  --fd-color-rgba-255-200-50-0-3: rgba(255,200,50,0.3);
  --fd-color-rgba-255-255-255-0-05: rgba(255,255,255,0.05);
  --fd-color-rgba-255-255-255-0-06: rgba(255,255,255,0.06);
  --fd-color-rgba-255-255-255-0-07: rgba(255,255,255,0.07);
  --fd-color-rgba-255-255-255-0-09: rgba(255,255,255,0.09);
  --fd-color-rgba-255-255-255-0-1: rgba(255,255,255,0.1);
  --fd-color-rgba-255-255-255-0-12: rgba(255,255,255,0.12);
  --fd-color-rgba-255-255-255-0-15: rgba(255,255,255,0.15);
  --fd-color-rgba-255-255-255-0-2: rgba(255,255,255,0.2);
  --fd-color-rgba-255-255-255-0-5: rgba(255,255,255,0.5);
  --fd-color-rgba-255-255-255-0-55: rgba(255,255,255,0.55);
  --fd-color-rgba-255-255-255-0-85: rgba(255,255,255,0.85);
  --fd-color-rgba-42-46-53-0-45: rgba(42,46,53,0.45);
  --fd-color-rgba-42-46-53-0-5: rgba(42,46,53,0.5);
  --fd-color-rgba-50-50-50-0-35: rgba(50, 50, 50, 0.35);
  --fd-color-rgba-6-187-217-0: rgba(6, 187, 217, 0);
  --fd-color-rgba-6-187-217-0-06: rgba(6, 187, 217, 0.06);
  --fd-color-rgba-6-187-217-0-08: rgba(6,187,217,0.08);
  --fd-color-rgba-6-187-217-0-1: rgba(6, 187, 217, 0.10);
  --fd-color-rgba-6-187-217-0-12: rgba(6, 187, 217, 0.12);
  --fd-color-rgba-6-187-217-0-16: rgba(6, 187, 217, 0.16);
  --fd-color-rgba-6-187-217-0-18: rgba(6, 187, 217, 0.18);
  --fd-color-rgba-6-187-217-0-2: rgba(6, 187, 217, 0.20);
  --fd-color-rgba-6-187-217-0-22: rgba(6, 187, 217, 0.22);
  --fd-color-rgba-6-187-217-0-28: rgba(6, 187, 217, 0.28);
  --fd-color-rgba-6-187-217-0-35: rgba(6, 187, 217, 0.35);
  --fd-color-rgba-6-187-217-0-45: rgba(6, 187, 217, 0.45);
  --fd-color-rgba-6-187-217-0-5: rgba(6, 187, 217, 0.5);
  --fd-color-rgba-6-187-217-0-15: rgba(6,187,217,0.15);
  --fd-color-rgba-6-187-217-0-25: rgba(6,187,217,0.25);
  --fd-color-rgba-7-18-26-0-94: rgba(7, 18, 26, 0.94);
  --fd-color-rgba-7-18-26-0-98: rgba(7, 18, 26, 0.98);
  --fd-color-rgba-99-179-237-0-15: rgba(99,179,237,0.15);
  --fd-color-rgba-99-179-237-0-3: rgba(99,179,237,0.3);

  /* Foundation: typography */
  --font-family-ui: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-display: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-data: 'Consolas', 'SF Mono', ui-monospace, monospace;
  --font-family-splash: 'Splash', cursive;
  --font-family-bangers: 'Bangers', cursive;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-rem-0-62: 0.62rem;
  --font-size-rem-0-65: 0.65rem;
  --font-size-rem-0-67: 0.67rem;
  --font-size-rem-0-68: 0.68rem;
  --font-size-em-0-6: 0.6em;
  --font-size-rem-0-6: 0.6rem;
  --font-size-rem-0-72: 0.72rem;
  --font-size-rem-0-73: 0.73rem;
  --font-size-rem-0-74: 0.74rem;
  --font-size-rem-0-75: 0.75rem;
  --font-size-rem-0-76: 0.76rem;
  --font-size-rem-0-78: 0.78rem;
  --font-size-rem-0-7: 0.7rem;
  --font-size-rem-0-81: 0.81rem;
  --font-size-rem-0-82: 0.82rem;
  --font-size-rem-0-83: 0.83rem;
  --font-size-rem-0-84: 0.84rem;
  --font-size-rem-0-85: 0.85rem;
  --font-size-rem-0-875: 0.875rem;
  --font-size-rem-0-88: 0.88rem;
  --font-size-em-0-8: 0.8em;
  --font-size-rem-0-8: 0.8rem;
  --font-size-rem-0-95: 0.95rem;
  --font-size-rem-0-9: 0.9rem;
  --font-size-rem-1-05: 1.05rem;
  --font-size-rem-1: 1rem;
  --font-size-rem-1-15: 1.15rem;
  --font-size-rem-1-1: 1.1rem;
  --font-size-rem-1-2: 1.2rem;
  --font-size-rem-1-3: 1.3rem;
  --font-size-rem-1-4: 1.4rem;
  --font-size-rem-1-5: 1.5rem;
  --font-size-rem-1-6: 1.6rem;
  --font-size-rem-1-75: 1.75rem;
  --font-size-rem-1-7: 1.7rem;
  --font-size-rem-1-8: 1.8rem;
  --font-size-px-14: 14px;
  --font-size-px-15: 15px;
  --font-size-rem-2-2: 2.2rem;
  --font-size-rem-2-5: 2.5rem;
  --font-size-rem-2: 2rem;
  --line-height-0: 0;
  --line-height-1: 1;
  --line-height-1-1: 1.1;
  --line-height-1-15: 1.15;
  --line-height-1-2: 1.2;
  --line-height-1-3: 1.3;
  --line-height-1-4: 1.4;
  --line-height-1-5: 1.5;
  --line-height-1-6: 1.6;

  /* Foundation: sizes */
  --fd-size-pct-0: 0%;
  --fd-size-em-0-02: 0.02em;
  --fd-size-rem-0-05: 0.05rem;
  --fd-size-rem-0-08: 0.08rem;
  --fd-size-rem-0-15: 0.15rem;
  --fd-size-rem-0-18: 0.18rem;
  --fd-size-rem-0-1: 0.1rem;
  --fd-size-rem-0-25: 0.25rem;
  --fd-size-rem-0-28: 0.28rem;
  --fd-size-rem-0-2: 0.2rem;
  --fd-size-rem-0-32: 0.32rem;
  --fd-size-rem-0-35: 0.35rem;
  --fd-size-rem-0-38: 0.38rem;
  --fd-size-px-0-3: 0.3px;
  --fd-size-rem-0-3: 0.3rem;
  --fd-size-rem-0-42: 0.42rem;
  --fd-size-rem-0-45: 0.45rem;
  --fd-size-rem-0-48: 0.48rem;
  --fd-size-px-0-4: 0.4px;
  --fd-size-rem-0-4: 0.4rem;
  --fd-size-rem-0-55: 0.55rem;
  --fd-size-px-0-5: 0.5px;
  --fd-size-rem-0-5: 0.5rem;
  --fd-size-rem-0-62: 0.62rem;
  --fd-size-rem-0-65: 0.65rem;
  --fd-size-rem-0-67: 0.67rem;
  --fd-size-rem-0-68: 0.68rem;
  --fd-size-em-0-6: 0.6em;
  --fd-size-px-0-6: 0.6px;
  --fd-size-rem-0-6: 0.6rem;
  --fd-size-rem-0-72: 0.72rem;
  --fd-size-rem-0-73: 0.73rem;
  --fd-size-rem-0-74: 0.74rem;
  --fd-size-rem-0-75: 0.75rem;
  --fd-size-rem-0-76: 0.76rem;
  --fd-size-rem-0-78: 0.78rem;
  --fd-size-px-0-7: 0.7px;
  --fd-size-rem-0-7: 0.7rem;
  --fd-size-rem-0-81: 0.81rem;
  --fd-size-rem-0-82: 0.82rem;
  --fd-size-rem-0-83: 0.83rem;
  --fd-size-rem-0-84: 0.84rem;
  --fd-size-rem-0-85: 0.85rem;
  --fd-size-rem-0-875: 0.875rem;
  --fd-size-rem-0-88: 0.88rem;
  --fd-size-em-0-8: 0.8em;
  --fd-size-px-0-8: 0.8px;
  --fd-size-rem-0-8: 0.8rem;
  --fd-size-rem-0-95: 0.95rem;
  --fd-size-px-0-9: 0.9px;
  --fd-size-rem-0-9: 0.9rem;
  --fd-size-rem-1-05: 1.05rem;
  --fd-size-rem-1: 1rem;
  --fd-size-rem-1-15: 1.15rem;
  --fd-size-rem-1-1: 1.1rem;
  --fd-size-rem-1-25: 1.25rem;
  --fd-size-rem-1-2: 1.2rem;
  --fd-size-rem-1-3: 1.3rem;
  --fd-size-rem-1-4: 1.4rem;
  --fd-size-rem-1-5: 1.5rem;
  --fd-size-rem-1-6: 1.6rem;
  --fd-size-rem-1-75: 1.75rem;
  --fd-size-rem-1-7: 1.7rem;
  --fd-size-rem-1-8: 1.8rem;
  --fd-size-pct-100: 100%;
  --fd-size-vh-100: 100vh;
  --fd-size-px-10: 10px;
  --fd-size-px-108: 108px;
  --fd-size-px-1100: 1100px;
  --fd-size-px-120: 120px;
  --fd-size-px-1280: 1280px;
  --fd-size-px-12: 12px;
  --fd-size-pct-130: 130%;
  --fd-size-px-130: 130px;
  --fd-size-px-13: 13px;
  --fd-size-pct-140: 140%;
  --fd-size-px-1400: 1400px;
  --fd-size-px-14: 14px;
  --fd-size-px-150: 150px;
  --fd-size-px-15: 15px;
  --fd-size-px-160: 160px;
  --fd-size-px-168: 168px;
  --fd-size-px-16: 16px;
  --fd-size-vw-16: 16vw;
  --fd-size-px-188: 188px;
  --fd-size-px-18: 18px;
  --fd-size-px-1: 1px;
  --fd-size-rem-2-2: 2.2rem;
  --fd-size-rem-2-5: 2.5rem;
  --fd-size-px-200: 200px;
  --fd-size-px-20: 20px;
  --fd-size-px-210: 210px;
  --fd-size-px-216: 216px;
  --fd-size-px-220: 220px;
  --fd-size-px-22: 22px;
  --fd-size-px-24: 24px;
  --fd-size-px-26: 26px;
  --fd-size-px-280: 280px;
  --fd-size-px-28: 28px;
  --fd-size-px-2: 2px;
  --fd-size-rem-2: 2rem;
  --fd-size-rem-3-2: 3.2rem;
  --fd-size-pct-30: 30%;
  --fd-size-px-300: 300px;
  --fd-size-px-320: 320px;
  --fd-size-px-32: 32px;
  --fd-size-px-340: 340px;
  --fd-size-px-34: 34px;
  --fd-size-pct-35: 35%;
  --fd-size-pct-36: 36%;
  --fd-size-px-360: 360px;
  --fd-size-px-38: 38px;
  --fd-size-px-3: 3px;
  --fd-size-rem-3: 3rem;
  --fd-size-px-400: 400px;
  --fd-size-px-40: 40px;
  --fd-size-pct-42: 42%;
  --fd-size-px-420: 420px;
  --fd-size-px-42: 42px;
  --fd-size-px-44: 44px;
  --fd-size-px-46: 46px;
  --fd-size-px-480: 480px;
  --fd-size-px-4: 4px;
  --fd-size-rem-4: 4rem;
  --fd-size-pct-50: 50%;
  --fd-size-px-50: 50px;
  --fd-size-pct-52: 52%;
  --fd-size-px-520: 520px;
  --fd-size-px-52: 52px;
  --fd-size-px-540: 540px;
  --fd-size-px-54: 54px;
  --fd-size-px-560: 560px;
  --fd-size-px-56: 56px;
  --fd-size-px-580: 580px;
  --fd-size-px-58: 58px;
  --fd-size-px-5: 5px;
  --fd-size-pct-60: 60%;
  --fd-size-px-600: 600px;
  --fd-size-px-60: 60px;
  --fd-size-vw-60: 60vw;
  --fd-size-pct-62: 62%;
  --fd-size-px-640: 640px;
  --fd-size-px-64: 64px;
  --fd-size-pct-65: 65%;
  --fd-size-px-66: 66px;
  --fd-size-px-680: 680px;
  --fd-size-px-68: 68px;
  --fd-size-px-6: 6px;
  --fd-size-pct-70: 70%;
  --fd-size-px-720: 720px;
  --fd-size-px-72: 72px;
  --fd-size-px-768: 768px;
  --fd-size-px-76: 76px;
  --fd-size-px-7: 7px;
  --fd-size-px-800: 800px;
  --fd-size-px-80: 80px;
  --fd-size-pct-82: 82%;
  --fd-size-px-82: 82px;
  --fd-size-vh-88: 88vh;
  --fd-size-px-8: 8px;
  --fd-size-pct-90: 90%;
  --fd-size-px-900: 900px;
  --fd-size-px-90: 90px;
  --fd-size-vh-90: 90vh;
  --fd-size-vh-92: 92vh;
  --fd-size-vw-94: 94vw;
  --fd-size-px-960: 960px;
  --fd-size-px-999: 999px;
  --fd-size-px-9: 9px;

  /* Foundation: radii */
  --radius-2xs: 2px;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-sm-plus: 5px;
  --radius-md-minus: 6px;
  --radius-md-sm: 7px;
  --radius-md: 10px;
  --radius-lg-minus: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-hero: 20px;
  --radius-circle: 50%;
  --radius-pill: 999px;
  --radius-bottom-md: 0 0 10px 10px;
  --radius-bottom-lg: 0 0 8px 8px;
  --radius-top-lg: 8px 8px 0 0;
  --radius-top-md: var(--radius) var(--radius) 0 0;
  --radius-inherit: inherit;
  --radius-tight: 9px;

  /* Foundation: shadows */
  --shadow-none: none;
  --shadow-accent-sm: 0 4px 16px rgba(6, 187, 217, 0.35);
  --shadow-accent-md: 0 6px 20px rgba(6, 187, 217, 0.5);
  --shadow-panel: 0 4px 0 rgba(0, 0, 0, 0.85), 0 12px 20px rgba(0, 0, 0, 0.55);
  --shadow-dropdown: 0 8px 28px rgba(0,0,0,0.45);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-surface: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 18px rgba(0,0,0,0.3);
  --shadow-hero: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 64px rgba(0,0,0,0.55);
  --shadow-loader: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-toolbar: inset 0 -1px 0 rgba(255,255,255,0.05), 0 2px 16px rgba(0,0,0,0.4);
  --shadow-menu: 0 6px 20px rgba(0,0,0,0.5);

  /* Foundation: motion */
  --motion-duration-quick: 0.2s;
  --motion-duration-normal: 0.3s;
  --motion-duration-medium: 0.5s;
  --motion-duration-slow: 0.7s;
  --motion-timing-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-timing-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --motion-timing-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-all-quick: all var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-all-fast: all var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-surface-fast: background var(--motion-duration-quick) var(--motion-timing-ease-out), border-color var(--motion-duration-quick) var(--motion-timing-ease-out), color var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-card-lift: background var(--motion-duration-quick) var(--motion-timing-ease-out), transform var(--motion-duration-normal) var(--motion-timing-ease-out), box-shadow var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-background-instant: background var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-border-fast: border-color var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-border-medium: border-color var(--motion-duration-normal) var(--motion-timing-ease-out);
  --transition-color-fast: color var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-color-surface-fast: color var(--motion-duration-quick) var(--motion-timing-ease-out), background var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-opacity-fast: opacity var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-fade-slide-fast: opacity var(--motion-duration-quick) var(--motion-timing-ease-out), transform var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-opacity-ease: opacity var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-loader-exit: opacity var(--motion-duration-slow) var(--motion-timing-ease-in-out), visibility var(--motion-duration-slow) var(--motion-timing-ease-in-out), background var(--motion-duration-medium) var(--motion-timing-ease-in-out), backdrop-filter var(--motion-duration-medium) var(--motion-timing-ease-in-out);
  --transition-header-reveal: transform var(--motion-duration-normal) var(--motion-timing-ease-out), opacity var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-width-ease: width var(--motion-duration-medium) var(--motion-timing-ease-in-out);
  --transition-transform-ease: transform var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-surface-text-fast: background var(--motion-duration-quick) var(--motion-timing-ease-out), color var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-surface-border-fast: background var(--motion-duration-quick) var(--motion-timing-ease-out), border-color var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-border-surface-lift: border-color var(--motion-duration-quick) var(--motion-timing-ease-out), background var(--motion-duration-quick) var(--motion-timing-ease-out), transform var(--motion-duration-quick) var(--motion-timing-ease-out);
  --transition-surface-fast-alt: background var(--motion-duration-quick) var(--motion-timing-ease-out);
  --animation-loader-spin-bounce: loader-spin-bounce 2.6s cubic-bezier(0.36, 0.05, 0.24, 1) forwards;
  --animation-modal-in: modal-in var(--motion-duration-normal) var(--motion-timing-ease-out);
  --animation-modal-in-admin: modal-in var(--motion-duration-quick) var(--motion-timing-ease-out);
  --animation-none-force: none !important;
  --animation-pulse: pulse 2s var(--motion-timing-ease-in-out) infinite;
  --animation-pulse-fast: pulse-fast 0.8s var(--motion-timing-ease-in-out) infinite;
  --animation-dropdown-in: dropdown-in var(--motion-duration-quick) var(--motion-timing-ease-out);
  --animation-toast-in: toast-in var(--motion-duration-quick) var(--motion-timing-ease-out);

  /* Semantic: color roles */
  --color-bg-primary: var(--fd-color-hex-07121a);
  --color-surface-primary: var(--fd-color-rgba-6-187-217-0-06);
  --color-surface-secondary: var(--fd-color-rgba-6-187-217-0-1);
  --color-border-primary: var(--fd-color-rgba-6-187-217-0-2);
  --color-accent-primary: var(--fd-color-hex-06bbd9);
  --color-accent-hover: var(--fd-color-hex-08d4f5);
  --color-accent-glow: var(--fd-color-rgba-6-187-217-0-16);
  --color-accent-muted: var(--fd-color-rgba-6-187-217-0-28);
  --color-text-primary: var(--fd-color-hex-dde1e8);
  --color-text-dim: var(--fd-color-hex-6b7280);
  --color-text-muted: var(--fd-color-hex-9ca3af);
  --color-status-danger: var(--fd-color-hex-ff4c4c);
  --color-status-error: var(--fd-color-hex-f87171);
  --color-danger-muted: var(--fd-color-rgba-255-76-76-0-15);
  --color-danger-strong: var(--fd-color-hex-8b1a1a);
  --color-status-success: var(--fd-color-hex-00e676);
  --color-status-online: var(--fd-color-hex-4ade80);
  --color-success-muted: var(--fd-color-rgba-0-230-118-0-12);
  --color-status-warning: var(--fd-color-hex-ff9800);
  --color-warning-muted: var(--fd-color-rgba-255-152-0-0-15);
  --color-tooltip-bg: var(--fd-color-hex-1e2126);
  --color-tooltip-border: var(--fd-color-hex-2a2e35);

  /* Semantic: typography roles */
  --font-size-body: var(--font-size-rem-1);
  --font-size-caption: var(--font-size-rem-0-75);
  --font-size-caption-sm: var(--font-size-rem-0-72);
  --font-size-caption-lg: var(--font-size-rem-0-78);
  --font-size-note: var(--font-size-rem-0-8);
  --font-size-note-strong: var(--font-size-rem-0-85);
  --font-size-title-sm: var(--font-size-rem-1-1);
  --font-size-title-md: var(--font-size-rem-1-5);
  --font-size-title-lg: var(--font-size-rem-2);
  --line-height-tight: var(--line-height-1-2);
  --line-height-body: var(--line-height-1-5);
  --line-height-relaxed: var(--line-height-1-6);

  /* Semantic: spacing and layout */
  --spacing-header-gap: var(--fd-size-rem-0-75);
  --spacing-card-header-gap: var(--fd-size-rem-0-8);
  --spacing-stack-2xs: var(--fd-size-rem-0-2);
  --spacing-stack-xs: var(--fd-size-rem-0-5);
  --spacing-stack-sm: var(--fd-size-rem-0-6);
  --spacing-stack-md: var(--fd-size-rem-1);
  --spacing-panel-padding: var(--fd-size-rem-1-5);
  --spacing-panel-padding-lg: var(--fd-size-rem-2-5);
  --logo-size-large: var(--fd-size-px-216);
  /* Breakpoint reference tokens — duplicate these literal values in @media rules until custom media is adopted. */
  --breakpoint-mobile: 600px;
  --breakpoint-tablet: 900px;
  --breakpoint-desktop: 1200px;
  --layout-grid-columns-triple: repeat(3, minmax(0, 1fr));
  --layout-rank-cell-width: var(--fd-size-px-26);
  --layout-search-rank-width: var(--fd-size-rem-3-2);
  --layout-empty-state-padding: var(--fd-size-rem-1-5);
  --layout-empty-state-inline-padding: var(--fd-size-rem-0-5);

  /* Legacy compatibility aliases */
  --bg: var(--color-bg-primary);
  --surface: var(--color-surface-primary);
  --surface2: var(--color-surface-secondary);
  --border: var(--color-border-primary);
  --accent: var(--color-accent-primary);
  --accent-glow: var(--color-accent-glow);
  --accent-dim: var(--color-accent-muted);
  --red: var(--color-status-danger);
  --red-dim: var(--color-danger-muted);
  --green: var(--color-status-success);
  --green-dim: var(--color-success-muted);
  --orange: var(--color-status-warning);
  --orange-dim: var(--color-warning-muted);
  --text: var(--color-text-primary);
  --text-dim: var(--color-text-dim);
  --text-mid: var(--color-text-muted);
  --text-muted: var(--color-text-muted);
  --radius: var(--radius-md);
  --font: var(--font-family-ui);
  --color-error: var(--color-status-error);
  --color-online: var(--color-status-online);
  --color-dim: var(--color-text-dim);
  --danger-dark: var(--color-danger-strong);
}

@media (prefers-color-scheme: light) {
  :root,
  :root[data-theme="default"] {
    color-scheme: light;
    --color-bg-primary: #f4f7fb;
    --color-surface-primary: rgba(255, 255, 255, 0.88);
    --color-surface-secondary: rgba(6, 187, 217, 0.12);
    --color-border-primary: rgba(6, 187, 217, 0.18);
    --color-accent-glow: rgba(6, 187, 217, 0.18);
    --color-accent-muted: rgba(6, 187, 217, 0.3);
    --color-text-primary: #10202d;
    --color-text-dim: #5f7284;
    --color-text-muted: #425466;
    --color-danger-muted: rgba(255, 76, 76, 0.12);
    --color-success-muted: rgba(0, 230, 118, 0.14);
    --color-warning-muted: rgba(255, 152, 0, 0.14);
    --color-tooltip-bg: #e7edf3;
    --color-tooltip-border: rgba(16, 32, 45, 0.12);
  }
}

body, button, input, select, textarea {
  font-family: var(--font-family-ui);
}

.server-title, .login-title, .card-title, .section-label, .modal-title, .modal-list-title, .map-modal-title, .modal-name, .apm-name, .admin-card-title, .modal-title-text, .action-card-title, .overview-map-name, .overview-timer, .overview-stat-val, .stat-value {
  font-family: var(--font-family-display);
}

.server-address, .steam-id-text, .search-result-sub, .modal-stat-value, .apm-stat-value, .overview-timer, .overview-stat-val, .stat-sub, .t-time, .map-time-cell, .user-rank-num, .user-points {
  font-variant-numeric: tabular-nums;
}

.server-address, .steam-id-text {
  font-family: var(--font-family-data);
}

.icon-fixed { flex-shrink: 0; }
.card-header-spaced { margin-bottom: var(--spacing-card-header-gap); }
.subtle-caption { font-size: var(--font-size-caption-lg); color: var(--color-text-dim); }
.modal-role-badge-inline { font-size: var(--font-size-caption); margin-top: var(--spacing-stack-2xs); }
.modal-surf-rank-inline { font-size: var(--font-size-note-strong); margin-top: var(--spacing-stack-2xs); }
.sort-center { text-align: center; }
.sort-right { text-align: right; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.margin-left-auto { margin-left: auto; }
.btn-inline-remove { margin-left: auto; font-size: var(--font-size-caption-sm); }
.confirm-message { color: var(--color-text-muted); font-size: var(--font-size-rem-0-9); line-height: var(--line-height-body); margin: 0; }
.modal-copy { color: var(--color-text-muted); margin: 0; }
.modal-copy-spaced { color: var(--color-text-muted); margin: 0 0 var(--fd-size-rem-1); }
.modal-copy-tight { color: var(--color-text-muted); margin: 0 0 var(--fd-size-rem-0-75); }
.time-adjust-grid { display: grid; grid-template-columns: var(--layout-grid-columns-triple); gap: var(--fd-size-rem-0-6); }
.empty-msg-padded { padding: var(--layout-empty-state-padding); }
.empty-msg-inline { padding: var(--layout-empty-state-inline-padding) 0; }
.empty-msg-error { color: var(--color-status-error); }
.text-note { font-size: var(--font-size-note); }
.btn-danger-dark { background: var(--color-danger-strong); }
.rank-cell { width: var(--layout-rank-cell-width); }
.subtle-link-meta { color: var(--color-text-dim); font-size: var(--font-size-caption); }
.search-result-main { display: flex; align-items: center; gap: var(--fd-size-rem-0-65); min-width: 0; }
.search-result-rank { width: var(--layout-search-rank-width); text-align: right; flex-shrink: 0; }
.search-result-rank-primary { font-size: var(--font-size-note); font-weight: var(--font-weight-bold); color: var(--color-text-dim); }
.search-result-rank-secondary { font-size: var(--font-size-rem-0-68); font-weight: var(--font-weight-bold); white-space: nowrap; }
.search-result-meta { min-width: 0; }
.search-result-records { color: var(--color-text-dim); font-weight: var(--font-weight-regular); font-size: var(--font-size-caption); display: block; }
.map-bar { width: var(--map-bar-width, 0%); }
.player-link { cursor: pointer; }
.dropdown-menu.is-hidden { display: none; }


.text-primary { color: var(--color-text-primary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-dim { color: var(--color-text-dim) !important; }
.text-danger { color: var(--color-status-danger) !important; }
.text-success { color: var(--color-status-success) !important; }
.text-warning { color: var(--color-status-warning) !important; }

.bg-surface { background: var(--color-surface-primary) !important; }
.bg-primary { background: var(--color-bg-primary) !important; }
.bg-surface-secondary { background: var(--color-surface-secondary) !important; }

.gap-xs { gap: var(--spacing-stack-xs) !important; }
.gap-sm { gap: var(--spacing-stack-sm) !important; }
.gap-md { gap: var(--spacing-stack-md) !important; }
.spacing-stack-md > * + * { margin-top: var(--spacing-stack-md) !important; }
.p-sm { padding: var(--spacing-stack-sm) !important; }
.p-md { padding: var(--spacing-stack-md) !important; }
.p-lg { padding: var(--spacing-panel-padding) !important; }

.is-hidden { display: none !important; }

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-stack-xs);
  padding: var(--fd-size-rem-0-5) var(--fd-size-rem-1-1);
  border-radius: var(--radius-md-sm);
  cursor: pointer;
  font-size: var(--font-size-rem-0-85);
  line-height: var(--line-height-tight);
  font-family: var(--font-family-ui);
  transition: var(--transition-surface-border-fast);
}

.btn-primary {
  background: var(--accent);
  color: var(--fd-color-hex-0f1113);
  border: none;
  font-weight: var(--font-weight-bold);
}

.btn-primary:hover { background: var(--color-accent-hover); }

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: var(--fd-size-px-1) solid var(--border);
  font-weight: var(--font-weight-semibold);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.input-primary,
.form-input,
.form-select,
.input-search,
.modal-search-input,
.search-input {
  width: var(--fd-size-pct-100);
  background: var(--surface2);
  border: var(--fd-size-px-1) solid var(--border);
  color: var(--text);
  font-family: var(--font-family-ui);
  outline: none;
  box-sizing: border-box;
  transition: var(--transition-surface-border-fast);
}

.input-primary,
.form-input,
.form-select {
  border-radius: var(--radius-md-sm);
  padding: var(--fd-size-rem-0-6) var(--fd-size-rem-0-75);
  font-size: var(--font-size-rem-0-88);
}

.input-search,
.modal-search-input,
.search-input {
  border-radius: var(--radius-lg-minus);
  padding: var(--fd-size-rem-0-5) var(--fd-size-rem-0-85);
  font-size: var(--font-size-rem-0-875);
}

.input-primary:focus,
.form-input:focus,
.form-select:focus { border-color: var(--accent); }

.input-search:focus,
.modal-search-input:focus,
.search-input:focus { border-color: var(--accent-dim); }

.input-primary::placeholder,
.form-input::placeholder,
.input-search::placeholder,
.modal-search-input::placeholder,
.search-input::placeholder {
  color: var(--text-dim);
}

.modal-overlay,
.modal-content,
.modal-box,
.modal-body,
.modal-lg-body,
.modal-records-scroll,
.map-modal-records-scroll,
.search-results-list,
.map-list-scroll,
.player-list,
.admin-map-list,
#playersContent,
#rosterContent,
#banListContent {
  contain: layout paint;
}