/* token desain, jangan hardcode warna di file lain, ambil dari sini */

:root {
  /* warna dasar, terinspirasi dari kertas dan tinta, biar tenang dipandang lama */
  --color-paper: #f6f7f2;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-ink: #1b231f;
  --color-ink-soft: #4b5650;
  --color-ink-faint: #828d86;
  --color-border: #e3e6dd;
  --color-border-strong: #cdd2c5;

  /* warna brand, ungu royal buat identitas utama, emas buat aksen yang butuh perhatian */
  --color-brand: #5b3a8c;
  --color-brand-strong: #43296b;
  --color-brand-soft: #efe7f8;
  --color-accent: #d9a441;
  --color-accent-strong: #b8842a;
  --color-accent-soft: #fbf0db;

  /* warna status */
  --color-danger: #c1463a;
  --color-danger-soft: #fbeae7;
  --color-success: #2f7d5e;
  --color-success-soft: #e6f3ec;

  /* palet kategori event, dipakai bergantian, jangan ditambah sembarangan biar konsisten */
  --color-cat-sage: #6f8f6a;
  --color-cat-slate: #51687a;
  --color-cat-clay: #b56b4c;
  --color-cat-plum: #7c5b80;
  --color-cat-mustard: #c79a3b;
  --color-cat-teal: #3f8079;

  /* tipografi */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.3rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.4rem;

  /* jarak, pakai skala kelipatan 4 biar rapi */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(27, 35, 31, 0.04), 0 4px 12px rgba(27, 35, 31, 0.06);
  --shadow-raised: 0 4px 8px rgba(27, 35, 31, 0.06), 0 12px 32px rgba(27, 35, 31, 0.1);
  --shadow-floating: 0 16px 48px rgba(27, 35, 31, 0.18);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;

  --header-height: 64px;
  --sidebar-width: 264px;
}

[data-theme="dark"] {
  --color-paper: #15181a;
  --color-surface: #1c2023;
  --color-surface-raised: #21262a;
  --color-ink: #eef0ea;
  --color-ink-soft: #b6bdb6;
  --color-ink-faint: #7c857d;
  --color-border: #2b3134;
  --color-border-strong: #393f42;
  --color-brand: #b290e0;
  --color-brand-strong: #c9aceb;
  --color-brand-soft: #2c2138;
  --color-accent: #e7b860;
  --color-accent-soft: #2e2718;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-raised: 0 4px 8px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-floating: 0 16px 48px rgba(0, 0, 0, 0.5);
}