/* =========================================================
   DESIGN TOKENS — ubah 1 baris di sini, semua layar ikut berubah
   Gaya: mirip Discord. Tema terang di :root, tema gelap di [data-theme="dark"].
   ========================================================= */
:root {
  /* Warna merek (sama di kedua tema) */
  --primary: #5865F2;
  /* Abu saklar mati (gaya Discord), sama di kedua tema */
  --switch-off: #80848E;
  --primary-hover: #4752C4;
  --on-primary: #FFFFFF;
  --success: #23A55A;
  --verified: #1E9BF0;
  --supporter: #EB459E;
  --official: #E0A42B;
  --youtube: #FF0033;
  /* Hati suka (keputusan pemilik 31 Okt 2026: merah, bukan primary) */
  --like: #F23F43;
  /* Latar layar foto penuh (PhotoViewer), sama di kedua tema */
  --viewer: #000000;
  /* Tombol "Lanjutkan dengan Google" (pedoman merek Google, sama di kedua tema) */
  --google-bg: #FFFFFF;
  --google-ink: #1F1F1F;
  --google-line: #DADCE0;

  /* Warna avatar bawaan */
  --av0: #5865F2;
  --av1: #F47B67;
  --av2: #3BA0F5;
  --av3: #9B59F6;
  --av4: #23A55A;
  --av5: #EB459E;
  --av6: #E0A42B;

  /* Tema TERANG — konten putih, kartu abu sangat muda, bar putih bergaris, kolom input putih bergaris */
  --bg: #FFFFFF;            /* latar utama (area pesan) */
  --bg-2: #F4F5F7;          /* kartu, embed, reaksi */
  --bg-3: #E9EBEE;          /* pill, chip, track progres */
  --bar: #FFFFFF;           /* app bar, navigasi bawah, sidebar panel */
  --field: #FFFFFF;         /* isi kolom input */
  --field-line: #D4D7DC;    /* garis kolom input (gelap: tanpa garis) */
  --hover: #F0F1F3;
  --ink: #313338;           /* teks isi */
  --ink-2: #1A1B1E;         /* judul & nama */
  --muted: #5C5E66;
  --line: #E3E5E8;
  --btn-2: #E9EBEE;         /* tombol sekunder */
  --on-btn-2: #313338;
  --link: #006CE7;
  --danger: #DA373C;
  --warn: #A06A00;
  --primary-soft: #ECEEFE;
  --danger-soft: #FCE8E9;
  --warn-soft: #FDF3DC;
  --info-soft: #E1F1FD;
  --success-soft: #E3F5EA;
  --official-soft: #FBF0DA;
  --scrim: rgba(0, 0, 0, .5);

  /* Tipografi */
  --font: 'Roboto', system-ui, sans-serif;
  --fs-2xs: 10px; /* label Resmi/Tim (.tag) */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14.5px;
  --fs-lg: 17px;
  --fs-xl: 24px;

  /* Bentuk */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  /* Tombol + navigasi bawah + sorotan tab terpilih (52x36); kolom komentar bulat (keputusan pemilik 31 Okt 2026) */
  --r-nav: 12px;
  --r-composer: 24px;

  /* Jarak nama → centang biru → lencana (gaya verified badge IG/TikTok/X; gambar lencana tanpa margin) */
  --badge-gap: 4px;

  /* Foto postingan (PostPhotos): celah grid thumbnail, kotak pratinjau di Buat Postingan */
  --photo-gap: 2px;
  --photo-pick: 72px;

  /* Frame foto profil (A13): kanvas 1,5x diameter avatar; slot sama di tiap daftar */
  --frame-scale: 1.5;
  --av-feed: 60px;
  --av-comment: 51px;
  --av-profile: 144px;

  /* Ukuran HP */
  --phone-w: 360px;
  --phone-h: 760px;
  --phone-r: 28px;
  --appbar-h: 54px;
  --nav-h: 62px;

  /* Workspace */
  --canvas: #E9E9E9;
  --canvas-dot: #CFCFCF;
  --frame-gap: 72px;
}

/* Tema GELAP */
[data-theme="dark"] {
  --bg: #313338;
  --bg-2: #2B2D31;
  --bg-3: #1E1F22;
  --bar: #2B2D31;
  --field: #1E1F22;
  --field-line: transparent;
  --hover: #393C41;
  --ink: #DBDEE1;
  --ink-2: #F2F3F5;
  --muted: #949BA4;
  --line: #3F4147;
  --btn-2: #4E5058;
  --on-btn-2: #FFFFFF;
  --link: #00A8FC;
  --danger: #F23F43;
  --warn: #F0B232;
  --primary-soft: rgba(88, 101, 242, .18);
  --danger-soft: rgba(242, 63, 67, .14);
  --warn-soft: rgba(240, 178, 50, .13);
  --info-soft: rgba(0, 168, 252, .13);
  --success-soft: rgba(35, 165, 90, .15);
  --official-soft: rgba(224, 164, 43, .15);
  --scrim: rgba(0, 0, 0, .65);
  /* Aksen blurple terang, hanya tema gelap: teks di atas latar gelap.
     Di Android, tambahkan ke Color.kt saat komponen terkait dibangun (A5). */
  --primary-light: #8E97FF;
  --primary-pale: #C9CDFB;
}