/* tokens.css — Color system PRD §7.1 apa adanya. Dilarang menambah warna di luar token ini. */
:root {
  /* Aksen */
  --lime: #CDEC75;
  --lime-tint: #F8FFDE;
  --lime-line: #CDE293;

  /* Struktur gelap */
  --navy-900: #0A1825;
  --navy-800: #122231;
  --teal-900: #0E2431;
  --teal-800: #1C323D;
  --teal-600: #25424A;
  --teal-divider: #1E3944;

  /* Latar terang */
  --white: #FFFFFF;
  --offwhite: #FAF9F7;
  --hairline: #F4F4F4;

  /* Teks */
  --text-heading: #0A1825;
  --text-number: #1B3536;
  --text-body: #636B6E;
  --text-caption: #5D646C;
  --on-dark-heading: #FFFFFF;
  --on-dark-body: #D3E6ED;
  --on-dark-title: #ECFDF5;
  --on-dark-desc: #C1D8E0;
  --on-lime: #1D3623;

  /* Pendukung (PRD §7.1.1 --star, §7.1.4 status, tepi gradasi hero) */
  --star: #F4D474;
  --danger-bg: #FEE2E2;
  --danger-text: #B91C1C;
  --mist: #72878C;            /* placeholder gambar, drag handle (stop gradasi hero) */

  /* Gradasi */
  --grad-hero: linear-gradient(180deg, #0A1825 0%, #0C2732 20%, #2E4B53 41%, #72878C 61%, #C2CCCE 81%, #F4F4F4 96%, #FFFFFF 100%);
  --grad-card-dark: linear-gradient(135deg, #0E2431 0%, #25424A 100%);

  /* Semantik — mode terang */
  --bg: var(--white);
  --bg-alt: var(--offwhite);
  --surface: var(--white);
  --surface-2: var(--hairline);
  --border: var(--hairline);
  --text: var(--text-heading);
  --text-muted: var(--text-body);
  --text-cap: var(--text-caption);
  --text-num: var(--text-number);
  --code-bg: #0A1825;
  --focus: #0A1825;           /* cincin fokus di latar terang (Lime di atas putih tidak cukup kontras) */
  --pill-neutral-bg: var(--hairline);
  --pill-neutral-text: var(--text-caption);
  --btn2-border: var(--navy-800);
  --btn2-text: var(--navy-900);
  --btn2-bg: var(--white);
  --overlay: rgba(10, 24, 37, 0.6);
}

:root[data-theme="dark"] {
  --bg: #0A1825;
  --bg-alt: #0E2431;
  --surface: #122231;
  --surface-2: #1C323D;
  --border: #1E3944;
  --text: #ECFDF5;
  --text-muted: #C1D8E0;
  --text-cap: #C1D8E0;
  --text-num: #ECFDF5;
  --code-bg: #0E2431;
  --focus: #CDEC75;
  --pill-neutral-bg: #1C323D;
  --pill-neutral-text: #C1D8E0;
  --btn2-border: #D3E6ED;
  --btn2-text: #FFFFFF;
  --btn2-bg: transparent;
}