/* ============================================================
   Ereader — Design Tokens
   Sumber kebenaran nilai desain (CSS custom properties).
   Lihat: Ereader-Obsidian/02-Design/Design-Tokens.md
   Warna disimpan sebagai channel RGB (tanpa rgb()) agar bisa
   dipakai dengan opacity Tailwind: rgb(var(--color-x) / <alpha>)
   ============================================================ */

:root {
  /* === Warna Netral (Light — default) === */
  --color-bg: 250 249 246;          /* #FAF9F6 off-white hangat */
  --color-surface: 255 255 255;     /* #FFFFFF kartu */
  --color-surface-alt: 245 243 239; /* #F5F3EF panel */
  --color-border: 229 224 216;      /* #E5E0D8 garis halus */
  --color-text: 41 37 36;           /* #292524 teks utama */
  --color-text-muted: 120 113 108;  /* #78716C teks sekunder */

  /* === Aksen (khas Readest) === */
  --color-primary: 234 88 12;        /* #EA580C orange-600 */
  --color-primary-hover: 194 65 12;  /* #C2410C orange-700 */
  --color-primary-fg: 255 255 255;   /* teks di atas aksen */

  /* === Status === */
  --color-success: 22 163 74;
  --color-warning: 202 138 4;
  --color-danger: 220 38 38;

  /* === Radius === */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* === Shadow (halus) === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 2px 8px -1px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.10);

  /* === Tipografi === */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Bitter", "Literata", Georgia, "Times New Roman", serif;
  --font-mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* === Layout === */
  --header-h: 3.5rem;
  --bottomnav-h: 3.5rem;
  --reader-max-width: 42rem;

  /* === Motion === */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* === Reader (default; dapat diubah pengguna) === */
  --reader-font-size: 18px;
  --reader-line-height: 1.6;
  --reader-font-family: var(--font-serif);
  --reader-text-align: left;
  --reader-para-spacing: 1em;
}

/* === Tema Gelap === */
html[data-theme="dark"] {
  --color-bg: 24 24 27;            /* #18181B */
  --color-surface: 39 39 42;       /* #27272A */
  --color-surface-alt: 32 32 35;
  --color-border: 63 63 70;        /* #3F3F46 */
  --color-text: 228 228 231;       /* #E4E4E7 */
  --color-text-muted: 161 161 170; /* #A1A1AA */
  --color-primary: 249 115 22;     /* #F97316 orange-500 */
  --color-primary-hover: 234 88 12;
  --color-primary-fg: 24 24 27;
}

/* === Tema Sepia === */
html[data-theme="sepia"] {
  --color-bg: 244 236 220;         /* #F4ECDC */
  --color-surface: 250 244 233;    /* #FAF4E9 */
  --color-surface-alt: 237 227 208;
  --color-border: 221 208 183;     /* #DDD0B7 */
  --color-text: 60 50 38;          /* #3C3226 */
  --color-text-muted: 124 110 90;  /* #7C6E5A */
  --color-primary: 194 65 12;      /* #C2410C */
  --color-primary-hover: 154 52 18;
  --color-primary-fg: 250 244 233;
}