/*
 * DIHASILKAN OTOMATIS oleh generate-color-tokens.mts — jangan diedit manual.
 * Seed #0071E3 · variant tonal-spot · spec 2025 · @material/material-color-utilities
 * Peran warna: https://m3.material.io/styles/color/roles — dark mode via light-dark() + color-scheme.
 */
@layer tokens, base, components, utilities;
@layer tokens {
:root {
  --md-sys-color-primary: light-dark(#475f8b, #b5c7ed);
  --md-sys-color-on-primary: light-dark(#f9f8ff, #2f4060);
  --md-sys-color-primary-container: light-dark(#b4ccfe, #415373);
  --md-sys-color-on-primary-container: light-dark(#2b446d, #d8e3ff);
  --md-sys-color-inverse-primary: light-dark(#b4ccfe, #4e5f81);
  --md-sys-color-secondary: light-dark(#575f72, #bec6dc);
  --md-sys-color-on-secondary: light-dark(#f9f8ff, #384052);
  --md-sys-color-secondary-container: light-dark(#dae2f9, #333b4d);
  --md-sys-color-on-secondary-container: light-dark(#495264, #b7bfd5);
  --md-sys-color-tertiary: light-dark(#675881, #ecdcff);
  --md-sys-color-on-tertiary: light-dark(#fef7ff, #5a4a73);
  --md-sys-color-tertiary-container: light-dark(#e0ccfd, #e0ccfd);
  --md-sys-color-on-tertiary-container: light-dark(#51426a, #51426a);
  --md-sys-color-error: light-dark(#a83836, #fa746f);
  --md-sys-color-on-error: light-dark(#fff7f6, #490006);
  --md-sys-color-error-container: light-dark(#fa746f, #871f21);
  --md-sys-color-on-error-container: light-dark(#6e0a12, #ff9993);
  --md-sys-color-background: light-dark(#faf9fe, #0d0e12);
  --md-sys-color-on-background: light-dark(#2f323a, #e3e5f0);
  --md-sys-color-surface: light-dark(#faf9fe, #0d0e12);
  --md-sys-color-surface-dim: light-dark(#d7dae4, #0d0e12);
  --md-sys-color-surface-bright: light-dark(#faf9fe, #292c34);
  --md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
  --md-sys-color-surface-container-low: light-dark(#f3f3fa, #111318);
  --md-sys-color-surface-container: light-dark(#ededf6, #171a1f);
  --md-sys-color-surface-container-high: light-dark(#e6e8f1, #1d2026);
  --md-sys-color-surface-container-highest: light-dark(#e0e2ed, #22262d);
  --md-sys-color-on-surface: light-dark(#2f323a, #e3e5f0);
  --md-sys-color-surface-variant: light-dark(#e0e2ed, #22262d);
  --md-sys-color-on-surface-variant: light-dark(#5c5f68, #a8abb5);
  --md-sys-color-inverse-surface: light-dark(#0d0e12, #faf9fe);
  --md-sys-color-inverse-on-surface: light-dark(#9c9ca2, #545559);
  --md-sys-color-outline: light-dark(#787a84, #72757e);
  --md-sys-color-outline-variant: light-dark(#afb2bc, #454850);
  --md-sys-color-shadow: light-dark(#000000, #000000);
  --md-sys-color-scrim: light-dark(#000000, #000000);
  --md-sys-color-surface-tint: light-dark(#475f8b, #b5c7ed);
  --md-sys-color-primary-fixed: light-dark(#b4ccfe, #c6d7ff);
  --md-sys-color-primary-fixed-dim: light-dark(#a7bff0, #b8caf0);
  --md-sys-color-on-primary-fixed: light-dark(#153058, #263857);
  --md-sys-color-on-primary-fixed-variant: light-dark(#354d77, #435475);
  --md-sys-color-secondary-fixed: light-dark(#dae2f9, #dae2f9);
  --md-sys-color-secondary-fixed-dim: light-dark(#ccd4ea, #ccd4ea);
  --md-sys-color-on-secondary-fixed: light-dark(#373f51, #373f51);
  --md-sys-color-on-secondary-fixed-variant: light-dark(#535c6e, #535c6e);
  --md-sys-color-tertiary-fixed: light-dark(#e0ccfd, #e0ccfd);
  --md-sys-color-tertiary-fixed-dim: light-dark(#d2beee, #d2beee);
  --md-sys-color-on-tertiary-fixed: light-dark(#3d2f56, #3d2f56);
  --md-sys-color-on-tertiary-fixed-variant: light-dark(#5a4b74, #5a4b74);
}
  :root { color-scheme: light dark; }
  :root[data-theme='light'] { color-scheme: light; }
  :root[data-theme='dark'] { color-scheme: dark; }
  @media (prefers-contrast: more) {
    :root {
      --md-sys-color-primary: light-dark(#04234b, #dbe5ff);
      --md-sys-color-on-primary: light-dark(#cadaff, #1a2c4a);
      --md-sys-color-primary-container: light-dark(#3a527d, #92a4c9);
      --md-sys-color-on-primary-container: light-dark(#ffffff, #000000);
      --md-sys-color-inverse-primary: light-dark(#b4ccfe, #263857);
      --md-sys-color-secondary: light-dark(#1b2434, #dde5fc);
      --md-sys-color-on-secondary: light-dark(#d2daf0, #242c3d);
      --md-sys-color-secondary-container: light-dark(#4a5264, #9ba4b8);
      --md-sys-color-on-secondary-container: light-dark(#ffffff, #000000);
      --md-sys-color-tertiary: light-dark(#2b1c42, #eee0ff);
      --md-sys-color-on-tertiary: light-dark(#e5d2ff, #33254b);
      --md-sys-color-tertiary-container: light-dark(#5a4b74, #e0ccfd);
      --md-sys-color-on-tertiary-container: light-dark(#ffffff, #26183d);
      --md-sys-color-error: light-dark(#510007, #ffdedb);
      --md-sys-color-on-error: light-dark(#ffcfcb, #60000a);
      --md-sys-color-error-container: light-dark(#972b2b, #ff7c76);
      --md-sys-color-on-error-container: light-dark(#ffffff, #000000);
      --md-sys-color-background: light-dark(#faf9fe, #0d0e12);
      --md-sys-color-on-background: light-dark(#000000, #ffffff);
      --md-sys-color-surface: light-dark(#faf9fe, #0d0e12);
      --md-sys-color-surface-dim: light-dark(#d7dae4, #0d0e12);
      --md-sys-color-surface-bright: light-dark(#faf9fe, #292c34);
      --md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
      --md-sys-color-surface-container-low: light-dark(#f3f3fa, #111318);
      --md-sys-color-surface-container: light-dark(#ededf6, #171a1f);
      --md-sys-color-surface-container-high: light-dark(#e6e8f1, #1d2026);
      --md-sys-color-surface-container-highest: light-dark(#e0e2ed, #22262d);
      --md-sys-color-on-surface: light-dark(#000000, #ffffff);
      --md-sys-color-surface-variant: light-dark(#e0e2ed, #22262d);
      --md-sys-color-on-surface-variant: light-dark(#21242b, #e3e5f0);
      --md-sys-color-inverse-surface: light-dark(#0d0e12, #faf9fe);
      --md-sys-color-inverse-on-surface: light-dark(#ffffff, #000000);
      --md-sys-color-outline: light-dark(#3f434b, #b6b8c2);
      --md-sys-color-outline-variant: light-dark(#4f525b, #a1a3ad);
      --md-sys-color-shadow: light-dark(#000000, #000000);
      --md-sys-color-scrim: light-dark(#000000, #000000);
      --md-sys-color-surface-tint: light-dark(#04234b, #dbe5ff);
      --md-sys-color-primary-fixed: light-dark(#3a527d, #c6d7ff);
      --md-sys-color-primary-fixed-dim: light-dark(#2e4670, #b8caf0);
      --md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
      --md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001432);
      --md-sys-color-secondary-fixed: light-dark(#4a5264, #dae2f9);
      --md-sys-color-secondary-fixed-dim: light-dark(#3e4758, #ccd4ea);
      --md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
      --md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #171f30);
      --md-sys-color-tertiary-fixed: light-dark(#5a4b74, #e0ccfd);
      --md-sys-color-tertiary-fixed-dim: light-dark(#4e3f67, #d2beee);
      --md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
      --md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #17082e);
}
  }
  :root[data-contrast='medium'] {
    --md-sys-color-primary: light-dark(#2a436c, #b5c7ed);
    --md-sys-color-on-primary: light-dark(#c9daff, #243655);
    --md-sys-color-primary-container: light-dark(#5d75a2, #637597);
    --md-sys-color-on-primary-container: light-dark(#ffffff, #ffffff);
    --md-sys-color-inverse-primary: light-dark(#b4ccfe, #445576);
    --md-sys-color-secondary: light-dark(#3a4355, #bec6dc);
    --md-sys-color-on-secondary: light-dark(#d1daf0, #2e3647);
    --md-sys-color-secondary-container: light-dark(#6c7588, #6c7588);
    --md-sys-color-on-secondary-container: light-dark(#ffffff, #ffffff);
    --md-sys-color-tertiary: light-dark(#4a3c63, #ecdcff);
    --md-sys-color-on-tertiary: light-dark(#e4d2ff, #504169);
    --md-sys-color-tertiary-container: light-dark(#7e6d98, #e0ccfd);
    --md-sys-color-on-tertiary-container: light-dark(#ffffff, #473860);
    --md-sys-color-error: light-dark(#811b1d, #ff9f99);
    --md-sys-color-on-error: light-dark(#ffceca, #60000a);
    --md-sys-color-error-container: light-dark(#c54d4a, #c54d4a);
    --md-sys-color-on-error-container: light-dark(#ffffff, #ffffff);
    --md-sys-color-background: light-dark(#faf9fe, #0d0e12);
    --md-sys-color-on-background: light-dark(#21242b, #ffffff);
    --md-sys-color-surface: light-dark(#faf9fe, #0d0e12);
    --md-sys-color-surface-dim: light-dark(#d7dae4, #0d0e12);
    --md-sys-color-surface-bright: light-dark(#faf9fe, #292c34);
    --md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
    --md-sys-color-surface-container-low: light-dark(#f3f3fa, #111318);
    --md-sys-color-surface-container: light-dark(#ededf6, #171a1f);
    --md-sys-color-surface-container-high: light-dark(#e6e8f1, #1d2026);
    --md-sys-color-surface-container-highest: light-dark(#e0e2ed, #22262d);
    --md-sys-color-on-surface: light-dark(#21242b, #ffffff);
    --md-sys-color-surface-variant: light-dark(#e0e2ed, #22262d);
    --md-sys-color-on-surface-variant: light-dark(#3f434b, #b6b8c2);
    --md-sys-color-inverse-surface: light-dark(#0d0e12, #faf9fe);
    --md-sys-color-inverse-on-surface: light-dark(#c4c4c9, #37383c);
    --md-sys-color-outline: light-dark(#5c5f68, #90939d);
    --md-sys-color-outline-variant: light-dark(#787a84, #72757e);
    --md-sys-color-shadow: light-dark(#000000, #000000);
    --md-sys-color-scrim: light-dark(#000000, #000000);
    --md-sys-color-surface-tint: light-dark(#2a436c, #b5c7ed);
    --md-sys-color-primary-fixed: light-dark(#5d75a2, #c6d7ff);
    --md-sys-color-primary-fixed-dim: light-dark(#516894, #b8caf0);
    --md-sys-color-on-primary-fixed: light-dark(#ffffff, #001432);
    --md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #263857);
    --md-sys-color-secondary-fixed: light-dark(#6c7588, #dae2f9);
    --md-sys-color-secondary-fixed-dim: light-dark(#60687b, #ccd4ea);
    --md-sys-color-on-secondary-fixed: light-dark(#ffffff, #171f30);
    --md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #373f51);
    --md-sys-color-tertiary-fixed: light-dark(#7e6d98, #e0ccfd);
    --md-sys-color-tertiary-fixed-dim: light-dark(#71618b, #d2beee);
    --md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #17082e);
    --md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #3d2f56);
}
  :root[data-contrast='high'] {
    --md-sys-color-primary: light-dark(#04234b, #dbe5ff);
    --md-sys-color-on-primary: light-dark(#cadaff, #1a2c4a);
    --md-sys-color-primary-container: light-dark(#3a527d, #92a4c9);
    --md-sys-color-on-primary-container: light-dark(#ffffff, #000000);
    --md-sys-color-inverse-primary: light-dark(#b4ccfe, #263857);
    --md-sys-color-secondary: light-dark(#1b2434, #dde5fc);
    --md-sys-color-on-secondary: light-dark(#d2daf0, #242c3d);
    --md-sys-color-secondary-container: light-dark(#4a5264, #9ba4b8);
    --md-sys-color-on-secondary-container: light-dark(#ffffff, #000000);
    --md-sys-color-tertiary: light-dark(#2b1c42, #eee0ff);
    --md-sys-color-on-tertiary: light-dark(#e5d2ff, #33254b);
    --md-sys-color-tertiary-container: light-dark(#5a4b74, #e0ccfd);
    --md-sys-color-on-tertiary-container: light-dark(#ffffff, #26183d);
    --md-sys-color-error: light-dark(#510007, #ffdedb);
    --md-sys-color-on-error: light-dark(#ffcfcb, #60000a);
    --md-sys-color-error-container: light-dark(#972b2b, #ff7c76);
    --md-sys-color-on-error-container: light-dark(#ffffff, #000000);
    --md-sys-color-background: light-dark(#faf9fe, #0d0e12);
    --md-sys-color-on-background: light-dark(#000000, #ffffff);
    --md-sys-color-surface: light-dark(#faf9fe, #0d0e12);
    --md-sys-color-surface-dim: light-dark(#d7dae4, #0d0e12);
    --md-sys-color-surface-bright: light-dark(#faf9fe, #292c34);
    --md-sys-color-surface-container-lowest: light-dark(#ffffff, #000000);
    --md-sys-color-surface-container-low: light-dark(#f3f3fa, #111318);
    --md-sys-color-surface-container: light-dark(#ededf6, #171a1f);
    --md-sys-color-surface-container-high: light-dark(#e6e8f1, #1d2026);
    --md-sys-color-surface-container-highest: light-dark(#e0e2ed, #22262d);
    --md-sys-color-on-surface: light-dark(#000000, #ffffff);
    --md-sys-color-surface-variant: light-dark(#e0e2ed, #22262d);
    --md-sys-color-on-surface-variant: light-dark(#21242b, #e3e5f0);
    --md-sys-color-inverse-surface: light-dark(#0d0e12, #faf9fe);
    --md-sys-color-inverse-on-surface: light-dark(#ffffff, #000000);
    --md-sys-color-outline: light-dark(#3f434b, #b6b8c2);
    --md-sys-color-outline-variant: light-dark(#4f525b, #a1a3ad);
    --md-sys-color-shadow: light-dark(#000000, #000000);
    --md-sys-color-scrim: light-dark(#000000, #000000);
    --md-sys-color-surface-tint: light-dark(#04234b, #dbe5ff);
    --md-sys-color-primary-fixed: light-dark(#3a527d, #c6d7ff);
    --md-sys-color-primary-fixed-dim: light-dark(#2e4670, #b8caf0);
    --md-sys-color-on-primary-fixed: light-dark(#ffffff, #000000);
    --md-sys-color-on-primary-fixed-variant: light-dark(#ffffff, #001432);
    --md-sys-color-secondary-fixed: light-dark(#4a5264, #dae2f9);
    --md-sys-color-secondary-fixed-dim: light-dark(#3e4758, #ccd4ea);
    --md-sys-color-on-secondary-fixed: light-dark(#ffffff, #000000);
    --md-sys-color-on-secondary-fixed-variant: light-dark(#ffffff, #171f30);
    --md-sys-color-tertiary-fixed: light-dark(#5a4b74, #e0ccfd);
    --md-sys-color-tertiary-fixed-dim: light-dark(#4e3f67, #d2beee);
    --md-sys-color-on-tertiary-fixed: light-dark(#ffffff, #000000);
    --md-sys-color-on-tertiary-fixed-variant: light-dark(#ffffff, #17082e);
}
}