/* ============================================================
   tokens.css — Design tokens (sumber: DESIGN.md / tokens.json)
   Satu-satunya tempat mendefinisikan warna, tipografi, spacing,
   radius, dan tema. Jangan hardcode nilai di file lain.
   ============================================================ */

:root {
  /* --- Colors (DESIGN.md: Tokens — Colors) --- */
  --color-highlighter-yellow: #e4f222;
  --color-ink: #0c0a08;
  --color-obsidian: #1a1919;
  --color-paper: #ffffff;
  --color-bone: #f4f2f0;
  --color-ash: #6d6c6b;
  --color-hairline: #e5e7eb;
  --color-smoke: #d3d3d3;

  /* --- Typography --- */
  --font-lausanne: 'lausanne', 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-caption: 10px;
  --leading-caption: 2.2;
  --tracking-caption: 0.018em;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.17;
  --text-heading: 28px;
  --leading-heading: 1.14;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.05;
  --text-display: 64px;
  --leading-display: 1;
  --font-weight-regular: 400;

  /* --- Spacing (base 4px) --- */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-128: 128px;

  /* --- Radii: hanya 6 / 10 / 12 / 16 (DESIGN.md Do's) --- */
  --radius-tags: 6px;
  --radius-buttons: 6px;
  --radius-inputs: 10px;
  --radius-wash: 12px;
  --radius-cards: 16px;

  /* --- Elevation: inset frost saja, tanpa drop shadow --- */
  --shadow-subtle: rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset;

  /* --- Surfaces --- */
  --surface-canvas: #f4f2f0;
  --surface-card: #ffffff;
  --surface-wash: #f4f2f0;
  --surface-inverted: #1a1919;
  --surface-action: #e4f222;

  /* --- Semantic tokens (dipakai komponen; di-remap per tema) --- */
  --bg: var(--surface-canvas);
  --card-bg: var(--surface-card);
  --text: var(--color-ink);
  --text-muted: var(--color-ash);
  --border: var(--color-hairline);
  --accent: var(--color-highlighter-yellow);
  --accent-text: var(--color-ink);
  --inverted-bg: var(--color-obsidian);
  --inverted-text: var(--color-paper);
  --input-border: rgba(33, 33, 33, 0.1);

  /* --- Layout --- */
  --page-max-width: 1200px;
  --nav-height: 62px;

  color-scheme: light;
}

/* Tema gelap: tetap monochrome; highlighter tetap satu-satunya warna */
[data-theme="dark"] {
  --bg: var(--color-ink);
  --card-bg: var(--color-obsidian);
  --surface-wash: #242220;
  --text: #f4f2f0;
  --text-muted: #9a9896;
  --border: #2e2c2a;
  --input-border: rgba(255, 255, 255, 0.14);
  --shadow-subtle: rgba(255, 255, 255, 0.08) 0px 0px 2px 0px inset;
  color-scheme: dark;
}