/* ==========================================================================
   Invozy Design Tokens  —  shared/tokens.css
   Dipakai bersama oleh: app, web, admin, template-store, dan halaman baru.
   Prefix: --iv-   (satu-satunya prefix; class komponen nanti .iv-*)
   Mobile-first: nilai di :root = mobile, @media (min-width:600px) = desktop.
   Breakpoint (tidak bisa jadi variabel CSS, jadi ditulis literal):
     480 = mobile kecil · 600 = desktop mulai (sm) · 900 = tablet/desktop lebar (md) · 1200 = lg
   ========================================================================== */

:root {
  /* ======================================================================
     1. PRIMITIVE — nilai mentah, JANGAN dipakai langsung di komponen
     ====================================================================== */

  /* Neutral */
  --iv-orange-500:  #FF6F00;
  --iv-gold-500:    #FFD000;   /* mahkota PRO: kontras di atas hijau gelap */

  /* --- tambahan untuk migrasi app --- */
  --iv-space-30: 120px; --iv-space-35: 140px; --iv-space-40: 160px;
  --iv-radius-2xs: 2px; --iv-radius-3xl: 20px; --iv-radius-4xl: 24px;
  --iv-text-72: 72px;
  --iv-fw-light: 300; --iv-fw-extrabold: 800; --iv-fw-black: 900;
  --iv-lh-10: 10px; --iv-lh-12: 12px; --iv-lh-14: 14px;
  /* Lapisan z khusus app (nilai urut dipertahankan) */
  --iv-z-bottombar: 40; --iv-z-topbar: 50; --iv-z-panel: 55; --iv-z-nav: 60; --iv-z-fab: 61;
  --iv-z-preview: 350; --iv-z-menu-backdrop: 360; --iv-z-menu: 361; --iv-z-submenu: 362;
  --iv-shadow-pop: 0 12px 32px -8px var(--iv-alpha-ink-18);
  --iv-shadow-bar: 0 6px 6px -4px var(--iv-alpha-black-4);
  --iv-shadow-glow: 0 0 40px 10px var(--iv-alpha-ink-15);
  --iv-shadow-btn: 0 2px 4px var(--iv-alpha-black-8), 0 2px 8px var(--iv-alpha-black-20);
  --iv-shadow-edge: 0 1px 0 var(--iv-border);
  --iv-shadow-edge-danger: 0 1px 0 var(--iv-danger-edge);
  --iv-z-popover: 700; --iv-z-popover-top: 900; --iv-z-app-toast: 998; --iv-z-app-loading: 999; --iv-z-survey: 3000;
  --iv-danger-border: #F8C4D3;
  --iv-danger-edge: #F28DA6;
  --iv-accent-soft: #F3FBE4;
  --iv-accent-border: #D9F2B3;
  --iv-brand-whatsapp: #25D366;
  --iv-app-width: 520px;   /* lebar kolom app (mobile-first, di tengah pada layar lebar) */
  /* Alpha (overlay, bayangan, tint): --iv-alpha-<warna>-<persen> */
  --iv-alpha-accent-50: rgba(185, 255, 62, 0.5);
  --iv-alpha-accent-80: rgba(185, 255, 62, 0.8);
  --iv-alpha-black-15: rgba(0, 0, 0, 0.15);
  --iv-alpha-black-18: rgba(0, 0, 0, 0.18);
  --iv-alpha-black-32: rgba(0, 0, 0, 0.32);
  --iv-alpha-black-40: rgba(0, 0, 0, 0.4);
  --iv-alpha-black-45: rgba(0, 0, 0, 0.45);
  --iv-alpha-black-50: rgba(0, 0, 0, 0.5);
  --iv-alpha-black-55: rgba(0, 0, 0, 0.55);
  --iv-alpha-danger-50: rgba(229, 62, 62, 0.5);
  --iv-alpha-danger-60: rgba(229, 62, 62, 0.6);
  --iv-alpha-green-12: rgba(31, 107, 63, 0.12);
  --iv-alpha-green-15: rgba(31, 107, 63, 0.15);
  --iv-alpha-info-50: rgba(47, 111, 237, 0.5);
  --iv-alpha-ink-45: rgba(2, 4, 23, 0.45);
  --iv-alpha-ink-55: rgba(2, 4, 23, 0.55);
  --iv-alpha-muted-55: rgba(241, 241, 241, 0.55);
  --iv-alpha-neutral-15: rgba(122, 122, 122, 0.15);
  --iv-alpha-neutral-20: rgba(122, 122, 122, 0.2);
  --iv-alpha-primary-70: rgba(0, 37, 20, 0.7);
  --iv-alpha-success-45: rgba(19, 162, 51, 0.45);
  --iv-alpha-success-50: rgba(19, 162, 51, 0.5);
  --iv-alpha-success-55: rgba(19, 162, 51, 0.55);
  --iv-alpha-white-7: rgba(255, 255, 255, 0.07);
  --iv-alpha-white-8: rgba(255, 255, 255, 0.08);
  --iv-alpha-white-10: rgba(255, 255, 255, 0.1);
  --iv-alpha-white-12: rgba(255, 255, 255, 0.12);
  --iv-alpha-white-13: rgba(255, 255, 255, 0.13);
  --iv-alpha-white-15: rgba(255, 255, 255, 0.15);
  --iv-alpha-white-20: rgba(255, 255, 255, 0.2);
  --iv-alpha-white-38: rgba(255, 255, 255, 0.38);
  --iv-alpha-white-90: rgba(255, 255, 255, 0.9);

  /* --- tambahan untuk migrasi app --- */
  --iv-space-30: 120px; --iv-space-35: 140px; --iv-space-40: 160px;
  --iv-radius-2xs: 2px; --iv-radius-3xl: 20px; --iv-radius-4xl: 24px;
  --iv-text-72: 72px;
  --iv-fw-light: 300; --iv-fw-extrabold: 800; --iv-fw-black: 900;
  --iv-lh-10: 10px; --iv-lh-12: 12px; --iv-lh-14: 14px;
  /* Lapisan z khusus app (nilai urut dipertahankan) */
  --iv-z-bottombar: 40; --iv-z-topbar: 50; --iv-z-panel: 55; --iv-z-nav: 60; --iv-z-fab: 61;
  --iv-z-preview: 350; --iv-z-menu-backdrop: 360; --iv-z-menu: 361; --iv-z-submenu: 362;
  --iv-shadow-pop: 0 12px 32px -8px var(--iv-alpha-ink-18);
  --iv-shadow-bar: 0 6px 6px -4px var(--iv-alpha-black-4);
  --iv-shadow-glow: 0 0 40px 10px var(--iv-alpha-ink-15);
  --iv-shadow-btn: 0 2px 4px var(--iv-alpha-black-8), 0 2px 8px var(--iv-alpha-black-20);
  --iv-shadow-edge: 0 1px 0 var(--iv-border);
  --iv-shadow-edge-danger: 0 1px 0 var(--iv-danger-edge);
  --iv-z-popover: 700; --iv-z-popover-top: 900; --iv-z-app-toast: 998; --iv-z-app-loading: 999; --iv-z-survey: 3000;
  --iv-danger-border: #F8C4D3;
  --iv-danger-edge: #F28DA6;
  --iv-accent-soft: #F3FBE4;
  --iv-accent-border: #D9F2B3;
  --iv-brand-whatsapp: #25D366;
  --iv-app-width: 520px;   /* lebar kolom app (mobile-first, di tengah pada layar lebar) */
  /* Alpha (overlay, bayangan, tint): --iv-alpha-<warna>-<persen> */
  --iv-alpha-accent-50: rgba(185, 255, 62, 0.5);
  --iv-alpha-accent-80: rgba(185, 255, 62, 0.8);
  --iv-alpha-black-15: rgba(0, 0, 0, 0.15);
  --iv-alpha-black-18: rgba(0, 0, 0, 0.18);
  --iv-alpha-black-32: rgba(0, 0, 0, 0.32);
  --iv-alpha-black-40: rgba(0, 0, 0, 0.4);
  --iv-alpha-black-45: rgba(0, 0, 0, 0.45);
  --iv-alpha-black-50: rgba(0, 0, 0, 0.5);
  --iv-alpha-black-55: rgba(0, 0, 0, 0.55);
  --iv-alpha-danger-50: rgba(229, 62, 62, 0.5);
  --iv-alpha-danger-60: rgba(229, 62, 62, 0.6);
  --iv-alpha-green-12: rgba(31, 107, 63, 0.12);
  --iv-alpha-green-15: rgba(31, 107, 63, 0.15);
  --iv-alpha-info-50: rgba(47, 111, 237, 0.5);
  --iv-alpha-ink-45: rgba(2, 4, 23, 0.45);
  --iv-alpha-ink-55: rgba(2, 4, 23, 0.55);
  --iv-alpha-muted-55: rgba(241, 241, 241, 0.55);
  --iv-alpha-neutral-15: rgba(122, 122, 122, 0.15);
  --iv-alpha-neutral-20: rgba(122, 122, 122, 0.2);
  --iv-alpha-primary-70: rgba(0, 37, 20, 0.7);
  --iv-alpha-success-45: rgba(19, 162, 51, 0.45);
  --iv-alpha-success-50: rgba(19, 162, 51, 0.5);
  --iv-alpha-success-55: rgba(19, 162, 51, 0.55);
  --iv-alpha-white-7: rgba(255, 255, 255, 0.07);
  --iv-alpha-white-8: rgba(255, 255, 255, 0.08);
  --iv-alpha-white-10: rgba(255, 255, 255, 0.1);
  --iv-alpha-white-12: rgba(255, 255, 255, 0.12);
  --iv-alpha-white-13: rgba(255, 255, 255, 0.13);
  --iv-alpha-white-15: rgba(255, 255, 255, 0.15);
  --iv-alpha-white-20: rgba(255, 255, 255, 0.2);
  --iv-alpha-white-38: rgba(255, 255, 255, 0.38);
  --iv-alpha-white-90: rgba(255, 255, 255, 0.9);

  /* --- tambahan untuk migrasi app --- */
  --iv-danger-border: #F8C4D3;
  --iv-danger-edge: #F28DA6;
  --iv-accent-soft: #F3FBE4;
  --iv-accent-border: #D9F2B3;
  --iv-brand-whatsapp: #25D366;
  --iv-app-width: 520px;   /* lebar kolom app (mobile-first, di tengah pada layar lebar) */
  /* Alpha (overlay, bayangan, tint): --iv-alpha-<warna>-<persen> */
  --iv-alpha-accent-80: rgba(185, 255, 62, 0.8);
  --iv-alpha-black-4: rgba(0, 0, 0, 0.04);
  --iv-alpha-black-5: rgba(0, 0, 0, 0.05);
  --iv-alpha-black-6: rgba(0, 0, 0, 0.06);
  --iv-alpha-black-7: rgba(0, 0, 0, 0.07);
  --iv-alpha-black-8: rgba(0, 0, 0, 0.08);
  --iv-alpha-black-10: rgba(0, 0, 0, 0.1);
  --iv-alpha-black-12: rgba(0, 0, 0, 0.12);
  --iv-alpha-black-14: rgba(0, 0, 0, 0.14);
  --iv-alpha-black-15: rgba(0, 0, 0, 0.15);
  --iv-alpha-black-16: rgba(0, 0, 0, 0.16);
  --iv-alpha-black-18: rgba(0, 0, 0, 0.18);
  --iv-alpha-black-20: rgba(0, 0, 0, 0.2);
  --iv-alpha-black-25: rgba(0, 0, 0, 0.25);
  --iv-alpha-black-32: rgba(0, 0, 0, 0.32);
  --iv-alpha-black-40: rgba(0, 0, 0, 0.4);
  --iv-alpha-black-45: rgba(0, 0, 0, 0.45);
  --iv-alpha-black-50: rgba(0, 0, 0, 0.5);
  --iv-alpha-black-55: rgba(0, 0, 0, 0.55);
  --iv-alpha-green-12: rgba(31, 107, 63, 0.12);
  --iv-alpha-green-15: rgba(31, 107, 63, 0.15);
  --iv-alpha-ink-12: rgba(2, 4, 23, 0.12);
  --iv-alpha-ink-15: rgba(2, 4, 23, 0.15);
  --iv-alpha-ink-18: rgba(2, 4, 23, 0.18);
  --iv-alpha-ink-40: rgba(2, 4, 23, 0.4);
  --iv-alpha-ink-45: rgba(2, 4, 23, 0.45);
  --iv-alpha-ink-55: rgba(2, 4, 23, 0.55);
  --iv-alpha-neutral-15: rgba(122, 122, 122, 0.15);
  --iv-alpha-neutral-16: rgba(122, 122, 122, 0.16);
  --iv-alpha-neutral-20: rgba(122, 122, 122, 0.2);
  --iv-alpha-primary-30: rgba(0, 37, 20, 0.3);
  --iv-alpha-primary-70: rgba(0, 37, 20, 0.7);
  --iv-alpha-success-45: rgba(19, 162, 51, 0.45);
  --iv-alpha-success-55: rgba(19, 162, 51, 0.55);
  --iv-alpha-white-7: rgba(255, 255, 255, 0.07);
  --iv-alpha-white-8: rgba(255, 255, 255, 0.08);
  --iv-alpha-white-10: rgba(255, 255, 255, 0.1);
  --iv-alpha-white-12: rgba(255, 255, 255, 0.12);
  --iv-alpha-white-13: rgba(255, 255, 255, 0.13);
  --iv-alpha-white-15: rgba(255, 255, 255, 0.15);
  --iv-alpha-white-20: rgba(255, 255, 255, 0.2);
  --iv-alpha-white-38: rgba(255, 255, 255, 0.38);
  --iv-alpha-white-90: rgba(255, 255, 255, 0.9);
  --iv-neutral-0:   #FFFFFF;
  --iv-neutral-50:  #FAFAFA;
  --iv-neutral-100: #F1F1F1;
  --iv-neutral-200: #E5E5E5;
  --iv-neutral-300: #CCCCCC;
  --iv-neutral-400: #B5B5B5;
  --iv-neutral-500: #7A7A7A;
  --iv-neutral-700: #333333;
  --iv-neutral-900: #020417;

  /* Brand green (skala gabungan app + admin + store; ditinjau lagi saat migrasi) */
  --iv-green-950: #001A10;
  --iv-green-900: #002514;
  --iv-green-700: #004D29;
  --iv-green-500: #1F6B3F;
  --iv-green-300: #52B788;
  --iv-green-200: #B7E4C7;
  --iv-green-100: #D8F3DC;
  --iv-green-50:  #F0FAF4;

  /* Lime (aksen brand) */
  --iv-lime-500: #B9FF3E;

  /* Status */
  --iv-red-500:    #E53E3E;
  --iv-red-700:    #B42323;   /* teks kecil di atas putih / hover (kontras >= 4.5) */
  --iv-red-100:    #FDECEC;
  --iv-green-ok-600: #13A233;
  --iv-green-ok-100: #E4FCE9;
  --iv-amber-500:  #F59E0B;
  --iv-amber-700:  #B45309;   /* teks kecil di atas putih / hover */
  --iv-amber-100:  #FEF3C7;
  --iv-blue-500:   #2F6FED;
  --iv-blue-700:   #1D4ED8;   /* teks kecil di atas putih / hover */
  --iv-blue-100:   #E8F0FE;

  /* ======================================================================
     2. SEMANTIC — inilah yang dipakai komponen
     ====================================================================== */

  /* Permukaan */
  --iv-bg:             var(--iv-neutral-50);
  --iv-surface:        var(--iv-neutral-0);
  --iv-surface-muted:  var(--iv-neutral-100);
  --iv-surface-inverse:var(--iv-green-900);
  --iv-overlay:        rgba(2, 4, 23, .48);
  --iv-surface-glass:        rgba(255, 255, 255, .92);   /* panel/tombol semi-transparan di atas gambar */
  --iv-surface-glass-strong: rgba(255, 255, 255, .96);
  --iv-on-dark-subtle: rgba(255, 255, 255, .07);         /* isi tombol inverse */
  --iv-on-dark-hover:  rgba(255, 255, 255, .13);
  --iv-on-dark-border: rgba(255, 255, 255, .15);
  --iv-hover-tint:     rgba(2, 4, 23, .08);              /* tint hover di atas permukaan terang */

  /* Teks */
  --iv-text:           var(--iv-neutral-900);
  --iv-text-2:         var(--iv-neutral-700);
  --iv-text-muted:     var(--iv-neutral-500);
  --iv-text-subtle:    var(--iv-neutral-400);
  --iv-text-inverse:   var(--iv-neutral-0);
  --iv-text-on-accent: var(--iv-neutral-900);
  --iv-ink:            var(--iv-neutral-900);   /* hitam brand untuk background/border solid */

  /* Garis */
  --iv-border:         var(--iv-neutral-200);
  --iv-border-strong:  var(--iv-neutral-300);
  --iv-border-inverse: var(--iv-green-700);

  /* Brand */
  --iv-primary:        var(--iv-green-900);
  --iv-primary-hover:  var(--iv-green-700);
  --iv-on-primary:     var(--iv-neutral-0);
  --iv-accent:         var(--iv-lime-500);
  --iv-on-accent:      var(--iv-neutral-900);

  /* Status */
  --iv-danger:         var(--iv-red-500);
  --iv-danger-strong:  var(--iv-red-700);
  --iv-danger-soft:    var(--iv-red-100);
  --iv-success:        var(--iv-green-ok-600);
  --iv-success-soft:   var(--iv-green-ok-100);
  --iv-warning:        var(--iv-amber-500);
  --iv-warning-strong: var(--iv-amber-700);
  --iv-warning-soft:   var(--iv-amber-100);
  --iv-success-strong: #0B6B1F;   /* teks hijau kecil di atas soft */
  --iv-info:           var(--iv-blue-500);
  --iv-info-strong:    var(--iv-blue-700);
  --iv-info-soft:      var(--iv-blue-100);
  --iv-pro:            var(--iv-gold-500);   /* ikon mahkota PRO */
  --iv-code-bg:        #1E1E1E;   /* viewer kode (admin) */
  --iv-code-fg:        #D4D4D4;
  --iv-code-fn:        #9CDCFE;
  --iv-code-guide-bg:  #0F1F18;
  --iv-warning-ink:    #9A5B00;   /* teks status 'peringatan' di atas soft */
  --iv-warning-tint:   #FFF1DC;
  --iv-plan-satuan:      #7713A2;   /* lencana paket 'satuan' (admin) */
  --iv-plan-satuan-soft: #F6E8FC;
  --iv-like:           #F2194B;   /* khusus fitur suka (store) */
  --iv-like-soft:      #FFE6EC;

  /* Fokus */
  --iv-focus-ring: 0 0 0 3px rgba(0, 37, 20, .18);
  --iv-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--iv-danger) 20%, transparent);
  --iv-ring-inset: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);

  /* ======================================================================
     3. TIPOGRAFI
     ====================================================================== */
  --iv-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --iv-font-num:  'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Aturan: Geist = semua teks umum. Inter = ANGKA saja (harga, diskon, nominal,
     jumlah, nomor invoice, kode). Pakai --iv-font-numeric / class .iv-num. */
  --iv-font-code: ui-monospace, 'SF Mono', Consolas, Menlo, monospace;   /* khusus kode / ID teknis */
  --iv-font-numeric: var(--iv-font-num);

  --iv-fw-regular: 400;
  --iv-fw-medium:  500;
  --iv-fw-semibold:600;
  --iv-fw-bold:    700;

  /* Skala ukuran teks (px) */
  --iv-text-10: 10px;
  --iv-text-11: 11px;
  --iv-text-12: 12px;
  --iv-text-13: 13px;
  --iv-text-14: 14px;
  --iv-text-15: 15px;
  --iv-text-16: 16px;
  --iv-text-18: 18px;
  --iv-text-20: 20px;
  --iv-text-22: 22px;
  --iv-text-24: 24px;
  --iv-text-26: 26px;
  --iv-text-28: 28px;
  --iv-text-30: 30px;
  --iv-text-32: 32px;
  --iv-text-34: 34px;
  --iv-text-38: 38px;
  --iv-text-40: 40px;
  --iv-text-48: 48px;
  --iv-text-52: 52px;
  --iv-text-64: 64px;

  --iv-leading-none:    1;
  --iv-leading-display: 1.1;
  --iv-leading-tight:   1.2;
  --iv-leading-heading: 1.3;
  --iv-leading-snug:    1.4;
  --iv-leading-body:    1.5;
  --iv-leading-relaxed: 1.65;
  /* line-height px (untuk teks dengan baris tetap) */
  --iv-lh-16: 16px; --iv-lh-18: 18px; --iv-lh-20: 20px; --iv-lh-22: 22px; --iv-lh-24: 24px; --iv-lh-26: 26px;
  --iv-lh-28: 28px; --iv-lh-30: 30px; --iv-lh-32: 32px; --iv-lh-36: 36px; --iv-lh-40: 40px; --iv-lh-44: 44px; --iv-lh-56: 56px;

  /* letter-spacing */
  --iv-ls-tight:  -.02em;
  --iv-ls-snug:   -.01em;
  --iv-ls-normal: 0;
  --iv-ls-wide:   .02em;
  --iv-ls-wider:  .04em;

  /* ======================================================================
     4. SPACING (basis 4px)
     ====================================================================== */
  --iv-space-px:  1px;
  --iv-space-0-5: 2px;
  --iv-space-1:   4px;
  --iv-space-1-5: 6px;
  --iv-space-2:   8px;
  --iv-space-2-5: 10px;
  --iv-space-3:   12px;
  --iv-space-3-5: 14px;
  --iv-space-4:   16px;
  --iv-space-4-5: 18px;
  --iv-space-5:   20px;
  --iv-space-6:   24px;
  --iv-space-7:   28px;
  --iv-space-8:   32px;
  --iv-space-9:   36px;
  --iv-space-10:  40px;
  --iv-space-12:  48px;
  --iv-space-11:  44px;
  --iv-space-14:  56px;
  --iv-space-16:  64px;
  --iv-space-0:   0;
  --iv-space-20:  80px;
  --iv-space-24:  96px;
  --iv-space-28:  112px;
  --iv-space-32:  128px;
  /* LEGACY — hanya untuk migrasi 1:1, dihapus setelah dirapikan */


  /* ======================================================================
     5. RADIUS
     ====================================================================== */
  --iv-radius-xs:   4px;
  --iv-radius-sm:   6px;
  --iv-radius-md:   8px;
  --iv-radius-lg:   10px;
  --iv-radius-xl:   12px;
  --iv-radius-2xl:  16px;
  --iv-radius-pill: 999px;
  --iv-radius-full: 50%;

  /* ======================================================================
     6. SHADOW
     ====================================================================== */
  --iv-shadow-xs:      0 1px 2px rgba(2, 4, 23, .06);
  --iv-shadow-sm:      0 2px 6px rgba(2, 4, 23, .08);
  --iv-shadow-md:      0 6px 16px rgba(2, 4, 23, .10);
  --iv-shadow-lg:      0 12px 32px rgba(2, 4, 23, .14);
  --iv-shadow-overlay: 0 24px 64px rgba(2, 4, 23, .22);
  --iv-shadow-up:      0 -10px 40px rgba(2, 4, 23, .16);        /* bottom sheet */
  --iv-shadow-hover:   0 6px 14px rgba(2, 4, 23, .20);          /* hover tombol: lebih tebal dari sm */
  --iv-hover-dim: 9%;                                           /* seberapa gelap permukaan tombol saat hover */
  --iv-shadow-hairline:0 1px 0 var(--iv-surface-muted);

  /* border width */
  --iv-bw:        1px;
  --iv-bw-strong: 1.5px;
  --iv-bw-thick:  2px;

  /* ======================================================================
     7. Z-INDEX
     ====================================================================== */
  --iv-z-base:     0;
  --iv-z-1: 1; --iv-z-2: 2; --iv-z-3: 3; --iv-z-4: 4; --iv-z-5: 5;   /* susunan lokal di dalam satu komponen */
  --iv-z-raised:   10;
  --iv-z-above:    20;
  --iv-z-sticky:   100;
  --iv-z-dropdown: 200;
  --iv-z-overlay:  300;
  --iv-z-auth:     1500; /* popup login bersama (shared/auth-modal) */
  --iv-z-modal:    400;
  --iv-z-toast:    500;
  --iv-z-tooltip:  600;

  /* ======================================================================
     8. MOTION
     ====================================================================== */
  --iv-ease:     cubic-bezier(.2, 0, 0, 1);
  --iv-blur-overlay: 4px; /* blur konten di belakang popup */
  --iv-dur-fast: 120ms;
  --iv-dur:      200ms;
  --iv-dur-slow: 320ms;

  /* ======================================================================
     9. SKALA UKURAN KOMPONEN  (xs · sm · md · lg · xl)
     Dipakai SEMUA komponen: button, input, select, badge, tag, chip,
     banner, avatar, tab, toggle, pagination.
     Nilai di sini = MOBILE. Desktop di-override di @media bawah.
     Pola pemakaian:  .iv-btn { height: var(--iv-h); padding-inline: var(--iv-px); ... }
                      .iv-btn--sm { --iv-h: var(--iv-sz-sm-h); ... }
     h = tinggi · px = padding horizontal · fs = font · r = radius
     icon = ukuran ikon Phosphor · gap = jarak ikon↔teks
     ====================================================================== */
  --iv-sz-xs-h: 22px;  --iv-sz-xs-px: 8px;   --iv-sz-xs-fs: var(--iv-text-11); --iv-sz-xs-r: var(--iv-radius-sm); --iv-sz-xs-icon: 14px; --iv-sz-xs-gap: 4px;
  --iv-sz-sm-h: 30px;  --iv-sz-sm-px: 10px;  --iv-sz-sm-fs: var(--iv-text-12); --iv-sz-sm-r: var(--iv-radius-sm); --iv-sz-sm-icon: 16px; --iv-sz-sm-gap: 6px;
  --iv-sz-md-h: 36px;  --iv-sz-md-px: 14px;  --iv-sz-md-fs: var(--iv-text-13); --iv-sz-md-r: var(--iv-radius-md); --iv-sz-md-icon: 18px; --iv-sz-md-gap: 6px;
  --iv-sz-lg-h: 44px;  --iv-sz-lg-px: 18px;  --iv-sz-lg-fs: var(--iv-text-14); --iv-sz-lg-r: var(--iv-radius-lg); --iv-sz-lg-icon: 20px; --iv-sz-lg-gap: 8px;
  --iv-sz-xl-h: 52px;  --iv-sz-xl-px: 22px;  --iv-sz-xl-fs: var(--iv-text-15); --iv-sz-xl-r: var(--iv-radius-xl); --iv-sz-xl-icon: 22px; --iv-sz-xl-gap: 8px;

  /* Skala BADGE (non-interaktif, lebih padat dari kontrol): sm · md · lg */
  --iv-bd-sm-h: 18px;  --iv-bd-sm-px: 6px;   --iv-bd-sm-fs: var(--iv-text-10); --iv-bd-sm-r: var(--iv-radius-xs);
  --iv-bd-md-h: 20px;  --iv-bd-md-px: 8px;   --iv-bd-md-fs: var(--iv-text-11); --iv-bd-md-r: var(--iv-radius-sm);
  --iv-bd-lg-h: 26px;  --iv-bd-lg-px: 10px;  --iv-bd-lg-fs: var(--iv-text-12); --iv-bd-lg-r: var(--iv-radius-sm);

  /* Layout */
  --iv-gutter:        16px;
  --iv-container-max: 1200px;
}

/* Desktop (min-width: 600px): md = "regular", sm/lg/xl menyesuaikan */
@media (min-width: 600px) {
  :root {
    --iv-sz-xs-h: 24px;  --iv-sz-xs-px: 8px;   --iv-sz-xs-fs: var(--iv-text-12); --iv-sz-xs-r: var(--iv-radius-sm); --iv-sz-xs-icon: 14px; --iv-sz-xs-gap: 4px;
    --iv-sz-sm-h: 32px;  --iv-sz-sm-px: 12px;  --iv-sz-sm-fs: var(--iv-text-13); --iv-sz-sm-r: var(--iv-radius-md); --iv-sz-sm-icon: 16px; --iv-sz-sm-gap: 6px;
    --iv-sz-md-h: 40px;  --iv-sz-md-px: 16px;  --iv-sz-md-fs: var(--iv-text-14); --iv-sz-md-r: var(--iv-radius-lg); --iv-sz-md-icon: 20px; --iv-sz-md-gap: 8px;
    --iv-sz-lg-h: 48px;  --iv-sz-lg-px: 20px;  --iv-sz-lg-fs: var(--iv-text-15); --iv-sz-lg-r: var(--iv-radius-xl); --iv-sz-lg-icon: 20px; --iv-sz-lg-gap: 8px;
    --iv-sz-xl-h: 56px;  --iv-sz-xl-px: 24px;  --iv-sz-xl-fs: var(--iv-text-16); --iv-sz-xl-r: var(--iv-radius-2xl); --iv-sz-xl-icon: 24px; --iv-sz-xl-gap: 10px;

    --iv-bd-sm-h: 18px;  --iv-bd-sm-px: 6px;   --iv-bd-sm-fs: var(--iv-text-10); --iv-bd-sm-r: var(--iv-radius-xs);
    --iv-bd-md-h: 22px;  --iv-bd-md-px: 8px;   --iv-bd-md-fs: var(--iv-text-12); --iv-bd-md-r: var(--iv-radius-sm);
    --iv-bd-lg-h: 28px;  --iv-bd-lg-px: 12px;  --iv-bd-lg-fs: var(--iv-text-13); --iv-bd-lg-r: var(--iv-radius-md);

    --iv-gutter: 24px;
  }
}

/* ==========================================================================
   10. SEMANTIC LAYOUT, ELEVATION & KOMPONEN
   Lapisan di atas skala spacing/shadow/radius: nama berdasarkan FUNGSI, bukan angka.
   Ubah di sini untuk redesign; komponen tidak perlu disentuh.
   ========================================================================== */
:root {
  /* --- Inset (padding kotak, sama ke semua sisi) --- */
  --iv-inset-2xs: var(--iv-space-1);    /*  4 */
  --iv-inset-xs:  var(--iv-space-2);    /*  8 */
  --iv-inset-sm:  var(--iv-space-3);    /* 12 */
  --iv-inset-md:  var(--iv-space-4);    /* 16 */
  --iv-inset-lg:  var(--iv-space-5);    /* 20 */
  --iv-inset-xl:  var(--iv-space-6);    /* 24 */
  --iv-inset-2xl: var(--iv-space-8);    /* 32 */
  --iv-inset-3xl: var(--iv-space-10);   /* 40 */

  /* --- Squish (padding vertikal < horizontal: tombol, sel tabel, item menu) --- */
  --iv-squish-xs: var(--iv-space-1) var(--iv-space-2);
  --iv-squish-sm: var(--iv-space-1-5) var(--iv-space-3);
  --iv-squish-md: var(--iv-space-2) var(--iv-space-4);
  --iv-squish-lg: var(--iv-space-3) var(--iv-space-5);
  --iv-squish-xl: var(--iv-space-4) var(--iv-space-6);

  /* --- Stack (jarak vertikal antar elemen) & Inline (jarak horizontal) --- */
  --iv-stack-2xs: var(--iv-space-1);
  --iv-stack-xs:  var(--iv-space-2);
  --iv-stack-sm:  var(--iv-space-3);
  --iv-stack-md:  var(--iv-space-4);
  --iv-stack-lg:  var(--iv-space-6);
  --iv-stack-xl:  var(--iv-space-8);
  --iv-stack-2xl: var(--iv-space-12);
  --iv-inline-2xs: var(--iv-space-1);
  --iv-inline-xs:  var(--iv-space-2);
  --iv-inline-sm:  var(--iv-space-3);
  --iv-inline-md:  var(--iv-space-4);
  --iv-inline-lg:  var(--iv-space-6);
  --iv-inline-xl:  var(--iv-space-8);

  /* --- Section (jarak antar blok halaman) --- */
  --iv-section-sm: var(--iv-space-8);
  --iv-section-md: var(--iv-space-12);
  --iv-section-lg: var(--iv-space-20);

  /* --- Elevation (urutan tinggi permukaan; Figma: effect styles) --- */
  --iv-elevation-0: none;
  --iv-elevation-1: var(--iv-shadow-xs);
  --iv-elevation-2: var(--iv-shadow-sm);
  --iv-elevation-3: var(--iv-shadow-md);
  --iv-elevation-4: var(--iv-shadow-lg);
  --iv-elevation-5: var(--iv-shadow-overlay);

  /* --- Outline / focus --- */
  --iv-outline-width:  var(--iv-bw-thick);
  --iv-outline-offset: 2px;
  --iv-outline-color:  var(--iv-primary);

  /* --- Card --- */
  --iv-card-bg:           var(--iv-surface);
  --iv-card-border-color: var(--iv-border);
  --iv-card-border-width: var(--iv-bw);
  --iv-card-radius:       var(--iv-radius-2xl);
  --iv-card-shadow:       var(--iv-elevation-0);
  --iv-card-shadow-raised:var(--iv-elevation-2);
  --iv-card-pad-sm:       var(--iv-inset-sm);
  --iv-card-pad-md:       var(--iv-inset-md);
  --iv-card-pad-lg:       var(--iv-inset-lg);

  /* --- Table --- */
  --iv-table-bg:             var(--iv-surface);
  --iv-table-border:         var(--iv-border);
  --iv-table-radius:         var(--iv-radius-lg);
  --iv-table-head-bg:        var(--iv-surface-muted);
  --iv-table-head-fg:        var(--iv-text-muted);
  --iv-table-row-hover-bg:   color-mix(in srgb, var(--iv-neutral-900) 3%, var(--iv-surface));
  --iv-table-row-press-bg:   color-mix(in srgb, var(--iv-neutral-900) 6%, var(--iv-surface));
  --iv-table-row-selected-bg:var(--iv-green-50);
  --iv-table-row-stripe-bg:  color-mix(in srgb, var(--iv-neutral-900) 2%, var(--iv-surface));
  --iv-table-cell-px:        var(--iv-space-4);

  /* --- Nav / menu item --- */
  --iv-nav-fg:              var(--iv-primary);
  --iv-nav-bg-hover:        color-mix(in srgb, var(--iv-neutral-900) var(--iv-hover-dim), transparent);
  --iv-nav-bg-press:        color-mix(in srgb, var(--iv-neutral-900) calc(var(--iv-hover-dim) * 1.6), transparent);
  --iv-nav-bg-active:       var(--iv-surface);
  --iv-nav-border-active:   var(--iv-border);
  --iv-menu-bg-hover:       var(--iv-surface-muted);
  --iv-menu-bg-press:       color-mix(in srgb, var(--iv-neutral-900) calc(var(--iv-hover-dim) * 1.6), var(--iv-surface-muted));
  --iv-menu-bg-active:      var(--iv-green-50);
}

/* Dark mode: override HANYA lapisan semantic (bagian 2) di sini, mis.
   .dark { --iv-bg: ...; --iv-surface: ...; --iv-text: ...; }
   Ditambahkan saat dark mode di-roll-out ke admin/store. */