/* =============================================================================
   Pi42 Design Tokens — generated from Figma
   File: Test Design System (pE6gjkVR6dcmbTTvNNAwuS)
   ────────────────────────────────────────────────────────────────────────────
   Architecture:
     Layer 1 — Primitives          (single mode, raw values)
     Layer 2 — Semantic Colours    (themed per partner × mode)
     Layer 3 — Spacing & Radius    (Mobile vs Web density)

   Naming:
     Figma `fill-brand/default`  →  CSS `--fill-brand-default`
     Figma `Pi42 primary/500`    →  CSS `--pi42-primary-500`
     Figma `Space Tokens/md`     →  CSS `--space-md`

   Do not edit by hand — regenerate from Figma via the token pipeline.
   ========================================================================== */


/* ─── 00 · Document paint ─────────────────────────────────────────────── */
html, body {
  margin: 0;
  background: var(--background-base);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}


/* ─── 01 · Primitives ─────────────────────────────────────────────────── */
:root {
  /* Neutrals */
  --neutrals-0: #fafafa;
  --neutrals-100: #fafbfc;
  --neutrals-200: #f1f5f9;
  --neutrals-300: #edf2f7;
  --neutrals-400: #e8e9ef;
  --neutrals-500: #e2e8f0;
  --neutrals-600: #dde3ea;
  --neutrals-700: #caced5;
  --neutrals-800: #b8b9c0;
  --neutrals-900: #94a0ad;
  --neutrals-1000: #6d7b8d;
  --neutrals-1100: #4e5968;
  --neutrals-1200: #464f5b;
  --neutrals-1300: #35404d;
  --neutrals-1400: #1f2730;
  --neutrals-1500: #1e242c;
  --neutrals-1600: #1c1f26;
  --neutrals-1700: #1a1a20;
  --neutrals-1800: #171b21;
  --neutrals-1900: #141b22;
  --neutrals-2000: #0f1318;
  --neutrals-2100: #070a0d;
  --neutrals-2200: #000000;
  /* Pi42 primary */
  --pi42-primary-50: #ebf1ff;
  --pi42-primary-100: #dbe7ff;
  --pi42-primary-200: #b3cbff;
  --pi42-primary-300: #8fb2ff;
  --pi42-primary-400: #6696ff;
  --pi42-primary-500: #437eff;
  --pi42-primary-600: #0051ff;
  --pi42-primary-700: #003dc2;
  --pi42-primary-800: #0e3179;
  --pi42-primary-900: #001542;
  --pi42-primary-950: #000a1f;
  /* Pi42 Blues */
  --pi42-blues-0: #eef3ff;
  --pi42-blues-100: #e8eeff;
  --pi42-blues-200: #dde5ff;
  --pi42-blues-300: #ccd8ff;
  --pi42-blues-400: #b5c6ff;
  --pi42-blues-500: #98afff;
  --pi42-blues-600: #7694ff;
  --pi42-blues-700: #5986ff;
  --pi42-blues-800: #437eff;
  --pi42-blues-900: #376be0;
  --pi42-blues-1000: #2c58be;
  --pi42-blues-1100: #284c99;
  --pi42-blues-1200: #1b3880;
  --pi42-blues-1300: #142b63;
  --pi42-blues-1400: #0f2049;
  --pi42-blues-1500: #0b1836;
  --pi42-blues-1600: #081127;
  --pi42-blues-1700: #060d1e;
  --pi42-blues-1800: #050a17;
  --pi42-blues-1900: #05091a;
  /* Shark primary */
  --shark-primary-50: #e6f8fc;
  --shark-primary-100: #b3ebf5;
  --shark-primary-200: #80deee;
  --shark-primary-300: #4dd1e7;
  --shark-primary-400: #1ac4df;
  --shark-primary-500: #00abd3;
  --shark-primary-600: #0097ba;
  --shark-primary-700: #007a97;
  --shark-primary-800: #005c72;
  --shark-primary-900: #003e4d;
  --shark-primary-950: #002029;
  /* Niyam primary */
  --niyam-primary-50: #e8f8fe;
  --niyam-primary-100: #d0f1fe;
  --niyam-primary-200: #a1e3fc;
  --niyam-primary-300: #73d5fb;
  --niyam-primary-400: #44c7f9;
  --niyam-primary-500: #15b9f8;
  --niyam-primary-600: #1194c6;
  --niyam-primary-700: #0d6f95;
  --niyam-primary-800: #084a63;
  --niyam-primary-900: #042532;
  --niyam-primary-950: #02161d;
  /* Error Reds */
  --error-reds-100: #fee2e2;
  --error-reds-200: #fecaca;
  --error-reds-300: #fca5a5;
  --error-reds-400: #f87171;
  --error-reds-500: #ef4444;
  --error-reds-600: #dc2626;
  --error-reds-700: #b91c1c;
  --error-reds-800: #991b1b;
  --error-reds-900: #7f1d1d;
  /* Sell Reds */
  --sell-reds-100: #fee8e2;
  --sell-reds-200: #fdc5b3;
  --sell-reds-300: #f99476;
  --sell-reds-400: #f35a38;
  --sell-reds-500: #e2350e;
  --sell-reds-600: #c42d0c;
  --sell-reds-700: #a3250a;
  --sell-reds-800: #832008;
  --sell-reds-900: #661a06;
  /* Greens */
  --greens-100: #f0fdf4;
  --greens-200: #dcfce7;
  --greens-300: #68cd3d;
  --greens-400: #0ac280;
  --greens-500: #16a34a;
  --greens-600: #078d5e;
  --greens-700: #166534;
  --greens-800: #14532d;
  --greens-900: #052e16;
  /* Yellows */
  --yellows-50: #fff5eb;
  --yellows-100: #ffebd6;
  --yellows-200: #ffd9b3;
  --yellows-300: #ffc48a;
  --yellows-400: #ffb061;
  --yellows-500: #f59e0b;
  --yellows-600: #ff9d3c;
  --yellows-700: #fa7d00;
  --yellows-800: #bd5e00;
  --yellows-900: #804000;
  --yellows-1000: #3d1f00;
  --yellows-1050: #1f0f00;
  /* Transparent */
  --transparent-pi42-500-10: #437eff1a;
  --transparent-pi42-500-25: #437eff40;
  --transparent-pi42-500-50: #437eff80;
  --transparent-shark-500-10: #00abd31a;
  --transparent-shark-500-25: #00abd340;
  --transparent-shark-500-50: #00abd380;
  --transparent-niyam-500-10: #15b9f81a;
  --transparent-niyam-500-25: #15b9f840;
  --transparent-niyam-500-50: #15b9f880;
  --transparent-buy-300-10: #68cd3d1a;
  --transparent-buy-300-50: #68cd3d80;
  --transparent-buy-400-10: #0ac2801a;
  --transparent-buy-400-50: #0ac28080;
  --transparent-buy-500-10: #16a34a1a;
  --transparent-buy-500-50: #16a34a80;
  --transparent-buy-600-10: #078d5e1a;
  --transparent-buy-600-50: #078d5e80;
  --transparent-sell-400-10: #f35a381a;
  --transparent-sell-400-50: #f35a3880;
  --transparent-sell-500-10: #e2350e1a;
  --transparent-sell-500-50: #e2350e80;
  --transparent-error-400-10: #f871711a;
  --transparent-error-400-50: #f8717180;
  --transparent-error-500-10: #ef44441a;
  --transparent-error-500-50: #ef444480;
  --transparent-alert-500-10: #f59e0b1a;
  --transparent-alert-alert500-50: #f59e0b80;
  --transparent-disabled-disabled-20: #35404d33;
  --transparent-disabled-disabled-50: #35404d80;
  /* border-brand-card-glow */
  --border-brand-card-glow: #00d69633;

  /* Spacing primitives (raw pixel values) */
  --space-primitive-0: 0px;
  --space-primitive-1: 4px;
  --space-primitive-2: 8px;
  --space-primitive-3: 12px;
  --space-primitive-4: 16px;
  --space-primitive-5: 20px;
  --space-primitive-6: 24px;
  --space-primitive-8: 32px;
  --space-primitive-10: 40px;
  --space-primitive-12: 48px;
  --space-primitive-16: 64px;
  --space-primitive-20: 80px;
  --space-primitive-24: 96px;

  /* Radius (global, single mode) */
  --radius-none: 0;
  --radius-xxs: 4px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
}


/* ─── 02 · Semantic Colours ───────────────────────────────────────────── */
/* Defaults to Pi42 Dark. Override via [data-partner="…"][data-theme="…"]. */

:root {
  /* Default — Pi42 Dark Mode */
  --background-base: var(--neutrals-2100);
  --surface-card: var(--neutrals-2000);
  --surface-raised-1: var(--neutrals-1700);
  --surface-raised-2: var(--neutrals-1500);
  --surface-brand: var(--transparent-pi42-500-10);
  --surface-disabled: var(--transparent-disabled-disabled-20);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-400);
  --text-secondary: var(--neutrals-900);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-1300);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--pi42-primary-500);
  --text-buy: var(--greens-500);
  --text-sell: var(--sell-reds-400);
  --text-success: var(--greens-300);
  --text-danger: var(--error-reds-400);
  --text-alert: var(--yellows-500);
  --fill-brand-default: var(--pi42-primary-500);
  --fill-brand-dark: var(--pi42-primary-600);
  --fill-brand-light: var(--pi42-primary-400);
  --fill-brand-transparent-strong: var(--transparent-pi42-500-50);
  --fill-brand-transparent-mid: var(--transparent-pi42-500-25);
  --fill-brand-transparent-subtle: var(--transparent-pi42-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-400);
  --fill-buy-transparent: var(--transparent-buy-400-10);
  --fill-sell-default: var(--sell-reds-500);
  --fill-sell-mid: var(--sell-reds-400);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-300-10);
  --fill-error-warning-default: var(--error-reds-400);
  --fill-error-warning-mid: var(--error-reds-300);
  --fill-error-warning-transparent: var(--transparent-error-400-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-400);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--pi42-primary-500);
  --border-brand-dark: var(--pi42-primary-600);
  --border-brand-light: var(--pi42-primary-400);
  --border-brand-transparent-primary: var(--transparent-pi42-500-50);
  --border-brand-transparent-secondary: var(--transparent-pi42-500-25);
  --border-buy-default: var(--greens-500);
  --border-buy-mid: var(--transparent-buy-500-50);
  --border-buy-subtle: var(--transparent-buy-500-10);
  --border-sell-default: var(--sell-reds-500);
  --border-sell-mid: var(--transparent-sell-500-50);
  --border-sell-subtle: var(--transparent-sell-500-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-300-10);
  --border-error-primary: var(--error-reds-400);
  --border-error-secondary: var(--error-reds-300);
  --border-error-transparent-primary: var(--transparent-error-400-10);
  --border-error-transparent-secondary: var(--transparent-error-400-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-1200);
  --border-neutrals-secondary: var(--neutrals-1300);
  --border-neutrals-tertiary: var(--neutrals-1500);
  --border-neutrals-opposite: var(--neutrals-500);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-400);
  --icon-secondary: var(--neutrals-900);
  --icon-disabled: var(--neutrals-1300);
}

[data-partner="pi42"][data-theme="dark"] {
  /* Pi42 Dark Mode */
  --background-base: var(--neutrals-2100);
  --surface-card: var(--neutrals-2000);
  --surface-raised-1: var(--neutrals-1700);
  --surface-raised-2: var(--neutrals-1500);
  --surface-brand: var(--transparent-pi42-500-10);
  --surface-disabled: var(--transparent-disabled-disabled-20);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-400);
  --text-secondary: var(--neutrals-900);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-1300);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--pi42-primary-500);
  --text-buy: var(--greens-500);
  --text-sell: var(--sell-reds-400);
  --text-success: var(--greens-300);
  --text-danger: var(--error-reds-400);
  --text-alert: var(--yellows-500);
  --fill-brand-default: var(--pi42-primary-500);
  --fill-brand-dark: var(--pi42-primary-600);
  --fill-brand-light: var(--pi42-primary-400);
  --fill-brand-transparent-strong: var(--transparent-pi42-500-50);
  --fill-brand-transparent-mid: var(--transparent-pi42-500-25);
  --fill-brand-transparent-subtle: var(--transparent-pi42-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-400);
  --fill-buy-transparent: var(--transparent-buy-400-10);
  --fill-sell-default: var(--sell-reds-500);
  --fill-sell-mid: var(--sell-reds-400);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-300-10);
  --fill-error-warning-default: var(--error-reds-400);
  --fill-error-warning-mid: var(--error-reds-300);
  --fill-error-warning-transparent: var(--transparent-error-400-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-400);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--pi42-primary-500);
  --border-brand-dark: var(--pi42-primary-600);
  --border-brand-light: var(--pi42-primary-400);
  --border-brand-transparent-primary: var(--transparent-pi42-500-50);
  --border-brand-transparent-secondary: var(--transparent-pi42-500-25);
  --border-buy-default: var(--greens-500);
  --border-buy-mid: var(--transparent-buy-500-50);
  --border-buy-subtle: var(--transparent-buy-500-10);
  --border-sell-default: var(--sell-reds-500);
  --border-sell-mid: var(--transparent-sell-500-50);
  --border-sell-subtle: var(--transparent-sell-500-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-300-10);
  --border-error-primary: var(--error-reds-400);
  --border-error-secondary: var(--error-reds-300);
  --border-error-transparent-primary: var(--transparent-error-400-10);
  --border-error-transparent-secondary: var(--transparent-error-400-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-1200);
  --border-neutrals-secondary: var(--neutrals-1300);
  --border-neutrals-tertiary: var(--neutrals-1500);
  --border-neutrals-opposite: var(--neutrals-500);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-400);
  --icon-secondary: var(--neutrals-900);
  --icon-disabled: var(--neutrals-1300);
}

[data-partner="pi42"][data-theme="light"] {
  /* Pi42 Light Mode */
  --background-base: var(--neutrals-100);
  --surface-card: var(--neutrals-200);
  --surface-raised-1: var(--neutrals-400);
  --surface-raised-2: var(--neutrals-500);
  --surface-brand: var(--transparent-pi42-500-10);
  --surface-disabled: var(--neutrals-600);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-1700);
  --text-secondary: var(--neutrals-1100);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-800);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--pi42-primary-500);
  --text-buy: var(--greens-600);
  --text-sell: var(--sell-reds-500);
  --text-success: var(--greens-400);
  --text-danger: var(--error-reds-500);
  --text-alert: var(--yellows-700);
  --fill-brand-default: var(--pi42-primary-500);
  --fill-brand-dark: var(--pi42-primary-600);
  --fill-brand-light: var(--pi42-primary-400);
  --fill-brand-transparent-strong: var(--transparent-pi42-500-50);
  --fill-brand-transparent-mid: var(--transparent-pi42-500-25);
  --fill-brand-transparent-subtle: var(--transparent-pi42-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-600);
  --fill-buy-transparent: var(--transparent-buy-500-10);
  --fill-sell-default: var(--sell-reds-600);
  --fill-sell-mid: var(--sell-reds-500);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-500-10);
  --fill-error-warning-default: var(--error-reds-500);
  --fill-error-warning-mid: var(--error-reds-400);
  --fill-error-warning-transparent: var(--transparent-error-500-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-600);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--pi42-primary-500);
  --border-brand-dark: var(--pi42-primary-600);
  --border-brand-light: var(--pi42-primary-400);
  --border-brand-transparent-primary: var(--transparent-pi42-500-50);
  --border-brand-transparent-secondary: var(--transparent-pi42-500-25);
  --border-buy-default: var(--greens-600);
  --border-buy-mid: var(--transparent-buy-600-50);
  --border-buy-subtle: var(--transparent-buy-600-10);
  --border-sell-default: var(--sell-reds-400);
  --border-sell-mid: var(--transparent-sell-400-50);
  --border-sell-subtle: var(--transparent-sell-400-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-500-10);
  --border-error-primary: var(--error-reds-500);
  --border-error-secondary: var(--error-reds-600);
  --border-error-transparent-primary: var(--transparent-error-500-10);
  --border-error-transparent-secondary: var(--transparent-error-500-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-500);
  --border-neutrals-secondary: var(--neutrals-600);
  --border-neutrals-tertiary: var(--neutrals-600);
  --border-neutrals-opposite: var(--neutrals-1700);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-1700);
  --icon-secondary: var(--neutrals-1100);
  --icon-disabled: var(--neutrals-800);
}

[data-partner="shark"][data-theme="dark"] {
  /* Shark Dark Mode */
  --background-base: var(--neutrals-2100);
  --surface-card: var(--neutrals-2000);
  --surface-raised-1: var(--neutrals-1800);
  --surface-raised-2: var(--neutrals-1500);
  --surface-brand: var(--transparent-shark-500-10);
  --surface-disabled: var(--transparent-disabled-disabled-20);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-400);
  --text-secondary: var(--neutrals-900);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-1300);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--shark-primary-500);
  --text-buy: var(--greens-500);
  --text-sell: var(--sell-reds-400);
  --text-success: var(--greens-300);
  --text-danger: var(--error-reds-400);
  --text-alert: var(--yellows-500);
  --fill-brand-default: var(--shark-primary-500);
  --fill-brand-dark: var(--shark-primary-600);
  --fill-brand-light: var(--shark-primary-400);
  --fill-brand-transparent-strong: var(--transparent-shark-500-50);
  --fill-brand-transparent-mid: var(--transparent-shark-500-25);
  --fill-brand-transparent-subtle: var(--transparent-shark-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-400);
  --fill-buy-transparent: var(--transparent-buy-400-10);
  --fill-sell-default: var(--sell-reds-500);
  --fill-sell-mid: var(--sell-reds-400);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-300-10);
  --fill-error-warning-default: var(--error-reds-400);
  --fill-error-warning-mid: var(--error-reds-300);
  --fill-error-warning-transparent: var(--transparent-error-400-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-400);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--shark-primary-500);
  --border-brand-dark: var(--shark-primary-600);
  --border-brand-light: var(--shark-primary-400);
  --border-brand-transparent-primary: var(--transparent-shark-500-50);
  --border-brand-transparent-secondary: var(--transparent-shark-500-25);
  --border-buy-default: var(--greens-500);
  --border-buy-mid: var(--transparent-buy-500-50);
  --border-buy-subtle: var(--transparent-buy-500-10);
  --border-sell-default: var(--sell-reds-500);
  --border-sell-mid: var(--transparent-sell-500-50);
  --border-sell-subtle: var(--transparent-sell-500-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-300-10);
  --border-error-primary: var(--error-reds-400);
  --border-error-secondary: var(--error-reds-300);
  --border-error-transparent-primary: var(--transparent-error-400-10);
  --border-error-transparent-secondary: var(--transparent-error-400-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-1200);
  --border-neutrals-secondary: var(--neutrals-1300);
  --border-neutrals-tertiary: var(--neutrals-1500);
  --border-neutrals-opposite: var(--neutrals-500);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-400);
  --icon-secondary: var(--neutrals-900);
  --icon-disabled: var(--neutrals-1300);
}

[data-partner="shark"][data-theme="light"] {
  /* Shark Light Mode */
  --background-base: var(--neutrals-100);
  --surface-card: var(--neutrals-200);
  --surface-raised-1: var(--neutrals-400);
  --surface-raised-2: var(--neutrals-500);
  --surface-brand: var(--transparent-shark-500-10);
  --surface-disabled: var(--neutrals-600);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-1700);
  --text-secondary: var(--neutrals-1100);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-800);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--shark-primary-500);
  --text-buy: var(--greens-600);
  --text-sell: var(--sell-reds-500);
  --text-success: var(--greens-400);
  --text-danger: var(--error-reds-500);
  --text-alert: var(--yellows-700);
  --fill-brand-default: var(--shark-primary-500);
  --fill-brand-dark: var(--shark-primary-600);
  --fill-brand-light: var(--shark-primary-400);
  --fill-brand-transparent-strong: var(--transparent-shark-500-50);
  --fill-brand-transparent-mid: var(--transparent-shark-500-25);
  --fill-brand-transparent-subtle: var(--transparent-shark-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-600);
  --fill-buy-transparent: var(--transparent-buy-500-10);
  --fill-sell-default: var(--sell-reds-600);
  --fill-sell-mid: var(--sell-reds-500);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-500-10);
  --fill-error-warning-default: var(--error-reds-500);
  --fill-error-warning-mid: var(--error-reds-400);
  --fill-error-warning-transparent: var(--transparent-error-500-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-600);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--shark-primary-500);
  --border-brand-dark: var(--shark-primary-600);
  --border-brand-light: var(--shark-primary-400);
  --border-brand-transparent-primary: var(--transparent-shark-500-50);
  --border-brand-transparent-secondary: var(--transparent-shark-500-25);
  --border-buy-default: var(--greens-600);
  --border-buy-mid: var(--transparent-buy-600-50);
  --border-buy-subtle: var(--transparent-buy-600-10);
  --border-sell-default: var(--sell-reds-400);
  --border-sell-mid: var(--transparent-sell-400-50);
  --border-sell-subtle: var(--transparent-sell-400-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-500-10);
  --border-error-primary: var(--error-reds-500);
  --border-error-secondary: var(--error-reds-600);
  --border-error-transparent-primary: var(--transparent-error-500-10);
  --border-error-transparent-secondary: var(--transparent-error-500-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-500);
  --border-neutrals-secondary: var(--neutrals-600);
  --border-neutrals-tertiary: var(--neutrals-600);
  --border-neutrals-opposite: var(--neutrals-1700);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-1700);
  --icon-secondary: var(--neutrals-1100);
  --icon-disabled: var(--neutrals-800);
}

[data-partner="niyam"][data-theme="dark"] {
  /* Niyam Dark Mode */
  --background-base: var(--neutrals-2100);
  --surface-card: var(--neutrals-2000);
  --surface-raised-1: var(--neutrals-1800);
  --surface-raised-2: var(--neutrals-1500);
  --surface-brand: var(--transparent-niyam-500-10);
  --surface-disabled: var(--transparent-disabled-disabled-20);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-400);
  --text-secondary: var(--neutrals-900);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-1300);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--niyam-primary-500);
  --text-buy: var(--greens-500);
  --text-sell: var(--sell-reds-400);
  --text-success: var(--greens-300);
  --text-danger: var(--error-reds-400);
  --text-alert: var(--yellows-500);
  --fill-brand-default: var(--niyam-primary-500);
  --fill-brand-dark: var(--niyam-primary-600);
  --fill-brand-light: var(--niyam-primary-400);
  --fill-brand-transparent-strong: var(--transparent-niyam-500-50);
  --fill-brand-transparent-mid: var(--transparent-niyam-500-25);
  --fill-brand-transparent-subtle: var(--transparent-niyam-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-400);
  --fill-buy-transparent: var(--transparent-buy-400-10);
  --fill-sell-default: var(--sell-reds-500);
  --fill-sell-mid: var(--sell-reds-400);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-300-10);
  --fill-error-warning-default: var(--error-reds-400);
  --fill-error-warning-mid: var(--error-reds-300);
  --fill-error-warning-transparent: var(--transparent-error-400-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-400);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--niyam-primary-500);
  --border-brand-dark: var(--niyam-primary-600);
  --border-brand-light: var(--niyam-primary-400);
  --border-brand-transparent-primary: var(--transparent-niyam-500-50);
  --border-brand-transparent-secondary: var(--transparent-niyam-500-25);
  --border-buy-default: var(--greens-500);
  --border-buy-mid: var(--transparent-buy-500-50);
  --border-buy-subtle: var(--transparent-buy-500-10);
  --border-sell-default: var(--sell-reds-500);
  --border-sell-mid: var(--transparent-sell-500-50);
  --border-sell-subtle: var(--transparent-sell-500-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-300-10);
  --border-error-primary: var(--error-reds-400);
  --border-error-secondary: var(--error-reds-300);
  --border-error-transparent-primary: var(--transparent-error-400-10);
  --border-error-transparent-secondary: var(--transparent-error-400-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-1200);
  --border-neutrals-secondary: var(--neutrals-1300);
  --border-neutrals-tertiary: var(--neutrals-1500);
  --border-neutrals-opposite: var(--neutrals-500);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-400);
  --icon-secondary: var(--neutrals-900);
  --icon-disabled: var(--neutrals-1300);
}

[data-partner="niyam"][data-theme="light"] {
  /* Niyam Light Mode */
  --background-base: var(--neutrals-100);
  --surface-card: var(--neutrals-200);
  --surface-raised-1: var(--neutrals-400);
  --surface-raised-2: var(--neutrals-500);
  --surface-brand: var(--transparent-niyam-500-10);
  --surface-disabled: var(--neutrals-600);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-1700);
  --text-secondary: var(--neutrals-1100);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-800);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--niyam-primary-500);
  --text-buy: var(--greens-600);
  --text-sell: var(--sell-reds-500);
  --text-success: var(--greens-400);
  --text-danger: var(--error-reds-500);
  --text-alert: var(--yellows-700);
  --fill-brand-default: var(--niyam-primary-500);
  --fill-brand-dark: var(--niyam-primary-600);
  --fill-brand-light: var(--niyam-primary-400);
  --fill-brand-transparent-strong: var(--transparent-niyam-500-50);
  --fill-brand-transparent-mid: var(--transparent-niyam-500-25);
  --fill-brand-transparent-subtle: var(--transparent-niyam-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-600);
  --fill-buy-transparent: var(--transparent-buy-500-10);
  --fill-sell-default: var(--sell-reds-600);
  --fill-sell-mid: var(--sell-reds-500);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-500-10);
  --fill-error-warning-default: var(--error-reds-500);
  --fill-error-warning-mid: var(--error-reds-400);
  --fill-error-warning-transparent: var(--transparent-error-500-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-600);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--niyam-primary-500);
  --border-brand-dark: var(--niyam-primary-600);
  --border-brand-light: var(--niyam-primary-400);
  --border-brand-transparent-primary: var(--transparent-niyam-500-50);
  --border-brand-transparent-secondary: var(--transparent-niyam-500-25);
  --border-buy-default: var(--greens-600);
  --border-buy-mid: var(--transparent-buy-600-50);
  --border-buy-subtle: var(--transparent-buy-600-10);
  --border-sell-default: var(--sell-reds-400);
  --border-sell-mid: var(--transparent-sell-400-50);
  --border-sell-subtle: var(--transparent-sell-400-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-500-10);
  --border-error-primary: var(--error-reds-500);
  --border-error-secondary: var(--error-reds-600);
  --border-error-transparent-primary: var(--transparent-error-500-10);
  --border-error-transparent-secondary: var(--transparent-error-500-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-500);
  --border-neutrals-secondary: var(--neutrals-600);
  --border-neutrals-tertiary: var(--neutrals-600);
  --border-neutrals-opposite: var(--neutrals-1700);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-1700);
  --icon-secondary: var(--neutrals-1100);
  --icon-disabled: var(--neutrals-800);
}

/* Fallback: theme without partner attribute defaults to Pi42 */
[data-theme="dark"]:not([data-partner]) {
  /* Pi42 Dark (fallback) */
  --background-base: var(--neutrals-2100);
  --surface-card: var(--neutrals-2000);
  --surface-raised-1: var(--neutrals-1700);
  --surface-raised-2: var(--neutrals-1500);
  --surface-brand: var(--transparent-pi42-500-10);
  --surface-disabled: var(--transparent-disabled-disabled-20);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-400);
  --text-secondary: var(--neutrals-900);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-1300);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--pi42-primary-500);
  --text-buy: var(--greens-500);
  --text-sell: var(--sell-reds-400);
  --text-success: var(--greens-300);
  --text-danger: var(--error-reds-400);
  --text-alert: var(--yellows-500);
  --fill-brand-default: var(--pi42-primary-500);
  --fill-brand-dark: var(--pi42-primary-600);
  --fill-brand-light: var(--pi42-primary-400);
  --fill-brand-transparent-strong: var(--transparent-pi42-500-50);
  --fill-brand-transparent-mid: var(--transparent-pi42-500-25);
  --fill-brand-transparent-subtle: var(--transparent-pi42-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-400);
  --fill-buy-transparent: var(--transparent-buy-400-10);
  --fill-sell-default: var(--sell-reds-500);
  --fill-sell-mid: var(--sell-reds-400);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-300-10);
  --fill-error-warning-default: var(--error-reds-400);
  --fill-error-warning-mid: var(--error-reds-300);
  --fill-error-warning-transparent: var(--transparent-error-400-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-400);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--pi42-primary-500);
  --border-brand-dark: var(--pi42-primary-600);
  --border-brand-light: var(--pi42-primary-400);
  --border-brand-transparent-primary: var(--transparent-pi42-500-50);
  --border-brand-transparent-secondary: var(--transparent-pi42-500-25);
  --border-buy-default: var(--greens-500);
  --border-buy-mid: var(--transparent-buy-500-50);
  --border-buy-subtle: var(--transparent-buy-500-10);
  --border-sell-default: var(--sell-reds-500);
  --border-sell-mid: var(--transparent-sell-500-50);
  --border-sell-subtle: var(--transparent-sell-500-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-300-10);
  --border-error-primary: var(--error-reds-400);
  --border-error-secondary: var(--error-reds-300);
  --border-error-transparent-primary: var(--transparent-error-400-10);
  --border-error-transparent-secondary: var(--transparent-error-400-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-1200);
  --border-neutrals-secondary: var(--neutrals-1300);
  --border-neutrals-tertiary: var(--neutrals-1500);
  --border-neutrals-opposite: var(--neutrals-500);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-400);
  --icon-secondary: var(--neutrals-900);
  --icon-disabled: var(--neutrals-1300);
}

[data-theme="light"]:not([data-partner]) {
  /* Pi42 Light (fallback) */
  --background-base: var(--neutrals-100);
  --surface-card: var(--neutrals-200);
  --surface-raised-1: var(--neutrals-400);
  --surface-raised-2: var(--neutrals-500);
  --surface-brand: var(--transparent-pi42-500-10);
  --surface-disabled: var(--neutrals-600);
  --surface-static-light: var(--neutrals-200);
  --surface-static-dark: var(--neutrals-2000);
  --text-primary: var(--neutrals-1700);
  --text-secondary: var(--neutrals-1100);
  --text-tertiary: var(--neutrals-1100);
  --text-disabled: var(--neutrals-800);
  --text-on-fill-white: var(--neutrals-400);
  --text-on-fill-dark: var(--neutrals-1700);
  --text-brand: var(--pi42-primary-500);
  --text-buy: var(--greens-600);
  --text-sell: var(--sell-reds-500);
  --text-success: var(--greens-400);
  --text-danger: var(--error-reds-500);
  --text-alert: var(--yellows-700);
  --fill-brand-default: var(--pi42-primary-500);
  --fill-brand-dark: var(--pi42-primary-600);
  --fill-brand-light: var(--pi42-primary-400);
  --fill-brand-transparent-strong: var(--transparent-pi42-500-50);
  --fill-brand-transparent-mid: var(--transparent-pi42-500-25);
  --fill-brand-transparent-subtle: var(--transparent-pi42-500-10);
  --fill-buy-default: var(--greens-500);
  --fill-buy-mid: var(--greens-600);
  --fill-buy-transparent: var(--transparent-buy-500-10);
  --fill-sell-default: var(--sell-reds-600);
  --fill-sell-mid: var(--sell-reds-500);
  --fill-sell-transparent: var(--transparent-sell-500-10);
  --fill-success-default: var(--greens-300);
  --fill-success-mid: var(--transparent-buy-300-50);
  --fill-success-transparent: var(--transparent-buy-500-10);
  --fill-error-warning-default: var(--error-reds-500);
  --fill-error-warning-mid: var(--error-reds-400);
  --fill-error-warning-transparent: var(--transparent-error-500-10);
  --fill-alert-default: var(--yellows-500);
  --fill-alert-mid: var(--yellows-600);
  --fill-alert-transparent: var(--transparent-alert-500-10);
  --border-brand-default: var(--pi42-primary-500);
  --border-brand-dark: var(--pi42-primary-600);
  --border-brand-light: var(--pi42-primary-400);
  --border-brand-transparent-primary: var(--transparent-pi42-500-50);
  --border-brand-transparent-secondary: var(--transparent-pi42-500-25);
  --border-buy-default: var(--greens-600);
  --border-buy-mid: var(--transparent-buy-600-50);
  --border-buy-subtle: var(--transparent-buy-600-10);
  --border-sell-default: var(--sell-reds-400);
  --border-sell-mid: var(--transparent-sell-400-50);
  --border-sell-subtle: var(--transparent-sell-400-10);
  --border-success-default: var(--greens-300);
  --border-success-mid: var(--transparent-buy-300-50);
  --border-success-subtle: var(--transparent-buy-500-10);
  --border-error-primary: var(--error-reds-500);
  --border-error-secondary: var(--error-reds-600);
  --border-error-transparent-primary: var(--transparent-error-500-10);
  --border-error-transparent-secondary: var(--transparent-error-500-50);
  --border-alert-default: var(--yellows-500);
  --border-alert-mid: var(--transparent-alert-alert500-50);
  --border-alert-subtle: var(--transparent-alert-500-10);
  --border-neutrals-primary: var(--neutrals-500);
  --border-neutrals-secondary: var(--neutrals-600);
  --border-neutrals-tertiary: var(--neutrals-600);
  --border-neutrals-opposite: var(--neutrals-1700);
  --border-neutrals-disabled: var(--transparent-disabled-disabled-50);
  --icon-primary: var(--neutrals-1700);
  --icon-secondary: var(--neutrals-1100);
  --icon-disabled: var(--neutrals-800);
}


/* ─── 03 · Spacing & Layout ───────────────────────────────────────────── */
/* Defaults to Web density. Override via [data-density="mobile"]. */

:root {
  /* Spacing tokens — Web mode */
  --space-null: var(--space-primitive-0);
  --space-xs: var(--space-primitive-1);
  --space-sm: var(--space-primitive-2);
  --space-md: var(--space-primitive-4);
  --space-lg: var(--space-primitive-6);
  --space-xl: var(--space-primitive-8);
  --space-2xl: var(--space-primitive-12);
  --space-3xl: var(--space-primitive-16);

  /* Layout tokens — Web mode */
  --layout-page-margin: 24px;
  --layout-gutter: 20px;
  --layout-column-count: 12px;
  --layout-max-content-width: 1280px;
  --layout-panel-width: 320px;
  --layout-sidebar-width: 240px;
}

[data-density="mobile"] {
  /* Spacing tokens — Mobile mode */
  --space-null: var(--space-primitive-0);
  --space-xs: var(--space-primitive-1);
  --space-sm: var(--space-primitive-2);
  --space-md: var(--space-primitive-3);
  --space-lg: var(--space-primitive-4);
  --space-xl: var(--space-primitive-6);
  --space-2xl: var(--space-primitive-8);
  --space-3xl: var(--space-primitive-12);

  /* Layout tokens — Mobile mode */
  --layout-page-margin: 16px;
  --layout-gutter: 12px;
  --layout-column-count: 4px;
  --layout-max-content-width: 0;
  --layout-panel-width: 0;
  --layout-sidebar-width: 0;
}


/* ─── 04 · Typography (Web/Button/L per Figma) ────────────────────────── */
:root {
  --font-body: 'Inter', sans-serif;
  --font-button-l-size: 16px;
  --font-button-l-weight: 600;
  --font-button-l-line-height: 1;
}