/* =============================================================
   TOKENS.CSS — Semantic Design Tokens (Apple-Clean Edition)
   Di-remap dari primitives-clean.css

   3-layer: primitives-clean.css → tokens.css → components

   Kategori:
   1. Color       — brand, semantic (success/danger/warning/info)
   2. Typography  — 4-level text hierarchy
   3. Surface     — 4 background layers
   4. Border      — 3 level + semantic
   5. Radius
   6. Shadow
   7. Interactive — focus & state
   8. Overlay
   9. Component   — spinner, toast, empty state, sidebar
   ============================================================= */


/* ── Light Mode ───────────────────────────────────────────── */
:root.light-mode {

    /* ────────────────────────────────────────────────────────
     1. COLOR — Brand & Semantic
     Satu token per role. Tidak ada "bright", "deep", "alt".
  ──────────────────────────────────────────────────────── */

    /* Brand — hijau utama produk (fixed, tidak diturunkan dari scale) */
    --color-brand: var(--brand-green);
    /* #00843d */
    --color-brand-hover: var(--brand-green-hover);
    /* #006e33 */
    --color-brand-subtle: var(--brand-green-subtle);
    /* #e6f4ed */
    --color-brand-on: var(--neutral-0);
    /* #ffffff */

    /* Primary — Apple System Blue untuk aksi interaktif & link */
    --color-primary: var(--blue-500);
    /* #007aff */
    --color-primary-hover: var(--blue-700);
    /* #0051d5 */
    --color-primary-subtle: var(--blue-50);
    /* #eef6ff */
    --color-primary-subtle-alt: var(--blue-100);
    /* #dcecff */
    --color-primary-on: var(--neutral-0);
    /* #ffffff */

    /* Semantic */
    --color-success: var(--green-600);
    /* #16913f */
    --color-success-hover: var(--green-700);
    /* #0f7433 */
    --color-success-subtle: var(--green-50);
    /* #eafbf0 */
    --color-success-border: var(--green-200);
    /* #a3ebbf */
    --color-success-vivid: var(--green-400);
    /* #34c759 — Apple System Green, dipakai utk ring/icon */
    --color-success-vivid-rgb: 52, 199, 89;
    --color-success-on: var(--neutral-0);

    --color-danger: var(--red-600);
    /* #e0271d */
    --color-danger-hover: var(--red-700);
    /* #b81d15 */
    --color-danger-subtle: var(--red-50);
    /* #fff1f0 */
    --color-danger-border: var(--red-200);
    /* #ffbcb5 */
    --color-danger-on: var(--neutral-0);

    --color-warning: var(--amber-600);
    /* #d97c00 */
    --color-warning-hover: var(--amber-700);
    /* #ad6200 */
    --color-warning-subtle: var(--amber-50);
    /* #fff6e8 */
    --color-warning-border: var(--amber-200);
    /* #ffd68a */
    --color-warning-vivid-rgba: 255, 149, 0;
    --color-warning-on: var(--neutral-0);

    --color-info: var(--sky-600);
    /* #1c87ba */
    --color-info-hover: var(--sky-700);
    /* #166991 */
    --color-info-subtle: var(--sky-50);
    /* #eefaff */
    --color-info-border: var(--sky-200);
    /* #ade4ff */
    --color-info-on: var(--neutral-0);

    /* Functional — untuk action button spesifik (view, print, review) */
    --color-view: var(--teal-400);
    /* #1cb8ab */
    --color-view-subtle: var(--teal-50);
    /* #e7fbf9 */
    --color-print: var(--purple-400);
    /* #af52de */
    --color-print-hover: var(--purple-600);
    /* #7a329d */
    --color-print-subtle: var(--purple-50);
    /* #f8f1fc */
    --color-review: var(--amber-500);
    /* #ff9500 — dipakai beda shade dari warning agar tetap bisa dibedakan */
    --color-review-subtle: var(--amber-50);
    /* #fff6e8 */

    --color-neutral: var(--neutral-500);
    /* #86868b */
    --color-neutral-hover: var(--neutral-700);
    /* #515154 */
    --color-neutral-subtle: var(--neutral-100);
    /* #f5f5f7 */
    --color-neutral-border: var(--neutral-200);
    /* #e2e2e5 */
    --color-neutral-on: var(--neutral-0);

    /* ────────────────────────────────────────────────────────
     2. TYPOGRAPHY — 4 level, tidak lebih

     primary   → heading, label, teks penting     #1d1d1f
     secondary → body paragraf                    #3a3a3c
     tertiary  → caption, meta, placeholder       #86868b  ← signature Apple
     disabled  → tidak aktif, readonly            #b8b8bd

     + inverse (teks di atas bg gelap/vivid)
     + semantic (link, brand, success, danger, warning, info)
  ──────────────────────────────────────────────────────── */
    --text-primary: var(--neutral-900);
    /* #1d1d1f */
    --text-secondary: var(--neutral-800);
    /* #3a3a3c */
    --text-tertiary: var(--neutral-500);
    /* #86868b */
    --text-disabled: var(--neutral-400);
    /* #b8b8bd */
    --text-inverse: var(--neutral-0);
    /* #ffffff — di atas fill gelap */
    --text-on-vivid: var(--neutral-900);
    /* #1d1d1f — di atas fill terang (green-400, amber-500) */

    --text-link: var(--color-primary);
    /* #007aff */
    --text-link-hover: var(--color-primary-hover);
    /* #0051d5 */
    --text-brand: var(--color-brand);
    /* #00843d */
    --text-success: var(--color-success);
    /* #16913f */
    --text-danger: var(--color-danger);
    /* #e0271d */
    --text-warning: var(--color-warning);
    /* #d97c00 */
    --text-info: var(--color-info);
    /* #1c87ba */

    /* ────────────────────────────────────────────────────────
     3. SURFACE — 4 layer background

     page   → canvas utama, paling luar             #f5f5f7
     base   → content area                          #ffffff
     card   → raised element di atas base           #ffffff + border
     subtle → secondary surface, hover state        #f9f9fa
  ──────────────────────────────────────────────────────── */
    --bg-page: var(--neutral-100);
    /* #f5f5f7 */
    --bg-base: var(--neutral-0);
    /* #ffffff */
    --bg-card: var(--neutral-0);
    /* #ffffff — pakai bareng --border-default */
    --bg-subtle: var(--neutral-50);
    /* #f9f9fa */

    /* Semantic surface — untuk alert, badge, banner */
    --bg-success: var(--color-success-subtle);
    /* #eafbf0 */
    --bg-danger: var(--color-danger-subtle);
    /* #fff1f0 */
    --bg-warning: var(--color-warning-subtle);
    /* #fff6e8 */
    --bg-info: var(--color-info-subtle);
    /* #eefaff */
    --bg-brand: var(--color-brand-subtle);
    /* #e6f4ed */

    /* Overlay */
    --bg-overlay: rgba(0, 0, 0, 0.40);
    --bg-tooltip: var(--neutral-800);
    /* #3a3a3c */
    --bg-backdrop: rgba(255, 255, 255, 0.80);

    /* Gradient */
    --bg-gradient-approval: linear-gradient(135deg, #f9fbff 0%, #eefaff 100%);
    --bg-gradient-section-divider: linear-gradient(90deg, transparent, #ececee 20%, #ececee 80%, transparent);

    /* ────────────────────────────────────────────────────────
     4. BORDER — 3 level + semantic + focus
  ──────────────────────────────────────────────────────── */
    --border-subtle: var(--neutral-150);
    /* #ececee — divider halus */
    --border-default: var(--neutral-200);
    /* #e2e2e5 — border card/input */
    --border-strong: var(--neutral-300);
    /* #d1d1d6 — border emphasis */
    --border-focus: var(--color-primary);
    /* #007aff */

    --border-success: var(--color-success-border);
    /* #a3ebbf */
    --border-danger: var(--color-danger-border);
    /* #ffbcb5 */
    --border-warning: var(--color-warning-border);
    /* #ffd68a */
    --border-info: var(--color-info-border);
    /* #ade4ff */
    --border-brand: var(--color-brand);
    /* #00843d */

    /* ────────────────────────────────────────────────────────
     5. RADIUS
  ──────────────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 999px;

    /* ────────────────────────────────────────────────────────
     6. SHADOW
  ──────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.11);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.14);

    /* Semantic shadow — untuk button fill */
    --shadow-primary: var(--shadow-blue);
    --shadow-brand: rgba(0, 132, 61, 0.25);
    --shadow-success: rgba(22, 145, 63, 0.20);
    --shadow-danger: rgba(224, 39, 29, 0.20);

    /* ────────────────────────────────────────────────────────
     7. INTERACTIVE — Focus & State
  ──────────────────────────────────────────────────────── */
    --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.10);
    --focus-ring-brand: 0 0 0 2px rgba(0, 132, 61, 0.25);

    --state-hover: var(--neutral-100);
    /* #f5f5f7 */
    --state-active: var(--color-primary-subtle);
    /* #eef6ff */
    --state-disabled: var(--neutral-100);
    /* #f5f5f7 */

    /* ────────────────────────────────────────────────────────
     8. COMPONENT TOKENS
     Hanya untuk komponen yang tidak bisa pakai token di atas
  ──────────────────────────────────────────────────────── */

    /* Spinner */
    --spinner-track: rgba(255, 255, 255, 0.30);
    --spinner-head: var(--neutral-0);

    /* Toast */
    --toast-bg: var(--neutral-0);
    --toast-border: rgba(0, 0, 0, 0.08);
    --toast-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
    --toast-title: var(--neutral-900);
    --toast-desc: var(--neutral-500);

    /* Empty state */
    --empty-bg: var(--neutral-0);
    --empty-border: var(--neutral-200);
    --empty-title: var(--neutral-900);
    --empty-desc: var(--neutral-500);

    /* Sidebar */
    --sidebar-text: var(--navy-900);
    /* #303651 */
    --sidebar-text-child: var(--navy-800);
    /* #4a5568 */
    --sidebar-active-bg: var(--brand-green);
    /* #00843d */

    --icon-sun-color: var(--amber-500);
}


/* ── Dark Mode ────────────────────────────────────────────── */
:root.dark-mode {

   /* ────────────────────────────────────────────────────────
     1. COLOR — Brand & Semantic
     Satu token per role. Tidak ada "bright", "deep", "alt".
  ──────────────────────────────────────────────────────── */

    /* Brand — hijau utama produk (fixed, tidak diturunkan dari scale) */
    --color-brand: var(--brand-green);
    /* #00843d */
    --color-brand-hover: var(--brand-green-hover);
    /* #006e33 */
    --color-brand-subtle: var(--brand-green-subtle);
    /* #e6f4ed */
    --color-brand-on: var(--neutral-0);
    /* #ffffff */

    /* Primary — Apple System Blue untuk aksi interaktif & link */
    --color-primary: var(--blue-500);
    /* #007aff */
    --color-primary-hover: var(--blue-700);
    /* #0051d5 */
    --color-primary-subtle: var(--blue-50);
    /* #eef6ff */
    --color-primary-subtle-alt: var(--blue-100);
    /* #dcecff */
    --color-primary-on: var(--neutral-0);
    /* #ffffff */

    /* Semantic */
    --color-success: var(--green-600);
    /* #16913f */
    --color-success-hover: var(--green-700);
    /* #0f7433 */
    --color-success-subtle: var(--green-50);
    /* #eafbf0 */
    --color-success-border: var(--green-200);
    /* #a3ebbf */
    --color-success-vivid: var(--green-400);
    /* #34c759 — Apple System Green, dipakai utk ring/icon */
    --color-success-vivid-rgb: 52, 199, 89;
    --color-success-on: var(--neutral-0);

    --color-danger: var(--red-600);
    /* #e0271d */
    --color-danger-hover: var(--red-700);
    /* #b81d15 */
    --color-danger-subtle: var(--red-50);
    /* #fff1f0 */
    --color-danger-border: var(--red-200);
    /* #ffbcb5 */
    --color-danger-on: var(--neutral-0);

    --color-warning: var(--amber-600);
    /* #d97c00 */
    --color-warning-hover: var(--amber-700);
    /* #ad6200 */
    --color-warning-subtle: var(--amber-50);
    /* #fff6e8 */
    --color-warning-border: var(--amber-200);
    /* #ffd68a */
    --color-warning-vivid-rgba: 255, 149, 0;
    --color-warning-on: var(--neutral-0);

    --color-info: var(--sky-600);
    /* #1c87ba */
    --color-info-hover: var(--sky-700);
    /* #166991 */
    --color-info-subtle: var(--sky-50);
    /* #eefaff */
    --color-info-border: var(--sky-200);
    /* #ade4ff */
    --color-info-on: var(--neutral-0);

    /* Functional — untuk action button spesifik (view, print, review) */
    --color-view: var(--teal-400);
    /* #1cb8ab */
    --color-view-subtle: var(--teal-50);
    /* #e7fbf9 */
    --color-print: var(--purple-400);
    /* #af52de */
    --color-print-hover: var(--purple-600);
    /* #7a329d */
    --color-print-subtle: var(--purple-50);
    /* #f8f1fc */
    --color-review: var(--amber-500);
    /* #ff9500 — dipakai beda shade dari warning agar tetap bisa dibedakan */
    --color-review-subtle: var(--amber-50);
    /* #fff6e8 */

    --color-neutral: var(--neutral-500);
    /* #86868b */
    --color-neutral-hover: var(--neutral-700);
    /* #515154 */
    --color-neutral-subtle: var(--neutral-100);
    /* #f5f5f7 */
    --color-neutral-border: var(--neutral-200);
    /* #e2e2e5 */
    --color-neutral-on: var(--neutral-0);

    /* ────────────────────────────────────────────────────────
     2. TYPOGRAPHY — 4 level, tidak lebih

     primary   → heading, label, teks penting     #1d1d1f
     secondary → body paragraf                    #3a3a3c
     tertiary  → caption, meta, placeholder       #86868b  ← signature Apple
     disabled  → tidak aktif, readonly            #b8b8bd

     + inverse (teks di atas bg gelap/vivid)
     + semantic (link, brand, success, danger, warning, info)
  ──────────────────────────────────────────────────────── */
    --text-primary: var(--neutral-900);
    /* #1d1d1f */
    --text-secondary: var(--neutral-800);
    /* #3a3a3c */
    --text-tertiary: var(--neutral-500);
    /* #86868b */
    --text-disabled: var(--neutral-400);
    /* #b8b8bd */
    --text-inverse: var(--neutral-0);
    /* #ffffff — di atas fill gelap */
    --text-on-vivid: var(--neutral-900);
    /* #1d1d1f — di atas fill terang (green-400, amber-500) */

    --text-link: var(--color-primary);
    /* #007aff */
    --text-link-hover: var(--color-primary-hover);
    /* #0051d5 */
    --text-brand: var(--color-brand);
    /* #00843d */
    --text-success: var(--color-success);
    /* #16913f */
    --text-danger: var(--color-danger);
    /* #e0271d */
    --text-warning: var(--color-warning);
    /* #d97c00 */
    --text-info: var(--color-info);
    /* #1c87ba */

    /* ────────────────────────────────────────────────────────
     3. SURFACE — 4 layer background

     page   → canvas utama, paling luar             #f5f5f7
     base   → content area                          #ffffff
     card   → raised element di atas base           #ffffff + border
     subtle → secondary surface, hover state        #f9f9fa
  ──────────────────────────────────────────────────────── */
    --bg-page: var(--neutral-100);
    /* #f5f5f7 */
    --bg-base: var(--neutral-0);
    /* #ffffff */
    --bg-card: var(--neutral-0);
    /* #ffffff — pakai bareng --border-default */
    --bg-subtle: var(--neutral-50);
    /* #f9f9fa */

    /* Semantic surface — untuk alert, badge, banner */
    --bg-success: var(--color-success-subtle);
    /* #eafbf0 */
    --bg-danger: var(--color-danger-subtle);
    /* #fff1f0 */
    --bg-warning: var(--color-warning-subtle);
    /* #fff6e8 */
    --bg-info: var(--color-info-subtle);
    /* #eefaff */
    --bg-brand: var(--color-brand-subtle);
    /* #e6f4ed */

    /* Overlay */
    --bg-overlay: rgba(0, 0, 0, 0.40);
    --bg-tooltip: var(--neutral-800);
    /* #3a3a3c */
    --bg-backdrop: rgba(255, 255, 255, 0.80);

    /* Gradient */
    --bg-gradient-approval: linear-gradient(135deg, #f9fbff 0%, #eefaff 100%);
    --bg-gradient-section-divider: linear-gradient(90deg, transparent, #ececee 20%, #ececee 80%, transparent);

    /* ────────────────────────────────────────────────────────
     4. BORDER — 3 level + semantic + focus
  ──────────────────────────────────────────────────────── */
    --border-subtle: var(--neutral-150);
    /* #ececee — divider halus */
    --border-default: var(--neutral-200);
    /* #e2e2e5 — border card/input */
    --border-strong: var(--neutral-300);
    /* #d1d1d6 — border emphasis */
    --border-focus: var(--color-primary);
    /* #007aff */

    --border-success: var(--color-success-border);
    /* #a3ebbf */
    --border-danger: var(--color-danger-border);
    /* #ffbcb5 */
    --border-warning: var(--color-warning-border);
    /* #ffd68a */
    --border-info: var(--color-info-border);
    /* #ade4ff */
    --border-brand: var(--color-brand);
    /* #00843d */

    /* ────────────────────────────────────────────────────────
     5. RADIUS
  ──────────────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 999px;

    /* ────────────────────────────────────────────────────────
     6. SHADOW
  ──────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.11);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.14);

    /* Semantic shadow — untuk button fill */
    --shadow-primary: var(--shadow-blue);
    --shadow-brand: rgba(0, 132, 61, 0.25);
    --shadow-success: rgba(22, 145, 63, 0.20);
    --shadow-danger: rgba(224, 39, 29, 0.20);

    /* ────────────────────────────────────────────────────────
     7. INTERACTIVE — Focus & State
  ──────────────────────────────────────────────────────── */
    --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.10);
    --focus-ring-brand: 0 0 0 2px rgba(0, 132, 61, 0.25);

    --state-hover: var(--neutral-100);
    /* #f5f5f7 */
    --state-active: var(--color-primary-subtle);
    /* #eef6ff */
    --state-disabled: var(--neutral-100);
    /* #f5f5f7 */

    /* ────────────────────────────────────────────────────────
     8. COMPONENT TOKENS
     Hanya untuk komponen yang tidak bisa pakai token di atas
  ──────────────────────────────────────────────────────── */

    /* Spinner */
    --spinner-track: rgba(255, 255, 255, 0.30);
    --spinner-head: var(--neutral-0);

    /* Toast */
    --toast-bg: var(--neutral-0);
    --toast-border: rgba(0, 0, 0, 0.08);
    --toast-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
    --toast-title: var(--neutral-900);
    --toast-desc: var(--neutral-500);

    /* Empty state */
    --empty-bg: var(--neutral-0);
    --empty-border: var(--neutral-200);
    --empty-title: var(--neutral-900);
    --empty-desc: var(--neutral-500);

    /* Sidebar */
    --sidebar-text: var(--navy-900);
    /* #303651 */
    --sidebar-text-child: var(--navy-800);
    /* #4a5568 */
    --sidebar-active-bg: var(--brand-green);
    /* #00843d */

    --icon-sun-color: var(--amber-500);
}