/* =============================================
   File: public/pwa/tokens.css
   Deskripsi: Design tokens TemanXplore PWA — single source of truth
   Tanggal: 2026-10-22
   Revisi: 2026-10-21 (S-10) — palette aligned logo (accent-text, warning, gradient-ring update)
   Revisi: 2026-10-22 (S-15) — palette premium: light primary #0066FF (Biru Elektrik) + accent #FF6600 (Oranye Vibrant);
           dark bg #0A0F1A / surface #131C2E / border #1E293B; token glow (--glow-blue, --glow-orange);
           shadow/gradient ikut warna baru; shadow dark pakai hitam (bayangan biru tidak terlihat di dark).
   ============================================= */
:root {
  /* ---------- 1. WARNA: BRAND ---------- */
  --primary: #0066FF;          /* aksi, branding (Biru Elektrik) */
  --primary-dark: #0052CC;     /* hover / pressed */
  --primary-light: #38BDF8;    /* bg, ring (Sky-400, ujung biru terang logo) */
  --on-primary: #FFFFFF;       /* teks di atas primary */
  --primary-text: #0066FF;     /* teks/ikon biru di atas surface (kontras ~4.8:1 di putih) */
  --accent: #FF6600;           /* story ring, badge, highlight (Oranye Vibrant) */
  --accent-dark: #E65C00;      /* pressed */
  --accent-light: #FBBF24;     /* Amber-400, ujung kuning logo (untuk gradient) */
  --accent-text: #C2410C;      /* teks/ikon oranye di atas surface (kontras >= 4.5:1) */

  /* ---------- 2. WARNA: STATUS ---------- */
  --info: #22D3EE;             /* live indicator, glow (Cyan-400) */
  --success: #10B981;          /* online dot, toast sukses (Green-500) */
  --success-text: #047857;     /* teks sukses di atas surface (kontras >= 4.5:1) */
  --warning: #F59E0B;          /* peringatan, ikon segitiga (Amber-500) */
  --warning-text: #B45309;     /* teks peringatan di atas surface (kontras >= 4.5:1) */
  --danger: #EF4444;           /* logout, blokir, error (Red-500) */
  --danger-solid: #DC2626;     /* background tombol destructive + teks putih (4.83:1) */
  --danger-text: #B91C1C;      /* teks error di atas surface (kontras >= 4.5:1) */
  --danger-soft: rgba(239, 68, 68, 0.10);

  /* ---------- 3. WARNA: NETRAL ---------- */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;    /* hanya dekoratif/placeholder (kontras rendah) */
  --bg: #F9FAFB;
  --surface: #FFFFFF;
  --surface-blur: rgba(255, 255, 255, 0.88);
  --border: #E5E7EB;
  --card-border: transparent;  /* dark mode: jadi --border supaya card terlihat */

  /* ---------- 4. GRADIENT (hanya story ring, FAB Xpose, badge, bg subtle) ---------- */
  --gradient-ring: linear-gradient(135deg, #38BDF8 0%, #0066FF 45%, #FF6600 55%, #FBBF24 100%);
  --gradient-soft: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, rgba(255, 102, 0, 0.08) 100%);

  /* ---------- 5. SHADOW & GLOW (berwarna, bukan hitam) ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 102, 255, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 102, 255, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 102, 255, 0.15);
  --shadow-accent: 0 4px 12px rgba(255, 102, 0, 0.20);
  --glow-primary: 0 0 0 4px rgba(0, 102, 255, 0.15);
  --glow-blue: 0 0 16px rgba(0, 102, 255, 0.4);     /* FAB Xplore, aksen neon biru */
  --glow-orange: 0 0 16px rgba(255, 102, 0, 0.4);   /* aksen neon oranye */

  /* ---------- 6. SKELETON ---------- */
  --skeleton-base: #E5E7EB;
  --skeleton-shine: rgba(255, 255, 255, 0.65);

  /* ---------- 7. SPACING (WAJIB pakai skala ini) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- 8. RADIUS ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ---------- 9. TIPOGRAFI ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --fs-12: 12px;  /* badge */
  --fs-13: 13px;  /* meta */
  --fs-14: 14px;  /* body small */
  --fs-15: 15px;  /* body */
  --fs-16: 16px;  /* body large / tombol */
  --fs-17: 17px;  /* heading card */
  --fs-20: 20px;  /* heading section */
  --fs-24: 24px;  /* heading page */
  --fs-32: 32px;  /* login title */
  --fs-48: 48px;  /* emoji ilustrasi (logo, empty state) */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --lh-heading: 1.3;
  --lh-body: 1.5;

  /* ---------- 10. MOTION ---------- */
  --motion-press: 120ms;       /* :active scale */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --stagger: 30ms;             /* jeda antar item list */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- 11. LAYOUT ---------- */
  --header-h: 48px;
  --nav-h: 60px;               /* tinggi pill nav (belum termasuk safe-area & jarak bawah 12px) */
  --tap-min: 44px;             /* tap target minimum */
  --content-max: 640px;
  --size-avatar: 56px;         /* avatar list */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 12. DARK MODE (hanya yang berubah) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0F1A;             /* hitam kebiruan pekat */
    --surface: #131C2E;        /* biru sangat gelap */
    --surface-blur: rgba(19, 28, 46, 0.88);
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --border: #1E293B;
    --card-border: #1E293B;
    --primary-text: #60A5FA;   /* biru terang agar terbaca di surface gelap */
    --accent-text: #FB923C;    /* oranye terang agar terbaca di surface gelap */
    --success-text: #34D399;
    --warning-text: #FBBF24;
    --danger-text: #FCA5A5;
    --danger-soft: rgba(239, 68, 68, 0.16);
    --skeleton-base: #1E293B;
    --skeleton-shine: rgba(255, 255, 255, 0.08);
    /* bayangan biru tidak terlihat di latar gelap -> pakai hitam */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  }
}