/* Tokens: satu-satunya tempat warna, ukuran, radius. Komponen hanya memakai var(). */
:root {
  --color-surface: #f7f5ef;
  --color-surface-raised: #ffffff;
  --color-surface-deep: #123d34;
  --color-text: #1b2623;
  --color-text-muted: #4a5753;
  --color-text-on-deep: #f4f1e8;
  --color-text-on-deep-muted: #cfd9d3;
  --color-border: #d9d4c5;
  --color-primary: #123d34;
  --color-primary-hover: #0c2a24;
  --color-cta: #e8832a;
  --color-cta-hover: #cf7019;
  --color-cta-text: #1b1206;
  --color-accent: #2a9d8f;
  --color-accent-subtle: #e4f2ef;
  --color-focus: #1a6fd1;
  --color-disabled-bg: #e7e3d6;
  --color-disabled-text: #5c635f;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: Georgia, "Times New Roman", serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.875rem, 6vw, 2.75rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-control: 0.5rem;
  --radius-card: 1rem;
  --radius-pill: 999px;

  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.05);
  --z-sticky: 20;
  --motion: 180ms ease;
  --tap: 2.75rem;
  --measure: 62ch;
  --wrap: 68rem;
  --border-w: 1px;
  --border-w-strong: 2px;
  --focus-w: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #0f1a17;
    --color-surface-raised: #172622;
    --color-surface-deep: #0a1512;
    --color-text: #eef0ea;
    --color-text-muted: #b9c4be;
    --color-border: #2c3d37;
    --color-primary: #7fd1c4;
    --color-primary-hover: #a3e0d6;
    --color-accent-subtle: #1b3530;
    --color-disabled-bg: #25322e;
    --color-disabled-text: #9aa8a2;
  }
}