/* ==========================================================================
   00 TOKEN — satu-satunya tempat nilai desain ditulis.
   --------------------------------------------------------------------------
   Arah: docs/MASTER-PROMPT-DESAIN.md (iOS 26, Liquid Glass).
   Design Read: ruang kerja POS + shell mirip sistem operasi untuk pemilik
   dan kasir toko sembako, bahasa visual iOS 26 Liquid Glass (diminta
   pemilik), dial ENERGY 2 / RHYTHM 2 / MOTION 2.

   Alasan keputusan (R-31):
   - Emerald sebagai aksi: warna toko (hijau Sumatra) dan terbaca di atas
     putih hangat maupun hitam.
   - Lime hanya sorotan (indikator aktif, angka utama di widget): satu aksen.
   - Font sistem Apple dulu (fidelitas iOS di iPhone/iPad/Mac); Inter sebagai
     cadangan Windows/Android karena metriknya paling dekat dengan SF Pro.
   - Kaca di semua permukaan: keputusan pemilik (pengecualian R-10 yang
     dicatat). Kontras dijaga dengan lapisan dasar kaca yang cukup pekat.
   - Warna tile ikon berbeda per kategori modul: diminta master prompt 4.3.

   Kamus nama lama (--primary, --surface, --text, dst.) dipetakan di bagian
   bawah, supaya halaman lama yang belum dibangun ulang ikut palet baru.
   ========================================================================== */

:root {
    /* ---------- Warna inti (terang) ---------- */
    --ios-bg: #f5f4ef;              /* putih hangat */
    --ios-bg-2: #ecebe5;
    --ios-ink: #111412;              /* hampir hitam */
    --ios-ink-2: #3a3f3b;            /* teks sekunder: 10.6:1 di atas bg */
    --ios-ink-3: #5c635e;            /* teks tersier: 5.9:1 di atas bg */
    --ios-ink-4: #8a908b;            /* hanya ikon / placeholder besar */
    --ios-sep: rgba(60, 64, 60, .16);
    --ios-sep-strong: rgba(60, 64, 60, .28);

    --ios-emerald: #087f52;          /* aksi; putih di atasnya 5.0:1 */
    --ios-emerald-2: #067048;        /* tekan / teks tautan */
    --ios-emerald-soft: rgba(11, 138, 90, .12);
    --ios-lime: #b5e550;             /* sorotan; teks gelap di atasnya */
    --ios-lime-ink: #1f3005;
    --ios-on-accent: #ffffff;

    /* ---------- Status ---------- */
    --ios-green: #0f7f45;   --ios-green-bg: rgba(19, 138, 76, .12);   --ios-green-ink: #0d6236;
    --ios-red: #d1342b;     --ios-red-bg: rgba(209, 52, 43, .11);     --ios-red-ink: #a3221b;
    --ios-orange: #c96a06;  --ios-orange-bg: rgba(230, 126, 14, .14); --ios-orange-ink: #8c4a03;
    --ios-blue: #1f6fd6;    --ios-blue-bg: rgba(31, 111, 214, .11);   --ios-blue-ink: #17539f;
    --ios-gray-bg: rgba(110, 115, 110, .13);  --ios-gray-ink: #474d48;

    /* ---------- Tile ikon (pasangan gradien atas, bawah) ---------- */
    --tile-emerald: linear-gradient(160deg, #2fd08b, #0a8a58);
    --tile-lime: linear-gradient(160deg, #c8f06a, #7fbf1d);
    --tile-teal: linear-gradient(160deg, #3fd1cf, #0f8f9a);
    --tile-blue: linear-gradient(160deg, #5aa6ff, #1c62d8);
    --tile-indigo: linear-gradient(160deg, #8b86ff, #4b44d1);
    --tile-purple: linear-gradient(160deg, #c48bff, #8240d6);
    --tile-pink: linear-gradient(160deg, #ff7aa8, #d93670);
    --tile-red: linear-gradient(160deg, #ff7a6e, #d8352a);
    --tile-orange: linear-gradient(160deg, #ffb550, #e7740e);
    --tile-yellow: linear-gradient(160deg, #ffd95a, #e0a611);
    --tile-graphite: linear-gradient(160deg, #8e9592, #4c524e);
    --tile-ink: linear-gradient(160deg, #3a3f3c, #121513);

    /* ---------- Gradien bernama (dipakai hemat) ---------- */
    --grad-emerald-lime: linear-gradient(135deg, #0b8a5a 0%, #3fbf6a 55%, #b5e550 100%);
    --grad-deep-emerald: linear-gradient(135deg, #04412b 0%, #0b8a5a 100%);
    --grad-black-graphite: linear-gradient(160deg, #000 0%, #26292a 100%);
    --grad-white-silver: linear-gradient(160deg, #ffffff 0%, #e4e6e3 100%);
    --grad-aurora: radial-gradient(120% 80% at 10% 0%, rgba(181, 229, 80, .55), transparent 60%),
                   radial-gradient(90% 70% at 100% 20%, rgba(11, 138, 90, .38), transparent 60%),
                   radial-gradient(90% 80% at 50% 110%, rgba(63, 191, 160, .30), transparent 60%);
    --grad-ambient: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));

    /* ---------- Material kaca ----------
       Setiap material: dasar (warna+opacity), blur, garis tepi, kilau
       dalam, bayangan. Dasar sengaja cukup pekat supaya teks di atasnya
       tetap memenuhi 4.5:1 di wallpaper paling terang. */
    --glass-ultra-bg: rgba(255, 255, 255, .42);
    --glass-ultra-blur: saturate(190%) blur(30px);
    --glass-std-bg: rgba(255, 255, 255, .68);
    --glass-std-blur: saturate(180%) blur(24px);
    --glass-frost-bg: rgba(250, 250, 247, .84);
    --glass-frost-blur: saturate(160%) blur(36px);
    --glass-tint-bg: rgba(255, 255, 255, .74);
    --glass-tint-blur: saturate(170%) blur(18px);
    --glass-float-bg: rgba(255, 255, 255, .62);
    --glass-float-blur: saturate(200%) blur(22px);
    --glass-overlay-bg: rgba(248, 248, 245, .9);
    --glass-overlay-blur: saturate(160%) blur(40px);
    --glass-row-bg: rgba(255, 255, 255, .78);   /* isi daftar / kelompok */
    --glass-line: rgba(255, 255, 255, .7);
    --glass-edge: rgba(17, 20, 18, .07);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(255, 255, 255, .5);
    --glass-scrim: rgba(20, 24, 22, .28);

    /* ---------- Bayangan (elevasi) ---------- */
    --sh-1: 0 1px 2px rgba(17, 20, 18, .06);
    --sh-2: 0 2px 6px rgba(17, 20, 18, .05), 0 12px 28px -14px rgba(17, 20, 18, .22);
    --sh-3: 0 8px 22px -6px rgba(17, 20, 18, .18), 0 30px 60px -24px rgba(17, 20, 18, .3);
    --sh-4: 0 24px 80px -20px rgba(17, 20, 18, .45);
    --sh-focus: 0 0 0 3px rgba(11, 138, 90, .35);

    /* ---------- Bentuk ---------- */
    --r-xs: 7px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-2xl: 34px;
    --r-tile: 23%;          /* superellipse ala ikon aplikasi */
    --r-pill: 999px;

    /* ---------- Jarak (kelipatan 4) ---------- */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
    --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;

    /* ---------- Tipografi ---------- */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
    --font-round: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", sans-serif;
    --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* hanya kode/barcode */
    --fs-display: clamp(64px, 14vw, 112px);
    --fs-large: clamp(28px, 4.2vw, 34px);   /* judul besar halaman */
    --fs-title-1: 28px;
    --fs-title-2: 22px;
    --fs-title-3: 20px;
    --fs-headline: 17px;
    --fs-body: 16px;
    --fs-callout: 15px;
    --fs-sub: 14px;
    --fs-foot: 13px;
    --fs-cap: 12px;
    --fs-cap-2: 11px;

    /* ---------- Ukuran ikon ---------- */
    --ic-xs: 14px; --ic-sm: 17px; --ic-md: 20px; --ic-lg: 24px; --ic-xl: 30px;
    --tile-sm: 29px; --tile-md: 36px; --tile-lg: 60px;

    /* ---------- Gerak ---------- */
    --t-fast: 140ms;
    --t-base: 240ms;
    --t-slow: 420ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.42, .5, 1);     /* sedikit memantul */
    --ease-island: cubic-bezier(.2, 1.25, .35, 1);

    /* ---------- Lapisan ---------- */
    --z-base: 1;
    --z-sticky: 20;
    --z-nav: 40;
    --z-tabbar: 50;
    --z-island: 70;
    --z-scrim: 80;
    --z-sheet: 90;
    --z-panel: 100;
    --z-toast: 120;
    --z-lock: 140;

    /* ---------- Tata letak ---------- */
    --side-w: 272px;
    --side-rail: 84px;
    --content-max: 1360px;
    --tabbar-h: 66px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);

    color-scheme: light;
}

/* ==========================================================================
   Mode gelap: hitam pekat, graphite, emerald dan lime bercahaya.
   ========================================================================== */
html[data-mode="dark"] {
    --ios-bg: #000000;
    --ios-bg-2: #0d0f0e;
    --ios-ink: #f4f6f4;
    --ios-ink-2: #c9cfca;
    --ios-ink-3: #9aa29c;     /* 7.4:1 di atas hitam */
    --ios-ink-4: #6d746f;
    --ios-sep: rgba(255, 255, 255, .12);
    --ios-sep-strong: rgba(255, 255, 255, .22);

    --ios-emerald: #2fd08b;
    --ios-emerald-2: #5fe0a6;
    --ios-emerald-soft: rgba(47, 208, 139, .16);
    --ios-lime: #c8f36b;
    --ios-lime-ink: #1a2a03;
    --ios-on-accent: #032216;

    --ios-green: #3ddc84;   --ios-green-bg: rgba(61, 220, 132, .16);  --ios-green-ink: #7ef0b0;
    --ios-red: #ff6a5f;     --ios-red-bg: rgba(255, 106, 95, .16);    --ios-red-ink: #ffa39b;
    --ios-orange: #ffad4a;  --ios-orange-bg: rgba(255, 173, 74, .16); --ios-orange-ink: #ffcf91;
    --ios-blue: #64a8ff;    --ios-blue-bg: rgba(100, 168, 255, .16);  --ios-blue-ink: #a8cdff;
    --ios-gray-bg: rgba(255, 255, 255, .1);   --ios-gray-ink: #d0d5d1;

    --grad-aurora: radial-gradient(120% 80% at 10% 0%, rgba(47, 208, 139, .26), transparent 60%),
                   radial-gradient(90% 70% at 100% 20%, rgba(200, 243, 107, .14), transparent 60%),
                   radial-gradient(90% 80% at 50% 110%, rgba(16, 120, 110, .3), transparent 60%);
    --grad-ambient: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));

    /* Deep glass */
    --glass-ultra-bg: rgba(28, 30, 29, .46);
    --glass-std-bg: rgba(28, 30, 29, .7);
    --glass-frost-bg: rgba(22, 24, 23, .86);
    --glass-tint-bg: rgba(34, 37, 35, .72);
    --glass-float-bg: rgba(36, 39, 37, .64);
    --glass-overlay-bg: rgba(20, 22, 21, .9);
    --glass-row-bg: rgba(30, 33, 31, .8);
    --glass-line: rgba(255, 255, 255, .1);
    --glass-edge: rgba(255, 255, 255, .06);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 .5px rgba(255, 255, 255, .06);
    --glass-scrim: rgba(0, 0, 0, .5);

    --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-2: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 28px -14px rgba(0, 0, 0, .7);
    --sh-3: 0 8px 22px -6px rgba(0, 0, 0, .55), 0 30px 60px -24px rgba(0, 0, 0, .8);
    --sh-4: 0 24px 80px -20px rgba(0, 0, 0, .9);
    --sh-focus: 0 0 0 3px rgba(47, 208, 139, .45);

    color-scheme: dark;
}

/* Kepadatan antarmuka (Pengaturan > Tampilan). */
html[data-density="rapat"] {
    --sp-4: 12px; --sp-5: 16px; --sp-6: 20px;
    --fs-body: 15px; --fs-callout: 14px;
}

/* Warna aksen pilihan (Pengaturan > Tampilan). Semua lulus 4.5:1 untuk
   teks putih di atasnya pada mode terang. */
html[data-aksen="biru"]   { --ios-emerald: #1a66d1; --ios-emerald-2: #12509f; --ios-emerald-soft: rgba(26, 102, 209, .12); --sh-focus: 0 0 0 3px rgba(26, 102, 209, .35); }
html[data-aksen="jingga"] { --ios-emerald: #b85a00; --ios-emerald-2: #8f4600; --ios-emerald-soft: rgba(184, 90, 0, .13); --sh-focus: 0 0 0 3px rgba(184, 90, 0, .35); }
html[data-aksen="ungu"]   { --ios-emerald: #6a3fd1; --ios-emerald-2: #522fa6; --ios-emerald-soft: rgba(106, 63, 209, .12); --sh-focus: 0 0 0 3px rgba(106, 63, 209, .35); }
html[data-aksen="grafit"] { --ios-emerald: #3d4440; --ios-emerald-2: #262b28; --ios-emerald-soft: rgba(61, 68, 64, .12); --sh-focus: 0 0 0 3px rgba(61, 68, 64, .35); }
html[data-mode="dark"][data-aksen="biru"]   { --ios-emerald: #64a8ff; --ios-emerald-2: #93c2ff; --ios-emerald-soft: rgba(100, 168, 255, .16); }
html[data-mode="dark"][data-aksen="jingga"] { --ios-emerald: #ffad4a; --ios-emerald-2: #ffc77f; --ios-emerald-soft: rgba(255, 173, 74, .16); }
html[data-mode="dark"][data-aksen="ungu"]   { --ios-emerald: #b39bff; --ios-emerald-2: #cfc0ff; --ios-emerald-soft: rgba(179, 155, 255, .16); }
html[data-mode="dark"][data-aksen="grafit"] { --ios-emerald: #d9dedb; --ios-emerald-2: #ffffff; --ios-emerald-soft: rgba(217, 222, 219, .14); }

/* ==========================================================================
   KAMUS NAMA LAMA -> token baru.
   app.css, laporan.css, kasir.css, katalog.css dll. membaca nama-nama ini.
   Memetakannya di sini membuat halaman lama ikut palet baru tanpa satu pun
   perubahan pada berkas produksi.
   ========================================================================== */
html[data-ui="ios26"],
html[data-ui="ios26"][data-theme] {
    --primary: var(--ios-emerald);
    --primary-dark: var(--ios-emerald-2);
    --primary-light: var(--ios-emerald-soft);
    --on-primary: var(--ios-on-accent);
    --link: var(--ios-emerald-2);
    --accent: var(--ios-lime);
    --glow: 11, 138, 90;

    --bg: var(--ios-bg);
    --surface: var(--glass-row-bg);
    --surface-2: var(--ios-gray-bg);
    --surface-3: var(--ios-sep);
    --border: var(--ios-sep);
    --border-strong: var(--ios-sep-strong);

    --text: var(--ios-ink);
    --text-soft: var(--ios-ink-2);
    --text-muted: var(--ios-ink-3);

    --success: var(--ios-green);   --success-bg: var(--ios-green-bg);   --success-text: var(--ios-green-ink);
    --danger: var(--ios-red);      --danger-bg: var(--ios-red-bg);      --danger-text: var(--ios-red-ink);
    --warning: var(--ios-orange);  --warning-bg: var(--ios-orange-bg);  --warning-text: var(--ios-orange-ink);
    --info: var(--ios-blue);       --info-bg: var(--ios-blue-bg);       --info-text: var(--ios-blue-ink);

    --radius-sm: var(--r-sm);
    --radius: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
    --radius-pill: var(--r-pill);
    --shadow-xs: var(--sh-1);
    --shadow-sm: var(--sh-1);
    --shadow: var(--sh-2);
    --shadow-lg: var(--sh-3);
    --ring: var(--sh-focus);

    --font-sans: var(--font);
    /* Huruf mono lama dipakai sebagai gaya "terminal" di label; di desain
       baru label memakai huruf sistem (R-06). */
    --font-mono: var(--font);
    --glass: var(--glass-std-bg);
    --glass-line: var(--glass-edge);
    --sidebar-1: transparent;
    --sidebar-2: transparent;
}