/**
 * tokens.css
 * Design token system untuk UI Builder (bukan tema hasil export — itu terpisah, Fase 4).
 *
 * Palet: "Signal & Spark" — orange (koneksi/link) + amber (aksi/tarik perhatian),
 * di atas kanvas netral hangat. Dipilih spesifik untuk tool "link-in-bio builder",
 * bukan palet default (bukan cream+terracotta, bukan near-black+neon-hijau).
 *
 * Tipografi: Fraunces (display, judul section) + Inter (UI/body) + IBM Plex
 * Mono (data/label utilitas: jumlah tab, ID, dsb). Logotype "Etalaku" sendiri
 * sekarang gambar WebP (src/assets/logo-etalaku.webp), bukan teks berfont —
 * tidak butuh font wordmark terpisah lagi.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Matikan kedipan kotak abu-abu/biru bawaan browser mobile saat elemen
   di-tap (-webkit-tap-highlight-color) — muncul di HAMPIR SEMUA tombol,
   saklar, dan elemen interaktif lain (link, input, dsb) karena browser
   memberi highlight itu secara default ke elemen apa pun yang bisa di-tap,
   bukan cuma <button>. Style :active/:hover kustom kita sendiri sudah cukup
   untuk feedback visual, jadi highlight bawaan ini aman dimatikan total. */
html {
  -webkit-tap-highlight-color: transparent;
}
* {
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* --- Tipografi --- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Spacing scale --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* --- Aksen (signal dipakai sama di light & dark; spark/danger/success
     di-override per-tema di bawah karena rasio kontrasnya berbeda cukup
     jauh di atas latar terang vs gelap — lihat blok LIGHT MODE & DARK MODE) --- */
  --signal: #ff6a1a;      /* orange — aksi utama, koneksi/link */
  --signal-2: #ff8a3d;    /* orange lebih terang — ujung gradasi aksen */
  --signal-deep: #e0530f; /* orange lebih gelap — hover/active state, teks di atas signal-soft */
  --signal-soft: #ffe8d9; /* dipakai di light mode untuk bg lembut */
  --gradient-signal: linear-gradient(135deg, var(--signal-2), var(--signal) 55%, var(--signal-deep));
  --spark: #ffb648;       /* amber — highlight, drag handle aktif (nilai default/dark) */
  --danger: #e5484d;
  --success: #2fae7a;

  /* --- Sidebar width --- */
  --sidebar-w: 320px;
  --topbar-h: 56px;

  /* --- Elevation scale (depth halus, dipakai bertahap mulai Fase 3; diberi
     sedikit rona hangat alih-alih abu netral supaya terasa menyatu dengan
     aksen alih-alih shadow SaaS generik) --- */
  --elevation-1: 0 1px 2px rgba(40,20,10,0.05);
  --elevation-2: 0 3px 10px rgba(40,20,10,0.08), 0 1px 3px rgba(40,20,10,0.06);
  --elevation-3: 0 10px 28px rgba(40,20,10,0.13), 0 3px 8px rgba(40,20,10,0.08);
  --elevation-4: 0 22px 56px rgba(40,20,10,0.2), 0 6px 16px rgba(40,20,10,0.12);
  --elevation-signal: 0 6px 16px rgba(255,106,26,0.28), 0 2px 5px rgba(255,106,26,0.22);

  /* --- Motion (durasi & easing konsisten untuk transisi/animasi UI) --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* --- Z-index scale (mencegah tumpang-tindih layer: dropdown/modal/toast) --- */
  --z-dropdown: 100;
  --z-sidebar: 200;
  --z-overlay: 300;
  --z-modal: 310;
  --z-toast: 400;

  /* --- Overlay (dipakai modal/drawer kustom mulai Fase 2) --- */
  --overlay-bg: rgba(15, 15, 20, 0.5);
  --overlay-blur: 8px;              /* blur tampilan di belakang overlay (modal & drawer sidebar) */

  /* --- Glassmorphism auth (background fullframe alur registrasi) ---
     Sama nilainya di light & dark — panel tetap 90% opaque terlepas dari
     tema, kontras teks dijaga lewat overlay foto (lihat auth.css) alih-alih
     mengubah alpha panel per-tema. */
  --auth-glass-bg-alpha: 12%;       /* panel tipis/transparan (glassmorphism) — cuma tint halus, bukan solid */
  --auth-glass-border-alpha: 0.14;  /* border tipis, hanya aksen */
  --auth-glass-blur: 18px;          /* blur backdrop, cukup untuk pisahkan panel dari foto, tidak berlebihan */
}

/* ================= LIGHT MODE (default) ================= */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #faf9f6;
  --bg-gradient: radial-gradient(ellipse 1200px 640px at 15% -10%, #fff2e7 0%, transparent 55%), var(--bg);
  --panel: #ffffff;
  --panel-alt: #f2f1ec;
  --border: #e6e3da;
  --border-soft: #efece3;
  --text: #17171c;
  --text-muted: #57575f;
  --text-faint: #707077;
  --text-hint: #9a9aa3;  /* deskripsi, contoh/placeholder: lebih muda dari --text-faint */
  --shadow: 0 1px 2px rgba(23,23,28,0.04), 0 4px 16px rgba(23,23,28,0.06);

  /* Amber/merah/hijau bawaan (#ffb648/#e5484d/#2fae7a) terlalu terang untuk
     dipakai sebagai teks/ikon di atas latar putih (rasio kontras di bawah
     3:1, ada yang sampai ~1.7:1 — nyaris tidak kebaca). Digelapkan khusus
     untuk light mode supaya semua teks & ikon status (error, sukses, drag
     indicator) tetap kebaca jelas; nilai asli tetap dipakai di dark mode
     karena di sana kontrasnya sudah cukup. */
  --spark: #a86a08;
  --danger: #c4262d;
  --success: #1a7a51;
}

/* ================= DARK MODE ================= */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121216;
  --bg-gradient: radial-gradient(ellipse 1200px 640px at 15% -10%, #2a1a10 0%, transparent 55%), var(--bg);
  --panel: #1b1b21;
  --panel-alt: #202027;
  --border: #2c2c35;
  --border-soft: #26262e;
  --text: #ecebe8;
  --text-muted: #a3a3ab;
  --text-faint: #84848c;
  --text-hint: #74747d;
  --signal-2: #ff9a56;
  --signal-deep: #ff7a2e;
  --signal-soft: #4a2810;
  --spark: #ffb648;
  --danger: #e5484d;
  --success: #2fae7a;
  --shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.35);

  --elevation-1: 0 1px 2px rgba(0,0,0,0.25);
  --elevation-2: 0 3px 10px rgba(0,0,0,0.34), 0 1px 3px rgba(0,0,0,0.26);
  --elevation-3: 0 10px 28px rgba(0,0,0,0.44), 0 3px 8px rgba(0,0,0,0.32);
  --elevation-4: 0 22px 56px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.38);
  --elevation-signal: 0 6px 18px rgba(255,106,26,0.35), 0 2px 6px rgba(255,106,26,0.28);
  --overlay-bg: rgba(0, 0, 0, 0.65);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* body sendiri tidak perlu scroll — semua area scroll ada di dalam .app (sidebar, canvas, dst), ini juga mencegah dokumen ikut "menggelembung" saat swipe-down di HP */
  overscroll-behavior-y: none; /* matikan gesture "swipe down to refresh" bawaan Chrome/Safari mobile di level dokumen */
  background: var(--bg-gradient);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--signal); color: white; }

/* Keyboard focus harus selalu terlihat jelas */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}