/* ============================================
 * Theme CSS Custom Properties
 * Source of truth: dex-home/src/styles/design-tokens.ts
 * Migrated from dex-home (src/styles/theme.scss) and converted to plain CSS.
 *
 * Architecture (two-tier, single-direction):
 *   --c-{key}        : R G B channels (internal, for Tailwind opacity)
 *   --base-{key}     : hex/rgba full color (public API)
 *   --light-* / --dark-* : legacy compatibility aliases (always available)
 *   --base-*-default : legacy base namespace aliases
 * ============================================ */

/* ════════════════════════════════════════════
 * Section 1: Legacy compatibility aliases — always available in :root
 * ════════════════════════════════════════════ */

:root {
  /* ── Light palette label ── */
  --light-label-default: #0a0a0a;
  --light-label-60: rgba(10, 10, 10, 0.6);
  --light-label-40: rgba(10, 10, 10, 0.4);
  --light-label-20: rgba(10, 10, 10, 0.2);

  /* ── Dark palette label ── */
  --dark-label-60: rgba(235, 245, 235, 0.6);
  --dark-label-40: rgba(235, 245, 235, 0.4);
  --dark-label-20: rgba(235, 245, 235, 0.2);

  /* ── Light overrides (Figma light theme) ── */
  --light-primary-default: #33dc26;
  --light-primary-60: rgba(51, 220, 38, 0.6);
  --light-primary-40: rgba(51, 220, 38, 0.4);
  --light-primary-14: rgba(51, 220, 38, 0.14);
  --light-primary-10: rgba(51, 220, 38, 0.1);
  --light-red-default: #f24055;
  --light-green-default: #5fd655;
  --light-badge-primary-bg: rgba(51, 220, 38, 0.14);
  --light-success-default: #5fd655;
  --light-success-14: rgba(95, 214, 85, 0.14);
  --light-warning-default: #ffc400;
  --light-warning-14: rgba(255, 196, 0, 0.14);
  --light-danger-default: #f24055;
  --light-danger-14: rgba(214, 32, 53, 0.14);
  --light-secondary-default: #56ddd1;
  --light-secondary-14: rgba(34, 225, 226, 0.14);
  --light-tertiary-default: #a3e91b;
  --light-tertiary-14: rgba(159, 234, 14, 0.14);
  --light-background: #ffffff;
  --light-second: #050505;
  --light-text: #ffffff;
  --light-fill-primary: #fbfbfb;
  --light-fill-secondary: #f2f4f5;
  --light-fill-tertiary: #cacbcc;
  --light-fill-quaternary: #e3e4e5;
  --light-line-primary: #ebedf0;
  --light-line-secondary: #dcdee0;
  --light-line-tertiary: #cdcfd1;
  --light-hover-primary: #22c915;
  --light-hover-secondary: #1ccec9;
  --light-hover-tertiary: #95d31d;
  --light-hover-success: #55c55b;
  --light-hover-warning: #ebb603;
  --light-hover-danger: #eb1730;
  --light-hover-green: #55c55b;
  --light-hover-red: #eb1730;
  --light-hover-fill-primary: #f2f3f5;
  --light-hover-fill-secondary: #e8e9eb;
  --light-hover-fill-tertiary: #b1b2b2;
  --light-hover-fill-quaternary: #dedfe0;
  --light-green-alpha: rgba(95, 214, 85, 0.14);
  --light-red-alpha: rgba(214, 32, 53, 0.14);
  --light-badge-secondary-bg: rgba(34, 225, 226, 0.14);
  --light-badge-success-bg: rgba(95, 214, 85, 0.14);
  --light-badge-warning-bg: rgba(255, 196, 0, 0.14);
  --light-badge-danger-bg: rgba(214, 32, 53, 0.14);
  --light-badge-info-bg: #ebedf0;
  --light-input-primary: #33dc26;
  --light-input-gray: #dcdee0;
  --light-input-error: #f24055;
  --light-pagination-primary: #33dc26;
  --light-pagination-primary-hover: #22c915;
  --light-header-bgColor: #ffffff;
  --light-disabled-blue: rgba(51, 220, 38, 0.4);

  /* ── Dark overrides (Figma dark theme) ── */
  --dark-primary-default: #8df885;
  --dark-primary-60: rgba(141, 248, 133, 0.6);
  --dark-primary-40: rgba(141, 248, 133, 0.4);
  --dark-primary-14: rgba(141, 248, 133, 0.14);
  --dark-primary-10: rgba(141, 248, 133, 0.1);
  --dark-red-default: #ff5d5c;
  --dark-green-default: #8df885;
  --dark-danger-default: #ff5d5c;
  --dark-badge-primary-bg: rgba(141, 248, 133, 0.14);
  --dark-background: #080d00;
  --dark-success-default: #5fd655;
  --dark-success-14: rgba(15, 204, 113, 0.14);
  --dark-warning-default: #ffd60a;
  --dark-warning-14: rgba(255, 214, 10, 0.14);
  --dark-danger-14: rgba(214, 32, 53, 0.14);
  --dark-secondary-default: #22ffe2;
  --dark-secondary-14: rgba(34, 225, 226, 0.14);
  --dark-tertiary-default: #a8ff00;
  --dark-tertiary-14: rgba(168, 255, 0, 0.14);
  --dark-second: #050505;
  --dark-text: #ffffff;
  --dark-line-primary: #1c261c;
  --dark-line-secondary: #3c3d3c;
  --dark-line-tertiary: #4b4d4b;
  --dark-fill-primary: #080d00;
  --dark-fill-secondary: #1b211b;
  --dark-fill-tertiary: #2b332c;
  --dark-fill-quaternary: #232324;
  --dark-hover-primary: #6bf055;
  --dark-hover-secondary: #29ebd2;
  --dark-hover-tertiary: #9ef000;
  --dark-hover-success: #55c55b;
  --dark-hover-warning: #ffc908;
  --dark-hover-danger: rgba(255, 93, 92, 0.8);
  --dark-hover-green: #5bf055;
  --dark-hover-red: rgba(255, 92, 92, 0.8);
  --dark-hover-fill-primary: #131d14;
  --dark-hover-fill-secondary: #18281a;
  --dark-hover-fill-tertiary: #333b34;
  --dark-hover-fill-quaternary: #323233;
  --dark-green-alpha: rgba(15, 204, 113, 0.14);
  --dark-red-alpha: rgba(255, 92, 92, 0.12);
  --dark-badge-secondary-bg: rgba(34, 225, 226, 0.14);
  --dark-badge-success-bg: rgba(15, 204, 113, 0.14);
  --dark-badge-warning-bg: rgba(255, 214, 10, 0.14);
  --dark-badge-danger-bg: rgba(214, 32, 53, 0.14);
  --dark-badge-info-bg: #2b332c;
  --dark-input-primary: #8df885;
  --dark-input-gray: #3c3d3c;
  --dark-input-error: #ff5d5c;
  --dark-pagination-primary: #8df885;
  --dark-pagination-primary-hover: #6bf055;
  --dark-header-bgColor: #080d00;
  --dark-disabled-blue: rgba(141, 248, 133, 0.4);
  --dark-label-default: #fcfffa;
}

/* ════════════════════════════════════════════
 * Section 2: Light theme (default)
 * ════════════════════════════════════════════ */

:root,
[data-theme='light'] {
  /* ── Channels (R G B) — opaque hex tokens only ── */
  --c-background: 255 255 255;
  --c-background-secondary: 248 248 248;
  --c-background-tertiary: 240 242 245;
  --c-surface: 255 255 255;
  --c-surface-hover: 247 248 250;
  --c-popup: 255 255 255;
  --c-line-primary: 235 237 240;
  --c-line-secondary: 220 222 224;
  --c-line-tertiary: 205 207 209;
  --c-border: 237 240 245;
  --c-divider: 189 189 191;
  --c-bottom-line: 235 235 235;
  --c-label-default: 10 10 10;
  --c-label-primary: 1 6 18;
  --c-label-secondary: 108 108 108;
  --c-label-tertiary: 145 149 158;
  --c-label-quaternary: 192 195 204;
  --c-label-disabled: 189 189 191;
  --c-label-info: 145 149 158;
  --c-text-default: 255 255 255;
  --c-text-second: 5 5 5;
  --c-fill-primary: 251 251 251;
  --c-fill-hover: 242 243 245;
  --c-fill-secondary: 242 244 245;
  --c-fill-secondary-hover: 232 233 235;
  --c-fill-tertiary: 202 203 204;
  --c-fill-tertiary-2: 202 203 204;
  --c-fill-tertiary-hover: 177 178 178;
  --c-fill-quaternary: 227 228 229;
  --c-fill-quaternary-hover: 222 223 224;
  --c-fill-quinary: 51 51 51;
  --c-primary: 51 220 38;
  --c-primary-hover: 34 201 21;
  --c-primary-active: 51 220 38;
  --c-secondary: 86 221 209;
  --c-secondary-hover: 28 206 201;
  --c-tertiary: 163 233 27;
  --c-tertiary-hover: 149 211 29;
  --c-success: 95 214 85;
  --c-success-hover: 85 197 91;
  --c-buy: 95 214 85;
  --c-buy-hover: 85 197 91;
  --c-warning: 255 196 0;
  --c-warning-hover: 235 182 3;
  --c-danger: 242 64 85;
  --c-danger-hover: 235 23 48;
  --c-error: 242 64 85;
  --c-sell: 242 64 85;
  --c-red: 242 64 85;
  --c-info: 47 84 235;
  --c-info-hover: 65 101 250;
  --c-orange: 255 102 0;
  --c-action-green: 43 210 29;
  --c-action-green-hover: 27 184 15;
  --c-action-red: 241 60 84;
  --c-action-red-hover: 255 79 103;

  /* ── Full-color values (--base-*) ── */

  /* Background */
  --base-background: #ffffff;
  --base-background-secondary: #f8f8f8;
  --base-background-tertiary: #f0f2f5;
  --base-surface: #ffffff;
  --base-surface-hover: #f7f8fa;
  --base-popup: #ffffff;
  --base-overlay: rgba(0, 0, 0, 0.5);

  /* Lines & Borders */
  --base-line-primary: #ebedf0;
  --base-line-secondary: #dcdee0;
  --base-line-tertiary: #cdcfd1;
  --base-border: #edf0f5;
  --base-divider: #bdbdbf;
  --base-bottom-line: #ebebeb;

  /* Label */
  --base-label-default: #0a0a0a;
  --base-label-primary: #010612;
  --base-label-secondary: #6c6c6c;
  --base-label-tertiary: #91959e;
  --base-label-quaternary: #c0c3cc;
  --base-label-disabled: #bdbdbf;
  --base-label-info: #91959e;
  --base-label-60: rgba(10, 10, 10, 0.6);
  --base-label-40: rgba(10, 10, 10, 0.4);
  --base-label-20: rgba(10, 10, 10, 0.2);
  --base-label-10: rgba(10, 10, 10, 0.1);

  /* Text */
  --base-text: var(--base-text-default);
  --base-text-default: #ffffff;
  --base-text-second: #050505;

  /* Fill */
  --base-fill-primary: #fbfbfb;
  --base-fill-hover: #f2f3f5;
  --base-fill-secondary: #f2f4f5;
  --base-fill-secondary-hover: #e8e9eb;
  --base-fill-tertiary: #cacbcc;
  --base-fill-tertiary-2: #cacbcc;
  --base-fill-tertiary-hover: #b1b2b2;
  --base-fill-quaternary: #e3e4e5;
  --base-fill-quaternary-hover: #dedfe0;
  --base-fill-quinary: #333333;

  /* Primary */
  --base-primary: #33dc26;
  --base-primary-hover: #22c915;
  --base-primary-active: #33dc26;
  --base-primary-60: rgba(51, 220, 38, 0.6);
  --base-primary-40: rgba(51, 220, 38, 0.4);
  --base-primary-20: rgba(51, 220, 38, 0.2);
  --base-primary-14: rgba(51, 220, 38, 0.14);
  --base-primary-10: rgba(51, 220, 38, 0.1);

  /* Secondary */
  --base-secondary: #56ddd1;
  --base-secondary-hover: #1ccec9;
  --base-secondary-14: rgba(34, 225, 226, 0.14);

  /* Tertiary */
  --base-tertiary: #a3e91b;
  --base-tertiary-hover: #95d31d;
  --base-tertiary-14: rgba(159, 234, 14, 0.14);

  /* Success / Buy */
  --base-success: #5fd655;
  --base-success-hover: #55c55b;
  --base-success-bg: rgba(95, 214, 85, 0.14);
  --base-buy: #5fd655;
  --base-buy-hover: #55c55b;

  /* Warning */
  --base-warning: #ffc400;
  --base-warning-hover: #ebb603;
  --base-warning-bg: rgba(255, 196, 0, 0.14);

  /* Danger */
  --base-danger: #f24055;
  --base-danger-hover: #eb1730;
  --base-danger-14: rgba(214, 32, 53, 0.14);

  /* Error / Sell / Red */
  --base-error: #f24055;
  --base-error-hover: #eb1730;
  --base-error-bg: rgba(214, 32, 53, 0.14);
  --base-sell: #f24055;
  --base-sell-hover: #eb1730;
  --base-red: #f24055;
  --base-red-hover: #eb1730;

  /* Info */
  --base-info: #2f54eb;
  --base-info-hover: #4165fa;
  --base-info-bg: rgba(47, 84, 235, 0.12);

  /* Orange */
  --base-orange: #ff6600;

  /* Action */
  --base-action-green: #2bd21d;
  --base-action-green-hover: #1bb80f;
  --base-action-green-14: rgba(4, 185, 125, 0.14);
  --base-action-green-8: rgba(51, 220, 38, 0.08);
  --base-action-red: #f13c54;
  --base-action-red-hover: #ff4f67;
  --base-action-red-60: rgba(241, 60, 84, 0.6);
  --base-action-red-14: rgba(241, 60, 84, 0.14);
  --base-action-red-8: rgba(241, 60, 84, 0.08);

  /* Badge (no base- prefix) */
  --badge-blue-text: #00cc5d;
  --badge-blue-bg: rgba(47, 84, 235, 0.12);
  --badge-green-text: #21b26c;
  --badge-green-bg: rgba(33, 178, 108, 0.12);
  --badge-yellow-text: #fac823;
  --badge-yellow-bg: rgba(250, 200, 35, 0.12);
  --badge-red-text: #d9242f;
  --badge-red-bg: rgba(217, 36, 47, 0.12);
  --badge-gray-text: #81858c;
  --badge-gray-bg: rgba(129, 133, 140, 0.12);

  /* Status (no base- prefix) */
  --status-new: #2f54eb;
  --status-new-bg: rgba(47, 84, 235, 0.12);
  --status-filled: #21b26c;
  --status-filled-bg: rgba(33, 178, 108, 0.12);
  --status-partial: #fac823;
  --status-partial-bg: rgba(250, 200, 35, 0.14);
  --status-failed: #e5e5e5;
  --status-failed-bg: rgba(129, 133, 140, 0.12);

  /* Gradient */
  --gradient-start: rgba(237, 240, 245, 0);
  --gradient-end: #ffffff;

  /* Misc */
  --hover-bg: rgba(237, 240, 245, 0.3);
  --table-hover: rgba(237, 240, 245, 0.2);
  --scrollbar: #eaecef;
  --button-group-bg: #f0f2f5;
  --orderbook: #dcdcdd;
  --orderbook-active: #81858c;
  --watchlist-btn: #f0f2f5;
  --base-button-bg: #f0f2f5;

  /* ── Legacy base-* aliases ── */
  --base-primary-default: #33dc26;
  --base-secondary-default: var(--base-secondary);
  --base-tertiary-default: var(--base-tertiary);
  --base-success-default: #5fd655;
  --base-success-14: var(--base-success-bg);
  --base-warning-default: var(--base-warning);
  --base-warning-14: var(--base-warning-bg);
  --base-danger-default: var(--base-danger);
  --base-green: var(--base-buy);
  --base-green-default: #5fd655;
  --base-green-alpha: var(--base-success-bg);
  --base-red-default: #f24055;
  --base-red-alpha: var(--base-error-bg);
  --base-second: var(--base-text-second);
  --base-hover-primary: #22c915;
  --base-hover-secondary: var(--base-secondary-hover);
  --base-hover-tertiary: var(--base-tertiary-hover);
  --base-hover-success: var(--base-success-hover);
  --base-hover-warning: var(--base-warning-hover);
  --base-hover-danger: var(--base-danger-hover);
  --base-hover-red: #eb1730;
  --base-hover-green: #55c55b;
  --base-hover-fill-primary: var(--base-fill-hover);
  --base-hover-fill-secondary: var(--base-fill-secondary-hover);
  --base-hover-fill-tertiary: var(--base-fill-tertiary-hover);
  --base-hover-fill-quaternary: var(--base-fill-quaternary-hover);
  --base-badge-primary-bg: rgba(51, 220, 38, 0.14);
  --base-badge-secondary-bg: var(--base-secondary-14);
  --base-badge-success-bg: var(--base-success-bg);
  --base-badge-warning-bg: var(--base-warning-bg);
  --base-badge-danger-bg: rgba(214, 32, 53, 0.14);
  --base-badge-info-bg: #ebedf0;
  --base-input-primary: var(--base-primary);
  --base-input-gray: var(--base-line-secondary);
  --base-input-error: var(--base-danger);
  --base-pagination-primary: var(--base-primary);
  --base-pagination-primary-hover: var(--base-primary-hover);
  --base-header-bgColor: var(--base-background);
  --base-disabled-blue: var(--base-primary-40);
}

/* ════════════════════════════════════════════
 * Section 3: Dark theme — applied via [data-theme='dark'] AND :root.dark
 * (vocs uses :root.dark for its color-scheme switch)
 * ════════════════════════════════════════════ */

[data-theme='dark'],
:root.dark {
  /* ── Channels (R G B) ── */
  --c-background: 8 13 0;
  --c-background-secondary: 47 47 47;
  --c-background-tertiary: 36 37 41;
  --c-surface: 38 40 43;
  --c-surface-hover: 45 47 51;
  --c-popup: 38 40 43;
  --c-line-primary: 28 38 28;
  --c-line-secondary: 60 61 60;
  --c-line-tertiary: 75 77 75;
  --c-border: 58 60 74;
  --c-divider: 108 109 116;
  --c-bottom-line: 108 109 116;
  --c-label-default: 252 255 250;
  --c-label-primary: 242 243 250;
  --c-label-secondary: 171 175 181;
  --c-label-tertiary: 152 152 159;
  --c-label-quaternary: 108 109 116;
  --c-label-disabled: 108 109 116;
  --c-label-info: 152 152 159;
  --c-text-default: 255 255 255;
  --c-text-second: 5 5 5;
  --c-fill-primary: 8 13 0;
  --c-fill-hover: 19 29 20;
  --c-fill-secondary: 27 33 27;
  --c-fill-secondary-hover: 24 40 26;
  --c-fill-tertiary: 43 51 44;
  --c-fill-tertiary-2: 52 59 51;
  --c-fill-tertiary-hover: 51 59 52;
  --c-fill-quaternary: 35 35 36;
  --c-fill-quaternary-hover: 50 50 51;
  --c-fill-quinary: 230 230 230;
  --c-primary: 141 248 133;
  --c-primary-hover: 107 240 85;
  --c-primary-active: 141 248 133;
  --c-secondary: 34 255 226;
  --c-secondary-hover: 41 235 210;
  --c-tertiary: 168 255 0;
  --c-tertiary-hover: 158 240 0;
  --c-success: 95 214 85;
  --c-success-hover: 85 197 91;
  --c-buy: 141 248 133;
  --c-buy-hover: 91 240 85;
  --c-warning: 255 214 10;
  --c-warning-hover: 255 201 8;
  --c-danger: 255 93 92;
  --c-error: 255 93 92;
  --c-sell: 255 93 92;
  --c-red: 255 93 92;
  --c-info: 65 101 250;
  --c-info-hover: 80 129 255;
  --c-orange: 254 152 63;
  --c-action-green: 141 248 133;
  --c-action-green-hover: 91 240 85;
  --c-action-red: 255 93 92;
  --c-action-red-hover: 252 60 58;

  /* ── Full-color values (--base-*) ── */

  /* Background */
  --base-background: #080d00;
  --base-background-secondary: #2f2f2f;
  --base-background-tertiary: #242529;
  --base-surface: #26282b;
  --base-surface-hover: #2d2f33;
  --base-popup: #26282b;
  --base-overlay: rgba(0, 0, 0, 0.5);

  /* Lines & Borders */
  --base-line-primary: #1c261c;
  --base-line-secondary: #3c3d3c;
  --base-line-tertiary: #4b4d4b;
  --base-border: #3a3c4a;
  --base-divider: #6c6d74;
  --base-bottom-line: #6c6d74;

  /* Label */
  --base-label-default: #fcfffa;
  --base-label-primary: #f2f3fa;
  --base-label-secondary: #abafb5;
  --base-label-tertiary: #98989f;
  --base-label-quaternary: #6c6d74;
  --base-label-disabled: #6c6d74;
  --base-label-info: #98989f;
  --base-label-60: rgba(235, 245, 235, 0.6);
  --base-label-40: rgba(235, 245, 235, 0.4);
  --base-label-20: rgba(235, 245, 235, 0.2);
  --base-label-10: rgba(235, 245, 235, 0.1);

  /* Text */
  --base-text: var(--base-text-default);
  --base-text-default: #ffffff;
  --base-text-second: #050505;

  /* Fill */
  --base-fill-primary: #080d00;
  --base-fill-hover: #131d14;
  --base-fill-secondary: #1b211b;
  --base-fill-secondary-hover: #18281a;
  --base-fill-tertiary: #2b332c;
  --base-fill-tertiary-2: #343b33;
  --base-fill-tertiary-hover: #333b34;
  --base-fill-quaternary: #232324;
  --base-fill-quaternary-hover: #323233;
  --base-fill-quinary: #e6e6e6;

  /* Primary */
  --base-primary: #8df885;
  --base-primary-hover: #6bf055;
  --base-primary-active: #8df885;
  --base-primary-60: rgba(141, 248, 133, 0.6);
  --base-primary-40: rgba(141, 248, 133, 0.4);
  --base-primary-20: rgba(141, 248, 133, 0.2);
  --base-primary-14: rgba(141, 248, 133, 0.14);
  --base-primary-10: rgba(141, 248, 133, 0.1);

  /* Secondary */
  --base-secondary: #22ffe2;
  --base-secondary-hover: #29ebd2;
  --base-secondary-14: rgba(34, 225, 226, 0.14);

  /* Tertiary */
  --base-tertiary: #a8ff00;
  --base-tertiary-hover: #9ef000;
  --base-tertiary-14: rgba(168, 255, 0, 0.14);

  /* Success / Buy */
  --base-success: #5fd655;
  --base-success-hover: #55c55b;
  --base-success-bg: rgba(15, 204, 113, 0.14);
  --base-buy: #8df885;
  --base-buy-hover: #5bf055;

  /* Warning */
  --base-warning: #ffd60a;
  --base-warning-hover: #ffc908;
  --base-warning-bg: rgba(255, 214, 10, 0.14);

  /* Danger */
  --base-danger: #ff5d5c;
  --base-danger-hover: rgba(255, 93, 92, 0.8);
  --base-danger-14: rgba(255, 93, 92, 0.14);

  /* Error / Sell / Red */
  --base-error: #ff5d5c;
  --base-error-hover: rgba(255, 92, 92, 0.8);
  --base-error-bg: rgba(255, 92, 92, 0.12);
  --base-sell: #ff5d5c;
  --base-sell-hover: rgba(255, 92, 92, 0.8);
  --base-red: #ff5d5c;
  --base-red-hover: rgba(255, 92, 92, 0.8);

  /* Info */
  --base-info: #4165fa;
  --base-info-hover: #5081ff;
  --base-info-bg: rgba(65, 101, 250, 0.12);

  /* Orange */
  --base-orange: #fe983f;

  /* Action */
  --base-action-green: #8df885;
  --base-action-green-hover: #5bf055;
  --base-action-green-14: rgba(4, 185, 125, 0.14);
  --base-action-green-8: rgba(51, 220, 38, 0.08);
  --base-action-red: #ff5d5c;
  --base-action-red-hover: #fc3c3a;
  --base-action-red-60: rgba(241, 60, 84, 0.6);
  --base-action-red-14: rgba(241, 60, 84, 0.14);
  --base-action-red-8: rgba(241, 60, 84, 0.08);

  /* Badge */
  --badge-blue-text: #00cc5d;
  --badge-blue-bg: rgba(65, 101, 250, 0.08);
  --badge-green-text: #21bc76;
  --badge-green-bg: rgba(33, 188, 118, 0.08);
  --badge-yellow-text: #ffd342;
  --badge-yellow-bg: rgba(255, 211, 66, 0.08);
  --badge-red-text: #d92e39;
  --badge-red-bg: rgba(217, 46, 57, 0.08);
  --badge-gray-text: #abafb5;
  --badge-gray-bg: rgba(171, 175, 181, 0.08);

  /* Status */
  --status-new: #4165fa;
  --status-new-bg: rgba(65, 101, 250, 0.12);
  --status-filled: #21bc76;
  --status-filled-bg: rgba(117, 227, 172, 0.12);
  --status-partial: #ffd342;
  --status-partial-bg: rgba(255, 211, 66, 0.14);
  --status-failed: rgba(71, 77, 87, 0.16);
  --status-failed-bg: rgba(171, 175, 181, 0.08);

  /* Gradient */
  --gradient-start: rgba(16, 16, 20, 0.5);
  --gradient-end: #101014;

  /* Misc */
  --hover-bg: rgba(38, 40, 49, 0.4);
  --table-hover: rgba(38, 40, 49, 0.3);
  --scrollbar: #474d57;
  --button-group-bg: #242529;
  --orderbook: #2d2f33;
  --orderbook-active: #abafb5;
  --watchlist-btn: #2d2f33;
  --base-button-bg: #2b332c;

  /* ── Legacy base-* aliases ── */
  --base-primary-default: #8df885;
  --base-secondary-default: var(--base-secondary);
  --base-tertiary-default: var(--base-tertiary);
  --base-success-default: #5fd655;
  --base-success-14: var(--base-success-bg);
  --base-warning-default: var(--base-warning);
  --base-warning-14: var(--base-warning-bg);
  --base-danger-default: #d62035;
  --base-green: var(--base-buy);
  --base-green-default: #8df885;
  --base-green-alpha: var(--base-success-bg);
  --base-red-default: #ff5d5c;
  --base-red-alpha: var(--base-error-bg);
  --base-second: var(--base-text-second);
  --base-hover-primary: #6bf055;
  --base-hover-secondary: var(--base-secondary-hover);
  --base-hover-tertiary: var(--base-tertiary-hover);
  --base-hover-success: var(--base-success-hover);
  --base-hover-warning: var(--base-warning-hover);
  --base-hover-danger: #bf1d30;
  --base-hover-red: rgba(255, 92, 92, 0.8);
  --base-hover-green: #5bf055;
  --base-hover-fill-primary: var(--base-fill-hover);
  --base-hover-fill-secondary: var(--base-fill-secondary-hover);
  --base-hover-fill-tertiary: var(--base-fill-tertiary-hover);
  --base-hover-fill-quaternary: var(--base-fill-quaternary-hover);
  --base-badge-primary-bg: rgba(141, 248, 133, 0.14);
  --base-badge-secondary-bg: var(--base-secondary-14);
  --base-badge-success-bg: var(--base-success-bg);
  --base-badge-warning-bg: var(--base-warning-bg);
  --base-badge-danger-bg: rgba(214, 32, 53, 0.14);
  --base-badge-info-bg: #2b332c;
  --base-input-primary: var(--base-primary);
  --base-input-gray: var(--base-line-secondary);
  --base-input-error: var(--base-danger);
  --base-pagination-primary: var(--base-primary);
  --base-pagination-primary-hover: var(--base-primary-hover);
  --base-header-bgColor: var(--base-background);
  --base-disabled-blue: var(--base-primary-40);
}

/* ════════════════════════════════════════════
 * Section 4: System preference fallback (when no explicit theme is set)
 * ════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(.light) {
    color-scheme: dark;
  }
}

/* ════════════════════════════════════════════
 * Section 5: Vocs theme integration
 * Map vocs's primitive color vars to dex-home brand palette so that
 * built-in components (sidebar, top nav, code blocks, callouts) inherit
 * the same look and feel as the dex-home app.
 *
 * Vocs CSS var naming: --vocs-color_<name>  (e.g. --vocs-color_textAccent)
 * Set in `:root` for light, `:root.dark` for dark.
 * ════════════════════════════════════════════ */

:root {
  /* Brand primary → green from light theme */
  --vocs-color_backgroundAccent: #33dc26;
  --vocs-color_backgroundAccentHover: #22c915;
  --vocs-color_backgroundAccentText: #ffffff;
  --vocs-color_borderAccent: #22c915;
  --vocs-color_textAccent: #22c915;
  --vocs-color_textAccentHover: #1bb80f;

  --vocs-color_textGreen: #21b26c;
  --vocs-color_textGreenHover: #5fd655;
  --vocs-color_textRed: #f24055;
  --vocs-color_textRedHover: #eb1730;
  --vocs-color_textYellow: #fac823;
  --vocs-color_textYellowHover: #ffc400;
  --vocs-color_borderGreen: rgba(33, 178, 108, 0.4);
  --vocs-color_borderRed: rgba(217, 36, 47, 0.4);
  --vocs-color_borderYellow: rgba(250, 200, 35, 0.4);
  --vocs-color_backgroundGreenTint: rgba(95, 214, 85, 0.14);
  --vocs-color_backgroundGreenTint2: rgba(95, 214, 85, 0.2);
  --vocs-color_backgroundRedTint: rgba(214, 32, 53, 0.14);
  --vocs-color_backgroundRedTint2: rgba(214, 32, 53, 0.2);
  --vocs-color_backgroundYellowTint: rgba(255, 196, 0, 0.14);
}

:root.dark {
  /* Brand primary → green from dark theme */
  --vocs-color_background: #080d00;
  --vocs-color_background2: #1b211b;
  --vocs-color_background3: #242529;
  --vocs-color_background4: #2b332c;
  --vocs-color_background5: #343b33;
  --vocs-color_backgroundDark: #080d00;
  --vocs-color_backgroundDarkTint: #1b211b;

  --vocs-color_backgroundAccent: #8df885;
  --vocs-color_backgroundAccentHover: #6bf055;
  --vocs-color_backgroundAccentText: #080d00;
  --vocs-color_borderAccent: #6bf055;
  --vocs-color_textAccent: #8df885;
  --vocs-color_textAccentHover: #6bf055;

  --vocs-color_text: #fcfffa;
  --vocs-color_text2: #abafb5;
  --vocs-color_text3: #98989f;
  --vocs-color_text4: #6c6d74;
  --vocs-color_textHover: #ffffff;
  --vocs-color_heading: #ffffff;
  --vocs-color_title: #ffffff;

  --vocs-color_border: #1c261c;
  --vocs-color_border2: #3c3d3c;

  --vocs-color_textGreen: #8df885;
  --vocs-color_textGreenHover: #5fd655;
  --vocs-color_textRed: #ff5d5c;
  --vocs-color_textRedHover: rgba(255, 93, 92, 0.8);
  --vocs-color_textYellow: #ffd60a;
  --vocs-color_textYellowHover: #ffc908;
  --vocs-color_borderGreen: rgba(141, 248, 133, 0.4);
  --vocs-color_borderRed: rgba(255, 93, 92, 0.4);
  --vocs-color_borderYellow: rgba(255, 214, 10, 0.4);
  --vocs-color_backgroundGreenTint: rgba(15, 204, 113, 0.14);
  --vocs-color_backgroundGreenTint2: rgba(15, 204, 113, 0.2);
  --vocs-color_backgroundRedTint: rgba(255, 93, 92, 0.14);
  --vocs-color_backgroundRedTint2: rgba(255, 93, 92, 0.2);
  --vocs-color_backgroundYellowTint: rgba(255, 214, 10, 0.14);
}

/* ════════════════════════════════════════════
 * Section 6: Base typography — apply Space Grotesk globally
 * ════════════════════════════════════════════ */

:root {
  --font-family-space-grotesk:
    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    sans-serif;
  --font-family-primary: var(--font-family-space-grotesk);
  --font-family-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
}

html,
body {
  font-family: var(--font-family-primary);
}

/* ════════════════════════════════════════════
 * Section 7: Border radius — square everything
 * Mirrors dex-home/src/styles/global.scss, where buttons, popups, menus,
 * and select containers are forced to `border-radius: 0 !important`.
 *
 * Two layers:
 *   (a) Override every `--vocs-borderRadius_*` token to 0, which covers any
 *       vocs internal style that reads from the radius scale via
 *       `borderRadiusVars[…]`. (vocs.config.ts also declares this on the
 *       :root level via theme.variables.borderRadius — this block is the
 *       belt-and-braces fallback for component CSS that bypasses the var.)
 *   (b) Hard-coded literals vocs ships outside the token system —
 *       Step's `100%` circle, twoslash's `4px` popups — get explicit
 *       overrides so the squareness is total.
 *   (c) Project-level rule for any HTML element a docs author writes by
 *       hand (button, [role='button'], popup/menu containers) so MDX
 *       components also stay square.
 * ════════════════════════════════════════════ */

:root,
:root.dark {
  --vocs-borderRadius_0: 0;
  --vocs-borderRadius_2: 0;
  --vocs-borderRadius_3: 0;
  --vocs-borderRadius_4: 0;
  --vocs-borderRadius_6: 0;
  --vocs-borderRadius_8: 0;
  --vocs-borderRadius_round: 0;
}

/* Twoslash popup / completion-list use literal 4px rather than the token. */
.twoslash-popup-info,
.twoslash-popup-info-hover,
.twoslash-completion-list {
  border-radius: 0 !important;
}

/* `<Steps>` numbers render as a `border-radius: 100%` circle in vocs;
 * keep them square to match the dex-home aesthetic. */
.vocs_Steps .vocs_Steps_title::before {
  border-radius: 0 !important;
}

/* The DesktopSearch "⌘K" badge inlines `border-radius: 2px` on its
 * rotating tick element. Inline styles outrank stylesheet rules without
 * `!important`, so we still need the bang to win the cascade. */
.vocs_DesktopSearch_searchCommand > div {
  border-radius: 0 !important;
}

/* Mirror dex-home/src/styles/global.scss: buttons + popup/menu/select
 * containers are always square, even when authored inline in MDX. */
button,
input[type='button'],
input[type='submit'],
input[type='reset'],
[role='button'] {
  border-radius: 0 !important;
}

[class*='_options_'],
[class*='_select-container_'],
[class*='_menus_'],
[class*='_popup-content_'] {
  border-radius: 0 !important;
}

/* Hide Vocs's built-in theme toggle (sidebar footer / mobile popover); the
 * single switch lives top-right via TopNavEnd in layout.tsx. */
.vocs_ThemeToggle_root {
  display: none !important;
}

/* ── Home page audience router ──────────────────────────────────────────────
 * Three persona cards rendered from index.mdx, linking each reader to the
 * start of their path. Square corners + green-on-hover match the design. */
.path-router {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 28px 0;
}
.path-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--vocs-color_border2);
  background: var(--vocs-color_background2);
  text-decoration: none !important;
  transition: border-color 0.12s, background 0.12s;
}
.path-card:hover {
  border-color: var(--vocs-color_textAccent);
  background: var(--vocs-color_background3);
}
.path-card-icon {
  width: 24px;
  height: 24px;
  color: var(--vocs-color_textAccent);
}
.path-card-kicker {
  font-weight: 600;
  font-size: 15px;
  color: var(--vocs-color_heading);
}
.path-card-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--vocs-color_text3);
}
@media (max-width: 720px) {
  .path-router {
    grid-template-columns: 1fr;
  }
}

/* ── Ecosystem link cards ───────────────────────────────────────────────────
 * The same frame as the home router, for the outbound cards on
 * ecosystem.mdx. Third-party wordmarks are single-colour SVGs painted
 * through an alpha mask, so one asset follows the docs' own text colour in
 * both themes instead of needing a light and a dark file. */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0 28px;
}
.eco-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--vocs-color_border2);
  background: var(--vocs-color_background2);
  text-decoration: none !important;
  transition: border-color 0.12s, background 0.12s;
}
.eco-card:hover {
  border-color: var(--vocs-color_textAccent);
  background: var(--vocs-color_background3);
}
.eco-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.eco-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--vocs-color_heading);
}
.eco-tag {
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 0 5px;
  color: var(--vocs-color_textGreen);
  border: 1px solid var(--vocs-color_borderGreen);
  background: var(--vocs-color_backgroundGreenTint);
}
/* community-run, not operated by TxFlow — stated, not styled as endorsed */
.eco-tag[data-tone='dim'] {
  color: var(--vocs-color_text3);
  border-color: var(--vocs-color_border2);
  background: none;
}
.eco-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--vocs-color_text3);
}
/* inline code inherits the docs' base size, which overpowers the card text */
.eco-desc code {
  font-size: 0.92em;
}
.eco-url {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--vocs-color_textAccent);
}
.eco-logo {
  display: block;
  height: 22px;
  color: var(--vocs-color_heading);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.eco-logo-probly {
  width: 88px;
  -webkit-mask-image: url('/logos/probly.svg');
  mask-image: url('/logos/probly.svg');
}
@media (max-width: 720px) {
  .eco-grid {
    grid-template-columns: 1fr;
  }
}