/* ==========================================================================
   WACANA — Design Tokens
   Palet rebrand: 000000 / FFFFFF / E7E9EB / CEE9B9 / ECA6FC
   Jangan hardcode warna di luar token ini di file CSS manapun.
   ========================================================================== */

:root {
  /* Warna brand mentah — jangan dipakai langsung di komponen, pakai token semantik di bawah */
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  --brand-gray: #E7E9EB;
  --brand-green: #CEE9B9;
  --brand-purple: #ECA6FC;

  /* Latar & permukaan */
  --color-bg: var(--brand-white);
  --color-surface: var(--brand-white);
  --color-surface-soft: var(--brand-gray);

  --color-border: var(--brand-gray);
  --color-border-strong: var(--brand-black);

  /* Teks */
  --color-text: var(--brand-black);
  --color-text-secondary: rgba(0, 0, 0, 0.62);
  --color-text-muted: rgba(0, 0, 0, 0.42);

  /* Elemen solid (tombol utama, avatar fallback) */
  --color-espresso: var(--brand-black);
  --color-espresso-soft: #1F1F1F;

  /* Aksen — ungu untuk like/highlight utama, hijau untuk repost/tag/sukses */
  --color-accent: var(--brand-purple);
  --color-accent-soft: #FBEAFE;
  --color-accent-green: var(--brand-green);
  --color-accent-green-soft: #EEF6E6;

  /* Status non-warna */
  --color-success: #3D6B2A;
  --color-warning: #8A7042;

  /* Tipografi */
  --font-display: 'Source Serif 4', 'Lora', Georgia, serif;
  --font-body: 'Source Sans 3', 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-display: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --fs-heading: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --fs-subheading: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-body-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-meta: 0.8125rem;

  --lh-reading: 1.7;
  --lh-tight: 1.3;
  --lh-normal: 1.5;

  /* Spacing — grid 8px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* Radius — dilebarkan supaya sudut kartu tidak tajam */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 28px;

  /* Elevasi — hanya untuk elemen mengambang */
  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.10);
  --shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.16);

  /* Transisi */
  --transition-color: 150ms ease;
  --transition-standard: 200ms ease;

  /* Lebar baca */
  --measure-reading: 640px;
  --measure-wide: 720px;

  /* Layout */
  --sidebar-width: 264px;
  --rail-width: 320px;
  --bottom-nav-height: 60px;
}

[data-theme="dark"] {
  --color-bg: #000000;
  --color-surface: #121212;
  --color-surface-soft: #1D1D1D;

  --color-border: #2A2A2A;
  --color-border-strong: #FFFFFF;

  --color-text: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.66);
  --color-text-muted: rgba(255, 255, 255, 0.42);

  --color-espresso: #FFFFFF;
  --color-espresso-soft: #E6E6E6;

  --color-accent: #F3C6FF;
  --color-accent-soft: #2B1930;
  --color-accent-green: #DCEFCB;
  --color-accent-green-soft: #17210F;

  --color-success: #9BCB82;
  --color-warning: #C4A063;

  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.55);
}