/* =============================================================
   PRIMITIVES.CSS — Apple-Clean Edition
   Raw color palette — nilai mentah, tidak dipakai langsung
   di komponen. Gunakan via tokens.css

   Filosofi:
   - Satu keluarga warna per semantic role (tidak dicampur
     Tailwind + Ant Design + Apple System Colors sekaligus)
   - Basis warna: Apple System Colors, saturasi disiplin
   - Satu neutral scale (gray/slate/zinc lama di-retire)
   - Nama step konsisten: 50 → 900 (bukan campur 25/75/125/…)
   ============================================================= */

:root {

    /* ── Blue — Primary / Brand Interaktif ────────────────────
       Basis: Apple System Blue (#007aff), diturunkan jadi scale
    ──────────────────────────────────────────────────────── */
    --blue-50: #eef6ff;
    --blue-100: #dcecff;
    --blue-200: #b6d9ff;
    --blue-300: #85bfff;
    --blue-400: #4da2ff;
    --blue-500: #007aff;
    /* base — Apple System Blue */
    --blue-600: #0066d6;
    --blue-700: #0051d5;
    /* Apple blue-dark, dipakai utk hover */
    --blue-800: #003e9e;
    --blue-900: #052c6e;

    /* ── Green — Success ───────────────────────────────────────
       Basis: Apple System Green (#34c759), bukan Tailwind green-600
    ──────────────────────────────────────────────────────── */
    --green-50: #eafbf0;
    --green-100: #d1f5de;
    --green-200: #a3ebbf;
    --green-300: #6fdc9c;
    --green-400: #34c759;
    /* base — Apple System Green */
    --green-500: #22ad4c;
    --green-600: #16913f;
    --green-700: #0f7433;
    --green-800: #0a5726;
    --green-900: #063d1b;

    /* ── Brand — hijau identitas produk (terpisah dari Success) ─
       Dipertahankan sebagai satu warna solid, bukan scale penuh,
       karena brand color biasanya fixed / tidak diturunkan
    ──────────────────────────────────────────────────────── */
    --brand-green: #00843d;
    --brand-green-hover: #006e33;
    --brand-green-subtle: #e6f4ed;

    /* ── Red — Danger / Error ──────────────────────────────────
       Basis: Apple System Red (#ff3b30), saturasi lebih tenang
       dari Ant Design red (#ff4d4f) atau Tailwind red-600
    ──────────────────────────────────────────────────────── */
    --red-50: #fff1f0;
    --red-100: #ffe1de;
    --red-200: #ffbcb5;
    --red-300: #ff8f84;
    --red-400: #ff5c4d;
    --red-500: #ff3b30;
    /* base — Apple System Red */
    --red-600: #e0271d;
    --red-700: #b81d15;
    --red-800: #8f1710;
    --red-900: #66100a;

    /* ── Yellow / Amber — Warning ──────────────────────────────
       Basis: Apple System Orange (#ff9500), bukan Ant Design
       orange (#ff9800) atau Tailwind amber-600
    ──────────────────────────────────────────────────────── */
    --amber-50: #fff6e8;
    --amber-100: #ffe9c2;
    --amber-200: #ffd68a;
    --amber-300: #ffbd52;
    --amber-400: #ffa526;
    --amber-500: #ff9500;
    /* base — Apple System Orange */
    --amber-600: #d97c00;
    --amber-700: #ad6200;
    --amber-800: #824900;
    --amber-900: #593200;

    /* ── Sky — Info ─────────────────────────────────────────────
       Basis: Apple System Teal/Sky (#5ac8fa), dibuat scale sendiri
       supaya beda persepsi dari Primary Blue
    ──────────────────────────────────────────────────────── */
    --sky-50: #eefaff;
    --sky-100: #d7f2ff;
    --sky-200: #ade4ff;
    --sky-300: #7ad2fb;
    --sky-400: #5ac8fa;
    /* base — Apple System Teal */
    --sky-500: #2ba9e0;
    --sky-600: #1c87ba;
    --sky-700: #166991;
    --sky-800: #114d69;
    --sky-900: #0b3345;

    /* ── Purple — Functional (Print) ───────────────────────────
       Basis: Apple System Purple (#af52de), diturunkan saturasi
    ──────────────────────────────────────────────────────── */
    --purple-50: #f8f1fc;
    --purple-100: #ecd9f7;
    --purple-200: #d9b2ef;
    --purple-300: #c186e4;
    --purple-400: #af52de;
    /* base — Apple System Purple */
    --purple-500: #953fc0;
    --purple-600: #7a329d;
    --purple-700: #602778;
    --purple-800: #461c56;
    --purple-900: #2f1239;

    /* ── Teal — Functional (View) ──────────────────────────────
       Basis: Apple-adjacent teal, dipisah dari Sky/Info supaya
       fungsi "view" & "info" tetap bisa dibedakan secara visual
    ──────────────────────────────────────────────────────── */
    --teal-50: #e7fbf9;
    --teal-100: #c3f3ee;
    --teal-200: #8fe6de;
    --teal-300: #55d3c8;
    --teal-400: #1cb8ab;
    --teal-500: #159489;
    --teal-600: #0f766c;
    --teal-700: #0b5951;

    /* ── Neutral — SATU scale untuk semua kebutuhan gray ────────
       Menggantikan neutral-* / gray-* / slate-* / zinc-* yang
       tadinya empat scale terpisah dengan fungsi tumpang tindih.
       Tone: sedikit hangat (Apple), bukan gray-biru dingin
       ala Tailwind slate.
    ──────────────────────────────────────────────────────── */
    --neutral-0: #ffffff;
    --neutral-50: #f9f9fa;
    --neutral-100: #f5f5f7;
    /* Apple gray — bg-page */
    --neutral-150: #ececee;
    --neutral-200: #e2e2e5;
    --neutral-300: #d1d1d6;
    /* border-strong */
    --neutral-400: #b8b8bd;
    --neutral-500: #86868b;
    /* Apple muted — text-tertiary */
    --neutral-600: #6e6e73;
    --neutral-700: #515154;
    /* readonly / secondary text */
    --neutral-800: #3a3a3c;
    --neutral-900: #1d1d1f;
    /* Apple dark — text-primary */
    --neutral-950: #0d0d0e;

    /* ── Navy — App-specific accent (Sidebar) ──────────────────
       Dipertahankan apa adanya — ini bukan generic neutral,
       tapi warna identitas navigasi
    ──────────────────────────────────────────────────────── */
    --navy-900: #303651;
    --navy-800: #4a5568;

    /* ── Shadow Colors ──────────────────────────────────────────
       Diturunkan opacity sedikit dan disamakan basisnya dengan
       scale warna baru di atas
    ──────────────────────────────────────────────────────── */
    --shadow-xs: rgba(0, 0, 0, 0.04);
    --shadow-sm: rgba(0, 0, 0, 0.07);
    --shadow-md: rgba(0, 0, 0, 0.09);
    --shadow-lg: rgba(0, 0, 0, 0.11);
    --shadow-xl: rgba(0, 0, 0, 0.14);
    --shadow-2xl: rgba(0, 0, 0, 0.18);

    --shadow-blue: rgba(0, 122, 255, 0.35);
    --shadow-green: rgba(52, 199, 89, 0.28);
    --shadow-red: rgba(255, 59, 48, 0.28);
    --shadow-amber: rgba(255, 149, 0, 0.30);
    --shadow-purple: rgba(175, 82, 222, 0.25);
    --shadow-teal: rgba(28, 184, 171, 0.28);

    /* ── Overlay / Backdrop ─────────────────────────────────────
    ──────────────────────────────────────────────────────── */
    --overlay-white-80: rgba(255, 255, 255, 0.80);
    --overlay-white-pill: rgba(255, 255, 255, 0.15);
    --overlay-white-divider: rgba(255, 255, 255, 0.25);
    --overlay-black-border: rgba(0, 0, 0, 0.08);
    --overlay-blue-focus: rgba(0, 122, 255, 0.08);
    --overlay-blue-focus-alt: rgba(0, 122, 255, 0.10);
}