/*
 * tokens.css — Sportify Design Tokens
 * SATU-SATUNYA sumber kebenaran untuk semua warna, spacing, font, dan radius.
 * Jangan define ulang variabel ini di file CSS atau halaman manapun.
 * Import file ini di head.php agar tersedia di seluruh aplikasi.
 */

:root {

  /* ── Warna Latar ── */
  --color-bg:        #001f3e;   /* latar utama app */
  --color-surface:   #001f3e;   /* card, panel */
  --color-surface-2: #1e4990;   /* card elevated / hover */
  --color-card:      #1e4990;   /* gradient card / panel — warna atas */
  --color-card-deep: #001f3e;   /* gradient card / panel — warna bawah */
  --color-shell:     #f6f8ec;   /* latar luar phone (desktop) */

  /* ── Warna Aksen Brand ── */
  --color-green:  #74c465;   /* aksen utama — Sportify green */
  --color-orange: #dbe64c;   /* aksen sekunder — highlight (lime) */
  --color-blue:   #38bdf8;   /* aksen tersier — tetap, tidak ada light blue di palette */
  --color-purple: #00804c;   /* aksen khusus (swipe/match) */
  --color-red:    #ef4444;   /* destruktif / error — tetap, wajib untuk UI */

  /* ── Warna Teks ── */
  --color-text:       #f6f8ec;   /* cream — dari palette */
  --color-text-dim:   #94a3b8;   /* label, placeholder */
  --color-text-muted: #64748b;   /* subtext, disabled */

  /* ── Border & Divider ── */
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.04);

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Padding horizontal halaman ── */
  --page-px: 20px;

  /* ── Navbar ── */
  --navbar-h:      68px;    /* tinggi bar navbar */
  --navbar-bottom: 20px;    /* jarak navbar dari bawah phone */
  --navbar-safe:   110px;   /* padding-bottom scroll area agar konten tidak ketutup navbar */

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ── Font ── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  /* ── Phone Shell (dipakai app-shell.css) ── */
  --phone-w:      390px;
  --phone-h:      844px;
  --phone-radius: 52px;   /* iPhone 15-style corner */
  --phone-frame:  #1c1c1e; /* warna bodi iPhone (Midnight Black) */
  --phone-frame-w: 12px;   /* tebal bingkai fisik */
  --phone-shadow:
      0 0 0 var(--phone-frame-w) var(--phone-frame),
      0 0 0 calc(var(--phone-frame-w) + 1px) rgba(255,255,255,0.12),
      0 32px 80px rgba(0, 0, 0, 0.7);
  --phone-border: 1px solid rgba(255, 255, 255, 0.06);

  /* ── Status bar (tinggi area Dynamic Island) ── */
  --statusbar-h: 54px;

  /* ── Notch safe spot ──────────────────────────────────────────────────
     .iphone-top adalah position:absolute (bukan flex item), sehingga
     semua halaman WAJIB memberi padding-top sebesar ini pada elemen
     pertama yang visible (header / top-fixed / top-bar) agar konten
     tidak tertimpa Dynamic Island.
     Formula: --statusbar-h (54px) + 4px buffer = 58px
  ──────────────────────────────────────────────────────────────────────── */
  --safe-top: 58px;

}