/* ═══════════════════════════════════════════════════════════════════════
   unibit tokens · v0.1.1 · 2026-10-14
   ═══════════════════════════════════════════════════════════════════════
   Cermin collection "Color" di Figma "Unibit (DS)" (brKosDbcylhJNEmvXyT3Zo).
   Hanya token core. Palet hue fitur (primitive + step) ada di colors.css (unibit colors);
   file ini berdiri sendiri: alias ke primitive ditulis sebagai nilai jadinya.
   40 token warna × 8 mode, plus radius, gap, dan ukuran kontrol.

   8 mode = 8 platform, nama variabel SAMA, hex boleh beda per platform:
     Unibit Dark    = :root / [data-theme="dark"]   (default)
     SDA            = [data-theme="sda"]            (salinan Unibit Dark)
     Unibit Light   = [data-theme="light"]
     Stockbit Dark  = [data-theme="stockbit-dark"]
     Stockbit Light = [data-theme="stockbit-light"]
     Bibit Dark     = [data-theme="bibit-dark"]
     Bibit Light    = [data-theme="bibit-light"]
     Stockbit Web   = [data-theme="stockbit-web"]

   Alpha ditulis rgb(R G B / N%) supaya persis sama dengan opacity Figma.
   Komentar di ujung tiap baris rgb() = hex dan opacity asalnya, mis. #00AB6B · 20%.

   SSOT berkas ini ada di root repo bit. Salinan di folder dist dan bit-deploy
   adalah HASIL CETAK, jangan diedit di sana. Editnya di unibit.html lalu
   regenerate. Riwayat versi: CHANGELOG.md
   (Jangan tulis bintang-garis-miring di dalam komentar ini. Itu menutup
    komentarnya lebih awal dan aturan CSS sesudahnya ikut hangus tanpa error.)
   ═══════════════════════════════════════════════════════════════════════ */

/* Versi yang bisa dibaca mesin. Tanpa ini, mencocokkan salinan berarti
   membandingkan isi berkas; dengan ini cukup satu baris dari console mana pun:
     getComputedStyle(document.documentElement).getPropertyValue('--unibit-version')
   Naik MAJOR kalau ada token dihapus/ganti nama, MINOR kalau ada yang
   ditambah, PATCH kalau cuma nilainya berubah. */
:root { --unibit-version: "0.1.1"; }


:root,
[data-theme="dark"] {
  /* Base */
  --color-background:      #121212;
  --color-surface:         #1F1F1F;
  --color-surface-2:       #262626;  /* raised in-page surface (nested card / section band) — solid, NOT popover/modal/emphasis */
  --color-popover:         #242424;
  --color-modal:           #292929;
  --color-surface-border:  #303030;
  --color-surface-2-border: #373737;  /* border for surface-2 — same L step as surface→surface-border (+6.7pp) */
  --color-popover-border:  #363636;
  --color-modal-border:    #3B3B3B;
  --color-divider:         rgb(255 255 255 / 5%);  /* #FFFFFF · 5% · white 5% */
  --color-emphasis:        rgb(255 255 255 / 6%);  /* #FFFFFF · 6% · white 6% */
  --color-sunken:          rgb(0 0 0 / 20%);       /* #000000 · 20% · black 20% */
  --color-gap:             rgb(0 0 0 / 42%);       /* #000000 · 42% · black 42% → =Background over Surface */
  --color-overlay:         rgb(0 0 0 / 65%);       /* #000000 · 65% · modal/overlay backdrop — black 65% (approved) */
  --color-snackbar:        #3B3B3B;   /* toast/snackbar bg — SAMA di light & dark (selalu gelap) */
  --color-track:           #3A3A3A;   /* switch track (OFF) — ON pakai brand */

  /* Brand */
  --color-brand:           #00AB6B;
  --color-brand-low:       rgb(0 171 107 / 12%);  /* #00AB6B · 12% */
  --color-brand-medium:    rgb(0 171 107 / 30%);  /* #00AB6B · 30% */

  /* Semantic — colors (Low 12% / Medium 21% / High 30% in dark) */
  --color-red:             #D95C5C;
  --color-red-low:         rgb(217 92 92 / 12%);  /* #D95C5C · 12% */
  --color-red-medium:      rgb(217 92 92 / 21%);  /* #D95C5C · 21% */
  --color-red-high:        rgb(217 92 92 / 30%);  /* #D95C5C · 30% */
  --color-orange:          #F59E0B;
  --color-orange-low:      rgb(245 158 11 / 12%);  /* #F59E0B · 12% */
  --color-orange-medium:   rgb(245 158 11 / 21%);  /* #F59E0B · 21% */
  --color-orange-high:     rgb(245 158 11 / 30%);  /* #F59E0B · 30% */
  --color-green:           #00AB6B;
  --color-green-low:       rgb(0 171 107 / 12%);  /* #00AB6B · 12% */
  --color-green-medium:    rgb(0 171 107 / 21%);  /* #00AB6B · 21% */
  --color-green-high:      rgb(0 171 107 / 30%);  /* #00AB6B · 30% */
  --color-blue:            #007FFF;
  --color-blue-low:        rgb(0 127 255 / 12%);  /* #007FFF · 12% */
  --color-blue-medium:     rgb(0 127 255 / 21%);  /* #007FFF · 21% */
  --color-blue-high:       rgb(0 127 255 / 30%);  /* #007FFF · 30% */
  --color-purple:          #6A5ACD;
  --color-purple-low:      rgb(106 90 205 / 12%);  /* #6A5ACD · 12% */
  --color-purple-medium:   rgb(106 90 205 / 21%);  /* #6A5ACD · 21% */
  --color-purple-high:     rgb(106 90 205 / 30%);  /* #6A5ACD · 30% */
  --color-white:           #FFFFFF;   /* putih — foreground di atas fill accent: teks/icon/shape (Figma: Semantic/White) */

  /* Text */
  --color-text-primary:    #CBCBCB;
  --color-text-secondary:  #8C8C8C;
  --color-text-tertiary:   #6B6B6B;
  --color-text-icon:       #808080;   /* icon standalone/netral — SAMA light & dark (mid-gray ~4:1 di kedua tema) */

  /* State — Disabled (fill kontrol saat disabled; teks disabled pakai text-tertiary) */
  --color-disabled:        rgb(255 255 255 / 6%);  /* #FFFFFF · 6% */
  --color-disabled-buy:    #616161; /* disabled Primary (buy) fill — ref Fidusia inactive-button-positive */
  --color-disabled-sell:   #616161; /* disabled Primary Red (sell) fill — ref Fidusia inactive-button-negative */

  /* -- Spacing & Radius (theme-independent — synced w/ Fidusia/Unibit DS) -- */
  --radius-field: 4px;    /* input · select · search · button */
  --radius-card: 6px;     /* card · table · banner */
  --radius-modal: 8px;    /* modal · sheet */
  --radius-pill: 9999px;  /* pill · status · avatar · switch track */

  --gap-item-tight: 2px;    --gap-item-base: 4px;     --gap-item-loose: 8px;
  --gap-section-tight: 8px; --gap-section-base: 12px; --gap-section-loose: 16px;
  --gap-layout-tight: 16px; --gap-layout-base: 20px;
  --padding-horizontal-tight: 12px; --padding-horizontal-base: 16px; --padding-horizontal-loose: 20px;
  --padding-vertical-tight: 8px;    --padding-vertical-base: 12px;   --padding-vertical-loose: 16px;
  --padding-uniform-tight: 4px;     --padding-uniform-base: 8px;     --padding-uniform-loose: 16px;

  /* -- Density — mode "Web" dari collection Number -- */
  --inp-h: 32px;      --inp-px: 12px;      /* input · select · search : height / padding-x */
  --btn-h: 32px;      --btn-px: 14px;      /* button : height / padding-x */
  --tbl-head-h: 40px; --tbl-cell-h: 44px;  /* dense table : header / row height (see .tbl--dense) */
}

/* Density — mode "Mobile" dari collection Number.
   Number sekarang punya 2 mode (Web / Mobile), sejajar dengan Color (Dark / Light).
   Di CSS, mode Mobile = scope [data-platform="mobile"]. HANYA grup Density yang beda;
   Radius, Gap, dan Padding nilainya identik di dua mode.
   Source of truth: Figma Se03MQl0HAasHwl4iVQowR, collection Number. */
[data-platform="mobile"] {
  --inp-h: 44px;      --inp-px: 12px;      /* 44 = floor tap target iOS; input ikut tinggi button */
  --btn-h: 44px;      --btn-px: 16px;
  --tbl-head-h: 40px; --tbl-cell-h: 40px;
}

[data-theme="light"],
[data-theme="bibit-light"],
[data-theme="stockbit-light"],
[data-theme="stockbit-web"] {
  /* Base */
  --color-background:      #F7F7F7;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F5F5F5;  /* raised in-page surface (nested card / section band) — solid, NOT popover/modal/emphasis */
  --color-popover:         #FFFFFF;
  --color-modal:           #FFFFFF;
  --color-surface-border:  #EDEDED;
  --color-surface-2-border: #E3E3E3;  /* border for surface-2 — same L step as surface→surface-border (−7.1pp) */
  --color-popover-border:  #EDEDED;
  --color-modal-border:    #EDEDED;
  --color-divider:         rgb(0 0 0 / 4%);   /* #000000 · 4% · black 4% */
  --color-emphasis:        rgb(0 0 0 / 4%);   /* #000000 · 4% · black 4% */
  --color-sunken:          rgb(0 0 0 / 4%);   /* #000000 · 4% · black 4% (light) */
  --color-gap:             rgb(0 0 0 / 3%);   /* #000000 · 3% · black 3% → =Background over Surface */
  --color-overlay:         rgb(0 0 0 / 50%);  /* #000000 · 50% · modal/overlay backdrop — black 50% (approved) */
  --color-snackbar:        #3B3B3B;   /* toast/snackbar bg — SAMA di dark (always-dark surface) */
  --color-track:           #E5E5E5;   /* switch track (OFF) — ON pakai brand */

  /* Brand */
  --color-brand:           #00AB6B;
  --color-brand-low:       rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --color-brand-medium:    rgb(0 171 107 / 20%);  /* #00AB6B · 20% */

  /* Semantic — colors (Low 8% / Medium 14% / High 20% in light) */
  --color-red:             #D95C5C;
  --color-red-low:         rgb(217 92 92 / 8%);  /* #D95C5C · 8% */
  --color-red-medium:      rgb(217 92 92 / 14%);  /* #D95C5C · 14% */
  --color-red-high:        rgb(217 92 92 / 20%);  /* #D95C5C · 20% */
  --color-orange:          #F59E0B;
  --color-orange-low:      rgb(245 158 11 / 8%);  /* #F59E0B · 8% */
  --color-orange-medium:   rgb(245 158 11 / 14%);  /* #F59E0B · 14% */
  --color-orange-high:     rgb(245 158 11 / 20%);  /* #F59E0B · 20% */
  --color-green:           #00AB6B;
  --color-green-low:       rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --color-green-medium:    rgb(0 171 107 / 14%);  /* #00AB6B · 14% */
  --color-green-high:      rgb(0 171 107 / 20%);  /* #00AB6B · 20% */
  --color-blue:            #007FFF;
  --color-blue-low:        rgb(0 127 255 / 8%);  /* #007FFF · 8% */
  --color-blue-medium:     rgb(0 127 255 / 14%);  /* #007FFF · 14% */
  --color-blue-high:       rgb(0 127 255 / 20%);  /* #007FFF · 20% */
  --color-purple:          #6A5ACD;
  --color-purple-low:      rgb(106 90 205 / 8%);  /* #6A5ACD · 8% */
  --color-purple-medium:   rgb(106 90 205 / 14%);  /* #6A5ACD · 14% */
  --color-purple-high:     rgb(106 90 205 / 20%);  /* #6A5ACD · 20% */
  --color-white:           #FFFFFF;   /* putih — foreground di atas fill accent: teks/icon/shape (Figma: Semantic/White) */

  /* Text */
  --color-text-primary:    #333333;
  --color-text-secondary:  #6A6A6A;
  --color-text-tertiary:   #949494;
  --color-text-icon:       #808080;   /* icon standalone/netral — SAMA light & dark (mid-gray ~4:1 di kedua tema) */

  /* State — Disabled (fill kontrol saat disabled; teks disabled pakai text-tertiary) */
  --color-disabled:        rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --color-disabled-buy:    #ADDEC4; /* disabled Primary (buy) fill — ref Fidusia inactive-button-positive */
  --color-disabled-sell:   #FAC9C8; /* disabled Primary Red (sell) fill — ref Fidusia inactive-button-negative */
}

/* =====================================================================
   Canonical color tokens — mirror penuh unibit.html / Figma "Unibit -DS-"
   Color collection (42 token, 4 mode). Nama pendek.
   --color-* lama di atas tetap dipertahankan buat page lama (dark/light).
   ===================================================================== */

:root,
[data-theme="dark"] {
  /* Unibit Dark (default) */
  /* Text */
  --primary: #CBCBCB;
  --secondary: #8C8C8C;
  --tertiary: #6B6B6B;
  --disabled: rgb(255 255 255 / 20%);  /* #FFFFFF · 20% */
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --brand-low: rgb(0 171 107 / 12%);  /* #00AB6B · 12% */
  --brand-medium: rgb(0 171 107 / 21%);  /* #00AB6B · 21% */
  --brand-high: rgb(0 171 107 / 30%);  /* #00AB6B · 30% */
  /* Semantic */
  --positive: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --negative: #E5484D;
  --caution: #DE7B1B;  /* = --orange (colors.css), di Figma alias Primitive */
  --info: #1EA0CE;  /* = --cyan (colors.css), di Figma alias Primitive */
  --special: #8F86F9;  /* = --periwinkle (colors.css), di Figma alias Primitive */
  /* Base */
  --artboard: #121212;
  --surface: #1F1F1F;
  --surface-border: #303030;
  --emphasis: rgb(255 255 255 / 6%);  /* #FFFFFF · 6% */
  --emphasis-low: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  --divider: rgb(255 255 255 / 5%);  /* #FFFFFF · 5% */
  --gap: #121212;
  --sunken: rgb(0 0 0 / 20%);  /* #000000 · 20% */
  --modal: #292929;
  --modal-border: #3B3B3B;
  --overlay: rgb(0 0 0 / 60%);  /* #000000 · 60% */
  --surface-overlay: rgb(18 18 18 / 80%);  /* #121212 · 80% */
  --snackbar: #3B3B3B;
  --popover: #242424;
  --popover-border: #363636;
  --skeleton: #2A2A2A;
  --track: #3A3A3A;
  /* State */
  --inactive-button-positive: #616161;
  --inactive-button-negative: #616161;
  --inactive: #616161;  /* garis kontrol belum aktif + ikon inactive (DS 3.0 Semantic Inactive) */
  --surface-disabled: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  --surface-hover: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  /* Tint */
  --surface-positive: rgb(0 171 107 / 12%);  /* #00AB6B · 12% */
  --surface-negative: rgb(229 72 77 / 12%);  /* #E5484D · 12% */
  --surface-caution: rgb(222 123 27 / 12%);  /* #DE7B1B · 12% */
  --surface-info: rgb(30 160 206 / 12%);  /* #1EA0CE · 12% */
  --surface-special: rgb(143 134 249 / 12%);  /* #8F86F9 · 12% */
}

[data-theme="sda"] {
  /* SDA — titik awal Unibit Dark, belum ada token yang menyimpang */
  /* Text */
  --primary: #CBCBCB;
  --secondary: #8C8C8C;
  --tertiary: #6B6B6B;
  --disabled: rgb(255 255 255 / 20%);  /* #FFFFFF · 20% */
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --brand-low: rgb(0 171 107 / 12%);  /* #00AB6B · 12% */
  --brand-medium: rgb(0 171 107 / 21%);  /* #00AB6B · 21% */
  --brand-high: rgb(0 171 107 / 30%);  /* #00AB6B · 30% */
  /* Semantic */
  --positive: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --negative: #E5484D;
  --caution: #DE7B1B;  /* = --orange (colors.css), di Figma alias Primitive */
  --info: #1EA0CE;  /* = --cyan (colors.css), di Figma alias Primitive */
  --special: #8F86F9;  /* = --periwinkle (colors.css), di Figma alias Primitive */
  /* Base */
  --artboard: #121212;
  --surface: #1F1F1F;
  --surface-border: #303030;
  --emphasis: rgb(255 255 255 / 6%);  /* #FFFFFF · 6% */
  --emphasis-low: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  --divider: rgb(255 255 255 / 5%);  /* #FFFFFF · 5% */
  --gap: #121212;
  --sunken: rgb(0 0 0 / 20%);  /* #000000 · 20% */
  --modal: #292929;
  --modal-border: #3B3B3B;
  --overlay: rgb(0 0 0 / 60%);  /* #000000 · 60% */
  --surface-overlay: rgb(18 18 18 / 80%);  /* #121212 · 80% */
  --snackbar: #3B3B3B;
  --popover: #242424;
  --popover-border: #363636;
  --skeleton: #2A2A2A;
  --track: #3A3A3A;
  /* State */
  --inactive-button-positive: #616161;
  --inactive-button-negative: #616161;
  --inactive: #616161;  /* garis kontrol belum aktif + ikon inactive (DS 3.0 Semantic Inactive) */
  --surface-disabled: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  --surface-hover: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  /* Tint */
  --surface-positive: rgb(0 171 107 / 12%);  /* #00AB6B · 12% */
  --surface-negative: rgb(229 72 77 / 12%);  /* #E5484D · 12% */
  --surface-caution: rgb(222 123 27 / 12%);  /* #DE7B1B · 12% */
  --surface-info: rgb(30 160 206 / 12%);  /* #1EA0CE · 12% */
  --surface-special: rgb(143 134 249 / 12%);  /* #8F86F9 · 12% */
}

[data-theme="light"] {
  /* Unibit Light */
  /* Text */
  --primary: #333333;
  --secondary: #6A6A6A;
  --tertiary: #949494;
  --disabled: rgb(0 0 0 / 18%);  /* #000000 · 18% */
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --brand-low: rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --brand-medium: rgb(0 171 107 / 14%);  /* #00AB6B · 14% */
  --brand-high: rgb(0 171 107 / 20%);  /* #00AB6B · 20% */
  /* Semantic */
  --positive: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --negative: #E5484D;
  --caution: #DE7B1B;  /* = --orange (colors.css), di Figma alias Primitive */
  --info: #1EA0CE;  /* = --cyan (colors.css), di Figma alias Primitive */
  --special: #8F86F9;  /* = --periwinkle (colors.css), di Figma alias Primitive */
  /* Base */
  --artboard: #F7F7F7;
  --surface: #FFFFFF;
  --surface-border: #EDEDED;
  --emphasis: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --emphasis-low: rgb(0 0 0 / 2%);  /* #000000 · 2% */
  --divider: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --gap: #F7F7F7;
  --sunken: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --modal: #FFFFFF;
  --modal-border: #EDEDED;
  --overlay: rgb(0 0 0 / 40%);  /* #000000 · 40% */
  --surface-overlay: rgb(255 255 255 / 80%);  /* #FFFFFF · 80% */
  --snackbar: #3B3B3B;
  --popover: #FFFFFF;
  --popover-border: #EDEDED;
  --skeleton: #EBEBEB;
  --track: #E5E5E5;
  /* State */
  --inactive-button-positive: #ADDEC4;
  --inactive-button-negative: #FAC9C8;
  --inactive: #CBCBCB;  /* garis kontrol belum aktif + ikon inactive (DS 3.0 Semantic Inactive) */
  --surface-disabled: rgb(0 0 0 / 3%);  /* #000000 · 3% */
  --surface-hover: rgb(0 0 0 / 3%);  /* #000000 · 3% */
  /* Tint */
  --surface-positive: rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --surface-negative: rgb(229 72 77 / 8%);  /* #E5484D · 8% */
  --surface-caution: rgb(222 123 27 / 8%);  /* #DE7B1B · 8% */
  --surface-info: rgb(30 160 206 / 8%);  /* #1EA0CE · 8% */
  --surface-special: rgb(143 134 249 / 8%);  /* #8F86F9 · 8% */
}

[data-theme="stockbit-dark"] {
  /* Stockbit Dark */
  /* Text */
  --primary: #CBCBCB;
  --secondary: #858585;
  --tertiary: #6B6B6B;
  --disabled: rgb(255 255 255 / 20%);  /* #FFFFFF · 20% */
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #0BA16B;
  --brand-low: rgb(11 161 107 / 12%);  /* #0BA16B · 12% */
  --brand-medium: rgb(11 161 107 / 21%);  /* #0BA16B · 21% */
  --brand-high: rgb(11 161 107 / 30%);  /* #0BA16B · 30% */
  /* Semantic */
  --positive: #0BA16B;
  --negative: #D74342;
  --caution: #DE7B1B;  /* = --orange (colors.css), di Figma alias Primitive */
  --info: #1EA0CE;  /* = --cyan (colors.css), di Figma alias Primitive */
  --special: #8F86F9;  /* = --periwinkle (colors.css), di Figma alias Primitive */
  /* Base */
  --artboard: #121212;
  --surface: #121212;
  --surface-border: #2E2E2E;
  --emphasis: rgb(255 255 255 / 10%);  /* #FFFFFF · 10% */
  --emphasis-low: rgb(255 255 255 / 8%);  /* #FFFFFF · 8% */
  --divider: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  --gap: #171717;
  --sunken: rgb(0 0 0 / 28%);  /* #000000 · 28% */
  --modal: #2A2A2A;
  --modal-border: #414141;
  --overlay: rgb(0 0 0 / 60%);  /* #000000 · 60% */
  --surface-overlay: rgb(18 18 18 / 80%);  /* #121212 · 80% */
  --snackbar: #454545;
  --popover: #242424;
  --popover-border: #3B3B3B;
  --skeleton: #1F1F1F;
  --track: #616161;
  /* State */
  --inactive-button-positive: #616161;
  --inactive-button-negative: #616161;
  --inactive: #616161;  /* garis kontrol belum aktif + ikon inactive (DS 3.0 Semantic Inactive) */
  --surface-disabled: rgb(255 255 255 / 10%);  /* #FFFFFF · 10% */
  --surface-hover: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  /* Tint */
  --surface-positive: rgb(11 161 107 / 12%);  /* #0BA16B · 12% */
  --surface-negative: rgb(215 67 66 / 12%);  /* #D74342 · 12% */
  --surface-caution: rgb(222 123 27 / 12%);  /* #DE7B1B · 12% */
  --surface-info: rgb(30 160 206 / 12%);  /* #1EA0CE · 12% */
  --surface-special: rgb(143 134 249 / 12%);  /* #8F86F9 · 12% */
}

[data-theme="bibit-light"] {
  /* Bibit Light */
  /* Text */
  --primary: #333333;
  --secondary: #858585;
  --tertiary: #9E9E9E;
  --disabled: rgb(0 0 0 / 18%);  /* #000000 · 18% */
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --brand-low: rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --brand-medium: rgb(0 171 107 / 14%);  /* #00AB6B · 14% */
  --brand-high: rgb(0 171 107 / 20%);  /* #00AB6B · 20% */
  /* Semantic */
  --positive: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --negative: #EE4A49;  /* = --red (colors.css), di Figma alias Primitive */
  --caution: #DE7B1B;  /* = --orange (colors.css), di Figma alias Primitive */
  --info: #1EA0CE;  /* = --cyan (colors.css), di Figma alias Primitive */
  --special: #8F86F9;  /* = --periwinkle (colors.css), di Figma alias Primitive */
  /* Base */
  --artboard: #F7F7F7;
  --surface: #FFFFFF;
  --surface-border: #EDEDED;
  --emphasis: rgb(0 0 0 / 3%);  /* #000000 · 3% */
  --emphasis-low: rgb(0 0 0 / 2%);  /* #000000 · 2% */
  --divider: rgb(0 0 0 / 5%);  /* #000000 · 5% */
  --gap: #F7F7F7;
  --sunken: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --modal: #FFFFFF;
  --modal-border: #EDEDED;
  --overlay: rgb(0 0 0 / 50%);  /* #000000 · 50% */
  --surface-overlay: rgb(255 255 255 / 80%);  /* #FFFFFF · 80% */
  --snackbar: #3B3B3B;
  --popover: #FFFFFF;
  --popover-border: #EDEDED;
  --skeleton: #EDEDED;
  --track: #CBCBCB;
  /* State */
  --inactive-button-positive: #ADDEC4;
  --inactive-button-negative: #FAC9C8;
  --inactive: #CBCBCB;  /* garis kontrol belum aktif + ikon inactive (DS 3.0 Semantic Inactive) */
  --surface-disabled: rgb(0 0 0 / 5%);  /* #000000 · 5% */
  --surface-hover: rgb(0 0 0 / 3%);  /* #000000 · 3% */
  /* Tint */
  --surface-positive: rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --surface-negative: rgb(238 74 73 / 8%);  /* #EE4A49 · 8% */
  --surface-caution: rgb(222 123 27 / 8%);  /* #DE7B1B · 8% */
  --surface-info: rgb(30 160 206 / 8%);  /* #1EA0CE · 8% */
  --surface-special: rgb(143 134 249 / 8%);  /* #8F86F9 · 8% */
}

[data-theme="bibit-dark"] {
  /* Bibit Dark — baseline Unibit Dark + editan 2026-08-27 */
  /* Text */
  --primary: #CBCBCB;
  --secondary: #858585;
  --tertiary: #636363;
  --disabled: rgb(255 255 255 / 20%);  /* #FFFFFF · 20% */
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --brand-low: rgb(0 171 107 / 12%);  /* #00AB6B · 12% */
  --brand-medium: rgb(0 171 107 / 21%);  /* #00AB6B · 21% */
  --brand-high: rgb(0 171 107 / 30%);  /* #00AB6B · 30% */
  /* Semantic */
  --positive: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --negative: #EE4A49;  /* = --red (colors.css), di Figma alias Primitive */
  --caution: #DE7B1B;  /* = --orange (colors.css), di Figma alias Primitive */
  --info: #1EA0CE;  /* = --cyan (colors.css), di Figma alias Primitive */
  --special: #8F86F9;  /* = --periwinkle (colors.css), di Figma alias Primitive */
  /* Base */
  --artboard: #0D0D0D;
  --surface: #121212;
  --surface-border: #212121;
  --emphasis: rgb(255 255 255 / 6%);  /* #FFFFFF · 6% */
  --emphasis-low: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  --divider: rgb(255 255 255 / 5%);  /* #FFFFFF · 5% */
  --gap: #0D0D0D;
  --sunken: rgb(0 0 0 / 20%);  /* #000000 · 20% */
  --modal: #242424;
  --modal-border: #303030;
  --overlay: rgb(0 0 0 / 60%);  /* #000000 · 60% */
  --surface-overlay: rgb(18 18 18 / 80%);  /* #121212 · 80% */
  --snackbar: #3B3B3B;
  --popover: #242424;
  --popover-border: #303030;
  --skeleton: #2A2A2A;
  --track: #4D4D4D;
  /* State */
  --inactive-button-positive: #616161;
  --inactive-button-negative: #616161;
  --inactive: #616161;  /* garis kontrol belum aktif + ikon inactive (DS 3.0 Semantic Inactive) */
  --surface-disabled: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  --surface-hover: rgb(255 255 255 / 3%);  /* #FFFFFF · 3% */
  /* Tint */
  --surface-positive: rgb(0 171 107 / 12%);  /* #00AB6B · 12% */
  --surface-negative: rgb(238 74 73 / 12%);  /* #EE4A49 · 12% */
  --surface-caution: rgb(222 123 27 / 12%);  /* #DE7B1B · 12% */
  --surface-info: rgb(30 160 206 / 12%);  /* #1EA0CE · 12% */
  --surface-special: rgb(143 134 249 / 12%);  /* #8F86F9 · 12% */
}

[data-theme="stockbit-web"] {
  /* Stockbit Web — baseline Unibit Light + editan 2026-08-27 */
  /* Text */
  --primary: #333333;
  --secondary: #858585;
  --tertiary: #B5B5B5;
  --disabled: rgb(0 0 0 / 18%);  /* #000000 · 18% */
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --brand-low: rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --brand-medium: rgb(0 171 107 / 14%);  /* #00AB6B · 14% */
  --brand-high: rgb(0 171 107 / 20%);  /* #00AB6B · 20% */
  /* Semantic */
  --positive: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --negative: #EE4A49;  /* = --red (colors.css), di Figma alias Primitive */
  --caution: #DE7B1B;  /* = --orange (colors.css), di Figma alias Primitive */
  --info: #1EA0CE;  /* = --cyan (colors.css), di Figma alias Primitive */
  --special: #8F86F9;  /* = --periwinkle (colors.css), di Figma alias Primitive */
  /* Base */
  --artboard: #F5F5F5;
  --surface: #FFFFFF;
  --surface-border: #E6E6E6;
  --emphasis: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --emphasis-low: rgb(0 0 0 / 2%);  /* #000000 · 2% */
  --divider: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --gap: #F5F5F5;
  --sunken: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --modal: #FFFFFF;
  --modal-border: #E6E6E6;
  --overlay: rgb(0 0 0 / 40%);  /* #000000 · 40% */
  --surface-overlay: rgb(255 255 255 / 80%);  /* #FFFFFF · 80% */
  --snackbar: #3B3B3B;
  --popover: #FFFFFF;
  --popover-border: #E6E6E6;
  --skeleton: #EBEBEB;
  --track: #E5E5E5;
  /* State */
  --inactive-button-positive: #ADDEC4;
  --inactive-button-negative: #FAC9C8;
  --inactive: #CBCBCB;  /* garis kontrol belum aktif + ikon inactive (DS 3.0 Semantic Inactive) */
  --surface-disabled: rgb(0 0 0 / 3%);  /* #000000 · 3% */
  --surface-hover: rgb(0 0 0 / 3%);  /* #000000 · 3% */
  /* Tint */
  --surface-positive: rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --surface-negative: rgb(238 74 73 / 8%);  /* #EE4A49 · 8% */
  --surface-caution: rgb(222 123 27 / 8%);  /* #DE7B1B · 8% */
  --surface-info: rgb(30 160 206 / 8%);  /* #1EA0CE · 8% */
  --surface-special: rgb(143 134 249 / 8%);  /* #8F86F9 · 8% */
}

[data-theme="stockbit-light"] {
  /* Stockbit Light — baseline Unibit Light + 5 override (2026-08-31).
     Ditulis penuh (bukan delta) supaya audit membaca 42 token utuh. */
  /* Text */
  --primary: #333333;
  --secondary: #858585;
  --tertiary: #B5B5B5;
  --disabled: rgb(0 0 0 / 18%);  /* #000000 · 18% */
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --brand-low: rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --brand-medium: rgb(0 171 107 / 14%);  /* #00AB6B · 14% */
  --brand-high: rgb(0 171 107 / 20%);  /* #00AB6B · 20% */
  /* Semantic */
  --positive: #00AB6B;  /* = --green (colors.css), di Figma alias Primitive */
  --negative: #EE4A49;  /* = --red (colors.css), di Figma alias Primitive */
  --caution: #DE7B1B;  /* = --orange (colors.css), di Figma alias Primitive */
  --info: #1EA0CE;  /* = --cyan (colors.css), di Figma alias Primitive */
  --special: #8F86F9;  /* = --periwinkle (colors.css), di Figma alias Primitive */
  /* Base */
  --artboard: #F7F7F7;
  --surface: #FFFFFF;
  --surface-border: #EDEDED;
  --emphasis: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --emphasis-low: rgb(0 0 0 / 2%);  /* #000000 · 2% */
  --divider: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --gap: #F7F7F7;
  --sunken: rgb(0 0 0 / 4%);  /* #000000 · 4% */
  --modal: #FFFFFF;
  --modal-border: #EDEDED;
  --overlay: rgb(0 0 0 / 40%);  /* #000000 · 40% */
  --surface-overlay: rgb(255 255 255 / 80%);  /* #FFFFFF · 80% */
  --snackbar: #454545;
  --popover: #FFFFFF;
  --popover-border: #EDEDED;
  --skeleton: #EBEBEB;
  --track: #E5E5E5;
  /* State */
  --inactive-button-positive: #ADDEC4;
  --inactive-button-negative: #FAC9C8;
  --inactive: #CBCBCB;  /* garis kontrol belum aktif + ikon inactive (DS 3.0 Semantic Inactive) */
  --surface-disabled: rgb(0 0 0 / 3%);  /* #000000 · 3% */
  --surface-hover: rgb(0 0 0 / 3%);  /* #000000 · 3% */
  /* Tint */
  --surface-positive: rgb(0 171 107 / 8%);  /* #00AB6B · 8% */
  --surface-negative: rgb(238 74 73 / 8%);  /* #EE4A49 · 8% */
  --surface-caution: rgb(222 123 27 / 8%);  /* #DE7B1B · 8% */
  --surface-info: rgb(30 160 206 / 8%);  /* #1EA0CE · 8% */
  --surface-special: rgb(143 134 249 / 8%);  /* #8F86F9 · 8% */
}

/* =====================================================================
   Shadows — pindahan dari shadows.css (file itu dihapus).
   Di Figma ini EFFECT STYLE, bukan variable — Figma variable cuma bisa
   nyimpen warna solid. Dicatat sebagai pengecualian, sama kayak
   gradasi di tokens-etf.css.

   Tangga elevasi:
     shadow-1  subtle raise / sticky column
     shadow-2  modal · bottom sheet · sticky header (separasi saat ke-scroll)
     shadow-3  popover · dropdown · menu · tooltip
     shadow-4  strong overlay (reserved)
     shadow-5  highest overlay (spotlight / dragged item)
   Cue horizontal (di luar tangga 1–5):
     shadow-sticky-x    frozen column bikin bayangan ke kanan pas scroll
     shadow-scroll-edge inset fade, tanda masih ada konten di kanan

   Mode: bayangan cuma punya DUA nilai (gelap/terang), bukan empat —
   Stockbit Dark ikut Dark, Bibit Light ikut Light. Kalau nanti ada
   platform yang butuh tangga sendiri, kasih blok terpisah.
   ===================================================================== */

:root,
[data-theme="dark"],
[data-theme="sda"],
[data-theme="stockbit-dark"],
[data-theme="bibit-dark"] {
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.45);
  --shadow-3: 0 2px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.55);
  --shadow-4: 0 4px 8px rgba(0,0,0,0.40), 0 16px 40px rgba(0,0,0,0.65);
  --shadow-5: 0 8px 16px rgba(0,0,0,0.45), 0 24px 60px rgba(0,0,0,0.75);
  --shadow-sticky-x:    6px 0 10px -6px rgba(0,0,0,0.55);
  --shadow-scroll-edge: inset -6px 0 8px -6px rgba(0,0,0,0.32);   /* ditipiskan 2026-09-02 */
}

[data-theme="light"],
[data-theme="bibit-light"],
[data-theme="stockbit-light"],
[data-theme="stockbit-web"] {
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 1px 2px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-3: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.12);
  --shadow-4: 0 4px 8px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.16);
  --shadow-5: 0 8px 16px rgba(0,0,0,0.10), 0 24px 60px rgba(0,0,0,0.22);
  --shadow-sticky-x:    8px 0 16px -6px rgba(0,0,0,0.18);
  --shadow-scroll-edge: inset -6px 0 8px -6px rgba(0,0,0,0.07);   /* ditipiskan 2026-09-02 */
}