/* Semua nilai visual ada di sini. Dark mode nanti: timpa variabel --color-* dan --shadow-*
   di dalam [data-theme="dark"] atau @media (prefers-color-scheme: dark). */
:root {
  color-scheme: light;

  /* warna */
  --color-bg: #f5f4f0;
  --color-surface: #ffffff;
  --color-surface-sunken: #eceae4;
  --color-text: #22211f;
  --color-text-muted: #6f6c66;
  --color-border: #e2dfd8;
  --color-border-strong: #cfcbc2;
  --color-hover: rgba(34, 33, 31, 0.06);
  --color-accent: #0e7a50;
  --color-accent-fill: var(--color-accent);
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #dcf3e6;
  --color-warn: #8f520a;
  --color-warn-soft: #fbf0d9;
  --color-backdrop: rgba(34, 33, 31, 0.32);
  --color-tooltip-bg: #22211f;
  --color-tooltip-text: #ffffff;
  --color-paper: #ffffff;
  --color-paper-text: #1b1b1a;
  --color-bubble-ai: #eceae4;
  --color-bubble-user: var(--color-accent-soft);
  --color-mascot-hi: #7ff0b0;
  --color-mascot-body: #2cc584;
  --color-mascot-lo: #0f8f5e;
  --color-mascot-eye: #fffdf6;
  --color-mascot-leaf: #86e27f;

  /* bayangan */
  --shadow-paper: 0 1px 2px rgba(34, 33, 31, 0.08), 0 8px 24px rgba(34, 33, 31, 0.06);
  --shadow-pop: 0 4px 12px rgba(34, 33, 31, 0.1), 0 16px 40px rgba(34, 33, 31, 0.1);
  --shadow-float: 0 1px 2px rgba(34, 33, 31, 0.08), 0 4px 12px rgba(34, 33, 31, 0.06);

  /* font */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-doc: "Times New Roman", Times, "Liberation Serif", serif;
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-md: 15px;
  --text-doc: 16px;
  --leading: 1.5;
  --leading-doc: 2;

  /* jarak */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 40px;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ukuran tata letak */
  --topbar-h: 56px;
  --rail-w: 56px;
  --a-chat-w: 440px;
  --a-chat-max: 680px;
  --a-top-h: 104px;
  --sidebar-w: 256px;
  --b-chat-max: 640px;
  --b-view-w: 46%;
  --paper-max: 794px;
  --icon-size: 20px;
  --hit: 36px;

  /* gerak */
  --dur: 0.22s;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}