/* ==========================================================================
   OP BOOBLE — DESIGN TOKENS
   --------------------------------------------------------------------------
   Satu-satunya sumber nilai desain (warna, tipografi, spacing, radius,
   shadow, motion, z-index). File CSS lain WAJIB memakai var(--app-*) dan
   tidak menulis nilai hex / px "mentah" kecuali untuk kasus khusus.

   Urutan load (lihat application/views/admin/index.php):
     vendor (Datta Able / Bootstrap 4.1)
       -> app/tokens.css      (file ini)
       -> app/base.css        (reset & tipografi dasar)
       -> app/layout.css      (sidebar, header, container)
       -> app/components.css  (card, tabel, form, select2, badge, dll)
       -> app/utilities.css   (helper kecil pengganti inline style)
       -> pages/<modul>/<halaman>.css (khusus 1 halaman, di-scope)

   Prefix --app-* dipakai agar tidak bentrok dengan variabel Bootstrap
   (--blue, --primary, ...) maupun variabel lokal halaman (--att-*, --db-*).
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       0. Palet primitif (skala netral). Dipakai oleh token semantik di
       bawah; di komponen utamakan token semantik bila maknanya cocok.
       ---------------------------------------------------------------------- */
    --app-slate-50:         #f8fafc;
    --app-slate-100:        #f1f5f9;
    --app-slate-200:        #e2e8f0;
    --app-slate-300:        #cbd5e1;
    --app-slate-400:        #94a3b8;
    --app-slate-500:        #64748b;
    --app-slate-600:        #475569;
    --app-slate-700:        #334155;
    --app-slate-900:        #0f172a;

    --app-gray-500:         #6b7280;
    --app-gray-600:         #4b5563;
    --app-gray-800:         #1f2937;

    /* ----------------------------------------------------------------------
       1. Warna — brand
       ---------------------------------------------------------------------- */
    --app-primary:          #3158e8;
    --app-primary-strong:   #2447c9;
    --app-primary-soft:     #edf3ff;
    --app-navy:             #173f70;
    --app-navy-strong:      #123256;
    --app-gradient-brand:   linear-gradient(135deg, #153f76 0%, #345ce8 100%);

    /* ----------------------------------------------------------------------
       2. Warna — status (solid / soft background / teks di atas soft)
       ---------------------------------------------------------------------- */
    --app-success:          #10b981;
    --app-success-soft:     #e9f8f2;
    --app-success-text:     #16845f;
    --app-success-border:   #bdebdc;
    --app-success-muted:    #d5f7eb;   /* latar icon di atas success-soft */

    --app-info:             #0aa7e8;
    --app-info-soft:        #e8f5ff;
    --app-info-text:        #0278ad;

    --app-warning:          #f59e0b;
    --app-warning-soft:     #fef3c7;
    --app-warning-text:     #b45309;

    --app-danger:           #ef4444;
    --app-danger-soft:      #fee2e2;
    --app-danger-text:      #dc2626;

    --app-neutral:          #64748b;
    --app-neutral-soft:     #f1f5f9;
    --app-neutral-text:     #475569;

    /* Aksen tambahan: versi "strong" untuk teks/icon di atas latar putih,
       "subtle" untuk latar panel peringatan/informasi yang sangat lembut. */
    --app-success-strong:   #0d9a68;
    --app-danger-strong:    #d94c5d;
    --app-danger-subtle:    #fff0f1;
    --app-warning-strong:   #d98800;
    --app-warning-subtle:   #fff6e8;
    --app-info-strong:      #159bc9;
    --app-info-subtle:      #e3f3fa;
    --app-link:             #1f6fd1;
    --app-purple:           #7657d6;
    --app-purple-soft:      #efe9ff;

    /* ----------------------------------------------------------------------
       3. Warna — teks, permukaan, garis
       ---------------------------------------------------------------------- */
    --app-heading:          #243b5a;
    --app-text:             #2f435e;
    --app-text-soft:        #52647c;
    --app-muted:            #7c8ca1;
    --app-label:            #5b6f8a;   /* label form & header tabel (uppercase kecil) */
    --app-icon-accent:      #3f78bd;   /* icon dekoratif di judul card / chip */
    --app-placeholder:      #a3afbf;
    --app-on-primary:       #ffffff;

    --app-bg:               #f4f7fa;   /* = background body Datta Able */
    --app-surface:          #ffffff;
    --app-surface-soft:     #f7f9fc;
    --app-surface-subtle:   #fbfcfe;   /* header card, chip, baris selang-seling */
    --app-surface-muted:    #f8fafc;
    --app-surface-hover:    #f8fbff;

    --app-border:           #e2e8f0;
    --app-border-soft:      #edf1f5;
    --app-border-strong:    #dbe3ed;   /* border input */

    /* ----------------------------------------------------------------------
       3a. Tabel data (DataTables)
       ---------------------------------------------------------------------- */
    --app-table-head-bg:        #f5f8fc;
    --app-table-head-text:      var(--app-label);
    --app-table-head-border:    #dfe7f0;
    --app-table-text:           #344c68;
    --app-table-border:         var(--app-border-soft);
    --app-table-row-alt:        var(--app-surface-subtle);
    --app-table-row-hover:      #f2f7fd;

    /* ----------------------------------------------------------------------
       3b. Sidebar (tema gelap navy)
       ---------------------------------------------------------------------- */
    --app-sidebar-bg:           #172235;
    --app-sidebar-brand-bg:     #131d2d;
    --app-sidebar-divider:      #2b3a50;
    --app-sidebar-shadow:       8px 0 26px rgba(15, 23, 42, .10);

    --app-sidebar-title:        var(--app-slate-50);
    --app-sidebar-toggle:       #aebed1;
    --app-sidebar-scrollbar:    rgba(255, 255, 255, .18);

    --app-sidebar-link:         #b9c7d8;
    --app-sidebar-link-hover:   #ffffff;
    --app-sidebar-icon:         #8ea2bb;
    --app-sidebar-caret:        #8295ac;
    --app-sidebar-hover-bg:     #202f46;
    --app-sidebar-active-bg:    #223b59;
    --app-sidebar-active-border: rgba(56, 189, 248, .16);

    --app-sidebar-sublink:      #98aabd;
    --app-sidebar-sublink-hover: #eef7ff;
    --app-sidebar-subicon:      #7489a3;
    --app-sidebar-sub-hover-bg: #1e2e44;
    --app-sidebar-sub-active-bg: #20364f;

    --app-sidebar-accent:       #38bdf8;   /* garis penanda menu aktif */
    --app-sidebar-accent-icon:  #6dd4ff;   /* icon menu aktif */
    --app-sidebar-accent-hover: #5cc8f6;   /* icon saat hover */

    /* ----------------------------------------------------------------------
       4. Tipografi
       Skala dibuat mengikuti ukuran yang paling sering dipakai di halaman
       (10.5–13px untuk UI padat). Heading memakai clamp() agar fluid.
       ---------------------------------------------------------------------- */
    --app-font-sans:        "Open Sans", -apple-system, BlinkMacSystemFont,
                            "Segoe UI", Roboto, Arial, sans-serif;
    --app-font-mono:        Consolas, Monaco, "Courier New", monospace;

    --app-fs-3xs:           9px;    /* hanya untuk label super-padat di mobile */
    --app-fs-2xs:           10px;
    --app-fs-xs:            11px;
    --app-fs-sm:            12px;
    --app-fs-base:          13px;
    --app-fs-md:            14px;
    --app-fs-lg:            clamp(15px, 0.35vw + 14px, 16px);
    --app-fs-xl:            clamp(17px, 0.6vw + 14px, 20px);
    --app-fs-2xl:           clamp(20px, 1vw + 15px, 24px);
    --app-fs-kpi:           clamp(20px, 1.4vw + 12px, 28px);

    --app-fw-regular:       400;
    --app-fw-medium:        500;
    --app-fw-semibold:      600;
    --app-fw-bold:          700;
    --app-fw-heavy:         800;

    --app-lh-tight:         1.2;
    --app-lh-base:          1.45;
    --app-lh-relaxed:       1.6;

    /* ----------------------------------------------------------------------
       5. Spacing (basis 4px)
       ---------------------------------------------------------------------- */
    --app-space-0:          0;
    --app-space-1:          4px;
    --app-space-2:          8px;
    --app-space-3:          12px;
    --app-space-4:          16px;
    --app-space-5:          20px;
    --app-space-6:          24px;
    --app-space-8:          32px;
    --app-space-10:         40px;

    /* Padding halaman & card yang menyesuaikan viewport */
    --app-gutter:           clamp(12px, 2vw, 24px);
    --app-card-padding:     clamp(14px, 1.6vw, 20px);

    /* ----------------------------------------------------------------------
       6. Radius
       ---------------------------------------------------------------------- */
    --app-radius-xs:        4px;
    --app-radius-sm:        6px;
    --app-radius-md:        8px;
    --app-radius-lg:        10px;
    --app-radius-xl:        14px;
    --app-radius-pill:      999px;

    /* ----------------------------------------------------------------------
       7. Shadow (warna dasar navy lembut, bukan hitam)
       ---------------------------------------------------------------------- */
    --app-shadow-xs:        0 1px 2px rgba(31, 54, 84, .05);
    --app-shadow-sm:        0 5px 18px rgba(31, 54, 84, .05);
    --app-shadow-md:        0 8px 28px rgba(31, 54, 84, .08);
    --app-shadow-lg:        0 12px 32px rgba(15, 23, 42, .16);
    --app-shadow-brand:     0 7px 14px rgba(49, 88, 232, .18);
    --app-focus-ring:       0 0 0 3px rgba(49, 88, 232, .22);

    /* ----------------------------------------------------------------------
       8. Motion
       ---------------------------------------------------------------------- */
    --app-ease:             cubic-bezier(.2, .7, .3, 1);
    --app-duration-fast:    .15s;
    --app-duration:         .2s;
    --app-transition:       var(--app-duration) var(--app-ease);

    /* ----------------------------------------------------------------------
       9. Layering (disamakan dengan nilai yang sudah dipakai layout)
       ---------------------------------------------------------------------- */
    --app-z-dropdown:       1000;
    --app-z-sticky:         1020;
    --app-z-backdrop:       1045;
    --app-z-modal:          1050;
    --app-z-toast:          1080;
    --app-z-loader:         9999;

    /* ----------------------------------------------------------------------
       10. Breakpoint (REFERENSI — CSS variable tidak bisa dipakai di @media)
       Gunakan nilai berikut di semua file agar konsisten dengan Bootstrap 4:
         mobile kecil  : max-width: 480px
         mobile        : max-width: 767px
         tablet        : max-width: 991px
         desktop kecil : max-width: 1199px
       ---------------------------------------------------------------------- */
}