/* Design tokens: warna, radius, bayangan, spasi, gerak. Palet diambil dari logo (hijau hutan, krem, terakota). */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* spasi (kelipatan 4px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  /* radius */
  --r-xs: 8px; --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-pill: 999px;
  /* tipografi */
  --f-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  /* gerak */
  --d-fast: 150ms; --d: 200ms; --d-slow: 250ms; --ease: cubic-bezier(.2, .7, .2, 1);

  /* warna: terang */
  --bg: #f6efe3; --bg-2: #efe6d6;
  --surface: rgba(255, 255, 255, .74); --surface-solid: #fffdf8; --surface-2: rgba(47, 93, 74, .07); --surface-3: rgba(47, 93, 74, .12);
  --line: rgba(47, 93, 74, .16); --line-strong: rgba(47, 93, 74, .32);
  --ink: #17261f; --ink-2: #40504a; --ink-3: #5b6a63;
  --brand: #2f5d4a; --brand-2: #3d7a60; --brand-ink: #ffffff; --brand-soft: rgba(47, 93, 74, .12);
  --accent: #a4432e; --accent-fill: #c8614a; --accent-soft: rgba(200, 97, 74, .14);
  --good: #1d6f48; --good-soft: rgba(29, 111, 72, .13);
  --warn: #85530a; --warn-soft: rgba(196, 130, 20, .17);
  --bad: #a8281f; --bad-soft: rgba(168, 40, 31, .12);
  --info: #2a5f86; --info-soft: rgba(42, 95, 134, .12);
  /* seri grafik */
  --c1: #2f5d4a; --c2: #c8614a; --c3: #d9a441; --c4: #3b7ea1; --c5: #8a6bb0; --c6: #6e9f5a; --c7: #b9788a; --c8: #7a7a6a; --c-netral: #8f9a93;
  --glow-1: rgba(47, 93, 74, .22); --glow-2: rgba(200, 97, 74, .17); --glow-3: rgba(217, 164, 65, .14);
  --shadow-1: 0 1px 2px rgba(23, 38, 31, .06), 0 6px 18px rgba(23, 38, 31, .06);
  --shadow-2: 0 2px 4px rgba(23, 38, 31, .08), 0 18px 44px rgba(23, 38, 31, .12);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .8);
  --scrim: rgba(18, 28, 23, .5);
  --kaca: blur(16px) saturate(1.15);
}
/* Tema gelap: dipasang lewat dua jalur dengan nilai yang sama (ikut sistem, atau dipilih manual di Pengaturan). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]):not([data-tema="gelap"]) {
    color-scheme: dark;
    --bg: #0c1511; --bg-2: #101c17;
    --surface: rgba(30, 48, 40, .55); --surface-solid: #14211b; --surface-2: rgba(120, 190, 160, .09); --surface-3: rgba(120, 190, 160, .16);
    --line: rgba(150, 210, 182, .16); --line-strong: rgba(150, 210, 182, .36);
    --ink: #ecf3ee; --ink-2: #bccbc2; --ink-3: #94a89d;
    --brand: #63c9a0; --brand-2: #86dcb9; --brand-ink: #06231a; --brand-soft: rgba(99, 201, 160, .15);
    --accent: #f0937a; --accent-fill: #e0785e; --accent-soft: rgba(240, 147, 122, .16);
    --good: #6fd6a0; --good-soft: rgba(111, 214, 160, .15);
    --warn: #efc067; --warn-soft: rgba(239, 192, 103, .15);
    --bad: #ff9b92; --bad-soft: rgba(255, 155, 146, .15);
    --info: #86bfe4; --info-soft: rgba(134, 191, 228, .15);
    --c1: #63c9a0; --c2: #f0937a; --c3: #e8bf6a; --c4: #7bb7dc; --c5: #b79be0; --c6: #9fd184; --c7: #e39db0; --c8: #b3b39f; --c-netral: #6f8478;
    --glow-1: rgba(70, 170, 130, .26); --glow-2: rgba(224, 120, 94, .16); --glow-3: rgba(232, 191, 106, .1);
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 26px rgba(0, 0, 0, .35);
    --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(0, 0, 0, .5);
    --hi: inset 0 1px 0 rgba(255, 255, 255, .07);
    --scrim: rgba(0, 0, 0, .62);
  }
}
:root[data-tema="gelap"] {
  color-scheme: dark;
  --bg: #0c1511; --bg-2: #101c17;
  --surface: rgba(30, 48, 40, .55); --surface-solid: #14211b; --surface-2: rgba(120, 190, 160, .09); --surface-3: rgba(120, 190, 160, .16);
  --line: rgba(150, 210, 182, .16); --line-strong: rgba(150, 210, 182, .36);
  --ink: #ecf3ee; --ink-2: #bccbc2; --ink-3: #94a89d;
  --brand: #63c9a0; --brand-2: #86dcb9; --brand-ink: #06231a; --brand-soft: rgba(99, 201, 160, .15);
  --accent: #f0937a; --accent-fill: #e0785e; --accent-soft: rgba(240, 147, 122, .16);
  --good: #6fd6a0; --good-soft: rgba(111, 214, 160, .15);
  --warn: #efc067; --warn-soft: rgba(239, 192, 103, .15);
  --bad: #ff9b92; --bad-soft: rgba(255, 155, 146, .15);
  --info: #86bfe4; --info-soft: rgba(134, 191, 228, .15);
  --c1: #63c9a0; --c2: #f0937a; --c3: #e8bf6a; --c4: #7bb7dc; --c5: #b79be0; --c6: #9fd184; --c7: #e39db0; --c8: #b3b39f; --c-netral: #6f8478;
  --glow-1: rgba(70, 170, 130, .26); --glow-2: rgba(224, 120, 94, .16); --glow-3: rgba(232, 191, 106, .1);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 26px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(0, 0, 0, .5);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .62);
}