/* unibit Tokens — mirror of Figma "Color" collection
   4 mode = 4 platform, nama variabel SAMA, hex boleh beda per platform:
     Unibit Dark   = :root / [data-theme="dark"]  (default)
     Unibit Light  = [data-theme="light"]
     Stockbit Dark = [data-theme="stockbit-dark"]  (delta di atas base Dark)
     Bibit Light   = [data-theme="bibit-light"]    (ikut base Light + delta)
   Alpha colors use rgb(R G B / N%) so CSS matches Figma opacity exactly.
   Source: Figma "Unibit -DS-" (brKosDbcylhJNEmvXyT3Zo), collection Color (4 mode). */

: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%);  /* white 5% */
  --color-emphasis:        rgb(255 255 255 / 6%);  /* white 6% */
  --color-sunken:          rgb(0 0 0 / 20%);       /* black 20% */
  --color-gap:             rgb(0 0 0 / 42%);       /* black 42% → =Background over Surface */
  --color-overlay:         rgb(0 0 0 / 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%);
  --color-brand-medium:    rgb(0 171 107 / 30%);

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

  /* Gold — SUMBER: Bibit DS 2.0 Library → collection "Themes", grup gold-*.
     Empat nilai di bawah cuma MIRROR dari Figma. Jangan diedit langsung di sini:
     ubah di Figma dulu, baru disalin ke bawah. */
  --bibit-gold-default:    #BF9B30;
  --bibit-gold-low:        #292414;   /* dark */
  --bibit-gold-medium:     #312A17;
  --bibit-gold-high:       #3B331C;

  /* Token kita = ALIAS ke token Bibit, bukan salinan nilainya. Kalau Bibit
     ganti nada emasnya, cukup update blok --bibit-gold-* di atas. */
  --color-gold:            var(--bibit-gold-default);
  --color-gold-low:        var(--bibit-gold-low);
  --color-gold-medium:     var(--bibit-gold-medium);
  --color-gold-high:       var(--bibit-gold-high);

  /* Yellow — sumber Bibit DS 2.0 → Themes/yellow-default. Dipakai buat bintang
     watchlist aktif; gold kebaca kecokelatan di ukuran ikon. */
  --bibit-yellow-default:  #D5B158;   /* dark */
  --color-yellow:          var(--bibit-yellow-default);

  /* 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%);
  --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 */

  /* ⚠️ GRADASI — BUKAN Figma variable.
     Figma variable cuma bisa nyimpen warna SOLID, jadi dua nilai di bawah ini
     harus dibikin sebagai FILL / PAINT STYLE terpisah di Figma, bukan variable.
     Nama style di Figma: "Gold/Hero" dan "Brand/Gold".
     Ini pengecualian yang disengaja & dicatat — satu-satunya di kontrak tokens.css ↔ Figma. */
  /* --hero-gold: tone gold aktif (RGB triplet). Default Metallic #D4AF37;
     bisa di-override live per halaman (selektor gold → style.setProperty). */
  --hero-gold: 212 175 55;
  --gradient-gold-hero:  linear-gradient(180deg,
                           rgb(var(--hero-gold) / 26%) 0%,
                           rgb(var(--hero-gold) / 10%) 52%,
                           rgb(var(--hero-gold) / 0%) 100%);
  /* Fill tombol aksi produk emas — brand hijau ke emas. Figma style: "Brand/Gold".
     (Versi dua-lapis dengan sorot radial sempat dicoba, dibalikin ke sini.) */
  --gradient-brand-gold: linear-gradient(90deg,
                           var(--color-brand) 0%, var(--color-gold) 100%);

  /* -- 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 */

  /* ⚠️ ALIAS SEMENTARA — radius kartu dinaikkan ke 8, TAPI token DS --radius-card
     sengaja TIDAK diubah karena masih perlu dibenerin di Figma dulu.
     Halaman ETF pakai alias ini; begitu token aslinya beres, arahkan balik
     ke var(--radius-card) dan alias ini bisa dihapus. */
  --radius-card-etf: 8px;
  --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%);   /* black 4% */
  --color-emphasis:        rgb(0 0 0 / 4%);   /* black 4% */
  --color-sunken:          rgb(0 0 0 / 20%);  /* black 20% */
  --color-gap:             rgb(0 0 0 / 3%);   /* black 3% → =Background over Surface */
  --color-overlay:         rgb(0 0 0 / 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%);
  --color-brand-medium:    rgb(0 171 107 / 20%);

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

  /* Gold — cuma nilai SUMBER Bibit yang di-override per mode.
     Baris --color-gold-* nggak perlu diulang: alias-nya diwarisi dari :root. */
  --bibit-gold-default:    #BF9B30;
  --bibit-gold-low:        #FAF3E1;
  --bibit-gold-medium:     #F6EED5;
  --bibit-gold-high:       #F0E3BD;
  --bibit-yellow-default:  #FFC330;

  /* 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%);
  --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;
  --text-disabled: rgb(255 255 255 / 25%);
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;
  --brand-low: rgb(0 171 107 / 12%);
  --brand-med: rgb(0 171 107 / 30%);
  /* Semantic */
  --positive: #00AB6B;
  --negative: #E5484D;
  --caution: #F5A524;
  --info: #2563EB;
  --special: #7C3AED;
  /* Base */
  --artboard: #121212;
  --surface: #1F1F1F;
  --surface-border: #303030;
  --emphasis: rgb(255 255 255 / 6%);
  --emphasis-low: rgb(255 255 255 / 3%);
  --divider: rgb(255 255 255 / 5%);
  --gap: #121212;
  --sunken: rgb(0 0 0 / 20%);
  --modal: #292929;
  --modal-border: #3B3B3B;
  --overlay: rgb(0 0 0 / 60%);
  --surface-overlay: rgb(18 18 18 / 80%);
  --snackbar: #3B3B3B;
  --popover: #242424;
  --popover-border: #363636;
  --skeleton: #2A2A2A;
  --track: #3A3A3A;
  /* State */
  --btn-off-pos: #616161;
  --btn-off-neg: #616161;
  --surface-disabled: rgb(255 255 255 / 3%);
  --surface-hover: rgb(255 255 255 / 3%);
  /* Tint */
  --tint-positive: rgb(0 171 107 / 12%);
  --tint-negative: rgb(229 72 77 / 12%);
  --tint-caution: rgb(245 165 36 / 12%);
  --tint-info: rgb(37 99 235 / 12%);
  --tint-special: rgb(124 58 237 / 12%);
}

[data-theme="light"] {
  /* Unibit Light */
  /* Text */
  --primary: #333333;
  --secondary: #6A6A6A;
  --tertiary: #949494;
  --text-disabled: rgb(0 0 0 / 25%);
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;
  --brand-low: rgb(0 171 107 / 8%);
  --brand-med: rgb(0 171 107 / 20%);
  /* Semantic */
  --positive: #00AB6B;
  --negative: #E5484D;
  --caution: #F5A524;
  --info: #2563EB;
  --special: #7C3AED;
  /* Base */
  --artboard: #F7F7F7;
  --surface: #FFFFFF;
  --surface-border: #EDEDED;
  --emphasis: rgb(0 0 0 / 4%);
  --emphasis-low: rgb(0 0 0 / 2%);
  --divider: rgb(0 0 0 / 4%);
  --gap: #F7F7F7;
  --sunken: rgb(0 0 0 / 20%);
  --modal: #FFFFFF;
  --modal-border: #EDEDED;
  --overlay: rgb(0 0 0 / 40%);
  --surface-overlay: rgb(255 255 255 / 80%);
  --snackbar: #3B3B3B;
  --popover: #FFFFFF;
  --popover-border: #EDEDED;
  --skeleton: #EBEBEB;
  --track: #E5E5E5;
  /* State */
  --btn-off-pos: #ADDEC4;
  --btn-off-neg: #FAC9C8;
  --surface-disabled: rgb(0 0 0 / 3%);
  --surface-hover: rgb(0 0 0 / 3%);
  /* Tint */
  --tint-positive: rgb(0 171 107 / 8%);
  --tint-negative: rgb(229 72 77 / 8%);
  --tint-caution: rgb(245 165 36 / 8%);
  --tint-info: rgb(37 99 235 / 8%);
  --tint-special: rgb(124 58 237 / 8%);
}

[data-theme="stockbit-dark"] {
  /* Stockbit Dark */
  /* Text */
  --primary: #CBCBCB;
  --secondary: #858585;
  --tertiary: #787878;
  --text-disabled: rgb(255 255 255 / 25%);
  --icon: #969696;
  --white: #FFFFFF;
  /* Brand */
  --brand: #0BA16B;
  --brand-low: rgb(11 161 107 / 12%);
  --brand-med: rgb(11 161 107 / 30%);
  /* Semantic */
  --positive: #0BA16B;
  --negative: #D74342;
  --caution: #F5A524;
  --info: #2563EB;
  --special: #7C3AED;
  /* Base */
  --artboard: #121212;
  --surface: #121212;
  --surface-border: #2E2E2E;
  --emphasis: rgb(255 255 255 / 10%);
  --emphasis-low: rgb(255 255 255 / 8%);
  --divider: rgb(255 255 255 / 3%);
  --gap: #171717;
  --sunken: rgb(0 0 0 / 28%);
  --modal: #2A2A2A;
  --modal-border: #414141;
  --overlay: rgb(0 0 0 / 60%);
  --surface-overlay: rgb(18 18 18 / 80%);
  --snackbar: #454545;
  --popover: #242424;
  --popover-border: #3B3B3B;
  --skeleton: #1F1F1F;
  --track: #616161;
  /* State */
  --btn-off-pos: #616161;
  --btn-off-neg: #616161;
  --surface-disabled: rgb(255 255 255 / 10%);
  --surface-hover: rgb(255 255 255 / 3%);
  /* Tint */
  --tint-positive: rgb(11 161 107 / 12%);
  --tint-negative: rgb(215 67 66 / 12%);
  --tint-caution: rgb(245 165 36 / 12%);
  --tint-info: rgb(37 99 235 / 12%);
  --tint-special: rgb(124 58 237 / 12%);
}

[data-theme="bibit-light"] {
  /* Bibit Light */
  /* Text */
  --primary: #333333;
  --secondary: #858585;
  --tertiary: #9E9E9E;
  --text-disabled: rgb(0 0 0 / 18%);
  --icon: #808080;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;
  --brand-low: rgb(0 171 107 / 8%);
  --brand-med: rgb(0 171 107 / 20%);
  /* Semantic */
  --positive: #00AB6B;
  --negative: #EE4A49;
  --caution: #F5A524;
  --info: #2563EB;
  --special: #7C3AED;
  /* Base */
  --artboard: #F7F7F7;
  --surface: #FFFFFF;
  --surface-border: #EDEDED;
  --emphasis: rgb(0 0 0 / 3%);
  --emphasis-low: rgb(0 0 0 / 2%);
  --divider: rgb(0 0 0 / 5%);
  --gap: #F7F7F7;
  --sunken: #FFFFFF;
  --modal: #FFFFFF;
  --modal-border: #EDEDED;
  --overlay: rgb(0 0 0 / 50%);
  --surface-overlay: rgb(255 255 255 / 80%);
  --snackbar: #3B3B3B;
  --popover: #FFFFFF;
  --popover-border: #EDEDED;
  --skeleton: #F5F5F5;
  --track: #CBCBCB;
  /* State */
  --btn-off-pos: #ADDEC4;
  --btn-off-neg: #FAC9C8;
  --surface-disabled: rgb(0 0 0 / 5%);
  --surface-hover: rgb(0 0 0 / 3%);
  /* Tint */
  --tint-positive: rgb(0 171 107 / 8%);
  --tint-negative: rgb(238 74 73 / 8%);
  --tint-caution: rgb(245 165 36 / 8%);
  --tint-info: rgb(37 99 235 / 8%);
  --tint-special: rgb(124 58 237 / 8%);
}

[data-theme="bibit-dark"] {
  /* Bibit Dark — baseline Unibit Dark + editan 2026-08-27 */
  /* Text */
  --primary: #CBCBCB;
  --secondary: #858585;
  --tertiary: #636363;
  --text-disabled: rgb(255 255 255 / 25%);
  --icon: #858585;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;
  --brand-low: rgb(0 171 107 / 12%);
  --brand-med: rgb(0 171 107 / 30%);
  /* Semantic */
  --positive: #00AB6B;
  --negative: #EE4A49;
  --caution: #F5A524;
  --info: #2563EB;
  --special: #7C3AED;
  /* Base */
  --artboard: #0D0D0D;
  --surface: #121212;
  --surface-border: #212121;
  --emphasis: rgb(255 255 255 / 6%);
  --emphasis-low: rgb(255 255 255 / 3%);
  --divider: rgb(255 255 255 / 5%);
  --gap: #0D0D0D;
  --sunken: rgb(0 0 0 / 20%);
  --modal: #242424;
  --modal-border: #303030;
  --overlay: rgb(0 0 0 / 60%);
  --surface-overlay: rgb(18 18 18 / 80%);
  --snackbar: #3B3B3B;
  --popover: #242424;
  --popover-border: #303030;
  --skeleton: #2A2A2A;
  --track: #3A3A3A;
  /* State */
  --btn-off-pos: #616161;
  --btn-off-neg: #616161;
  --surface-disabled: rgb(255 255 255 / 3%);
  --surface-hover: rgb(255 255 255 / 3%);
  /* Tint */
  --tint-positive: rgb(0 171 107 / 12%);
  --tint-negative: rgb(238 74 73 / 12%);
  --tint-caution: rgb(245 165 36 / 12%);
  --tint-info: rgb(37 99 235 / 12%);
  --tint-special: rgb(124 58 237 / 12%);
}

[data-theme="stockbit-web"] {
  /* Stockbit Web — baseline Unibit Light + editan 2026-08-27 */
  /* Text */
  --primary: #333333;
  --secondary: #858585;
  --tertiary: #B5B5B5;
  --text-disabled: rgb(0 0 0 / 25%);
  --icon: #969696;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;
  --brand-low: rgb(0 171 107 / 8%);
  --brand-med: rgb(0 171 107 / 20%);
  /* Semantic */
  --positive: #00AB6B;
  --negative: #EE4A49;
  --caution: #F5A524;
  --info: #2563EB;
  --special: #7C3AED;
  /* Base */
  --artboard: #F5F5F5;
  --surface: #FFFFFF;
  --surface-border: #DADADA;
  --emphasis: rgb(0 0 0 / 4%);
  --emphasis-low: rgb(0 0 0 / 2%);
  --divider: rgb(0 0 0 / 4%);
  --gap: #F5F5F5;
  --sunken: rgb(0 0 0 / 20%);
  --modal: #FFFFFF;
  --modal-border: #DADADA;
  --overlay: rgb(0 0 0 / 40%);
  --surface-overlay: rgb(255 255 255 / 80%);
  --snackbar: #3B3B3B;
  --popover: #FFFFFF;
  --popover-border: #DADADA;
  --skeleton: #EBEBEB;
  --track: #E5E5E5;
  /* State */
  --btn-off-pos: #ADDEC4;
  --btn-off-neg: #FAC9C8;
  --surface-disabled: rgb(0 0 0 / 3%);
  --surface-hover: rgb(0 0 0 / 3%);
  /* Tint */
  --tint-positive: rgb(0 171 107 / 8%);
  --tint-negative: rgb(238 74 73 / 8%);
  --tint-caution: rgb(245 165 36 / 8%);
  --tint-info: rgb(37 99 235 / 8%);
  --tint-special: rgb(124 58 237 / 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;
  --text-disabled: rgb(0 0 0 / 25%);
  --icon: #969696;
  --white: #FFFFFF;
  /* Brand */
  --brand: #00AB6B;
  --brand-low: rgb(0 171 107 / 8%);
  --brand-med: rgb(0 171 107 / 20%);
  /* Semantic */
  --positive: #00AB6B;
  --negative: #EE4A49;
  --caution: #F5A524;
  --info: #2563EB;
  --special: #7C3AED;
  /* Base */
  --artboard: #F7F7F7;
  --surface: #FFFFFF;
  --surface-border: #EDEDED;
  --emphasis: rgb(0 0 0 / 4%);
  --emphasis-low: rgb(0 0 0 / 2%);
  --divider: rgb(0 0 0 / 4%);
  --gap: #F7F7F7;
  --sunken: rgb(0 0 0 / 20%);
  --modal: #FFFFFF;
  --modal-border: #EDEDED;
  --overlay: rgb(0 0 0 / 40%);
  --surface-overlay: rgb(255 255 255 / 80%);
  --snackbar: #3B3B3B;
  --popover: #FFFFFF;
  --popover-border: #EDEDED;
  --skeleton: #EBEBEB;
  --track: #E5E5E5;
  /* State */
  --btn-off-pos: #ADDEC4;
  --btn-off-neg: #FAC9C8;
  --surface-disabled: rgb(0 0 0 / 3%);
  --surface-hover: rgb(0 0 0 / 3%);
  /* Tint */
  --tint-positive: rgb(0 171 107 / 8%);
  --tint-negative: rgb(238 74 73 / 8%);
  --tint-caution: rgb(245 165 36 / 8%);
  --tint-info: rgb(37 99 235 / 8%);
  --tint-special: rgb(124 58 237 / 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
   --gradient-gold-hero / --gradient-brand-gold di atas.

   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="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 */
}