/* EZurance Design System v0.1 — token. Sumber tunggal nilai; dokumentasi di DESIGN.md.
   Tingkat: primitif (per merek) -> semantik (dipakai komponen) -> komponen.
   Jangan menulis hex/px mentah di luar berkas ini. */

/* ---------- Font ---------- */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

:root {
  /* ---------- Primitif: merek EZurance ---------- */
  --ez-50: #EEF0FF;  --ez-100: #E0E3FF; --ez-200: #C4C8FF; --ez-300: #A9AEFF; --ez-400: #7C83F5;
  --ez-600: #0712CD; --ez-700: #0509B4; --ez-800: #00059F; --ez-900: #02046B;

  /* ---------- Primitif: netral & status ---------- */
  --neutral-0: #FFFFFF;  --neutral-25: #F7F8FB; --neutral-50: #F0F2F7; --neutral-100: #E5E8F0;
  --neutral-200: #D3D8E3; --neutral-300: #B3BAC9; --neutral-400: #868FA3; --neutral-500: #5F687C;
  --neutral-600: #454D5E; --neutral-700: #2E3442; --neutral-800: #1C202B; --neutral-900: #12151D; --neutral-950: #0B0D13;
  --amber-100: #FFF1D6; --amber-500: #F5A524; --amber-800: #7A4A00;
  --green-100: #DDF5EA; --green-600: #0B7D52; --green-800: #0A5C3D;
  --orange-100: #FFEBD9; --orange-600: #C2560A; --orange-800: #7F3606;
  --red-100: #FDE3E5; --red-600: #C42A3C; --red-800: #8A1726;

  /* ---------- Semantik: terang ---------- */
  --surface-base: var(--neutral-25);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-brand: var(--ez-600);
  --surface-brand-deep: var(--ez-800);
  --surface-brand-soft: var(--ez-50);
  --surface-overlay: rgba(11, 13, 19, 0.48);

  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-on-brand: var(--neutral-0);
  --text-on-brand-muted: var(--ez-100);
  --text-brand: var(--ez-600);
  --text-brand-strong: var(--ez-900);

  --border-default: var(--neutral-100);
  --border-strong: var(--neutral-400);
  --border-brand: var(--ez-600);

  --action-primary: var(--ez-600);
  --action-primary-hover: var(--ez-700);
  --action-primary-press: var(--ez-800);
  --action-on-primary: var(--neutral-0);
  --action-soft: var(--ez-100);
  --action-on-soft: var(--ez-900);
  --action-disabled: var(--neutral-100);
  --action-on-disabled: var(--neutral-500);
  --focus-ring: var(--ez-600);

  --status-success: var(--green-600); --status-success-soft: var(--green-100); --status-success-text: var(--green-800);
  --status-warning: var(--orange-600); --status-warning-soft: var(--orange-100); --status-warning-text: var(--orange-800);
  --status-danger: var(--red-600);   --status-danger-soft: var(--red-100);    --status-danger-text: var(--red-800);
  --status-info: var(--ez-600);      --status-info-soft: var(--ez-50);       --status-info-text: var(--ez-900);
  --accent-warm: var(--amber-500);   --accent-warm-soft: var(--amber-100);   --accent-warm-text: var(--amber-800);
  --accent-on-warm: var(--neutral-800);

  /* ---------- Tipografi ---------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: 2rem;    --lh-display: 2.5rem;
  --fs-amount: 1.75rem;  --lh-amount: 2.25rem;
  --fs-h1: 1.5rem;       --lh-h1: 2rem;
  --fs-h2: 1.25rem;      --lh-h2: 1.75rem;
  --fs-h3: 1rem;         --lh-h3: 1.5rem;
  --fs-body: 1rem;       --lh-body: 1.5rem;
  --fs-sm: 0.875rem;     --lh-sm: 1.25rem;
  --fs-xs: 0.75rem;      --lh-xs: 1rem;
  --fs-overline: 0.75rem; --lh-overline: 1rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.01em; --tracking-caps: 0.06em;

  /* ---------- Ruang (basis 4) ---------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-14: 3.5rem; --sp-16: 4rem; --sp-20: 5rem;

  /* ---------- Bentuk ---------- */
  --r-sm: 0.5rem; --r-md: 0.75rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 999px;
  --border-w: 1px; --focus-w: 2px; --focus-offset: 2px;
  --target-min: 3rem;      /* 48 px sasaran sentuh */
  --icon-sm: 1.25rem;      /* 20 px */
  --icon-md: 1.5rem;       /* 24 px */
  --icon-box: 2.5rem;      /* 40 px kotak ikon di daftar */
  --shadow-float: 0 -4px 16px rgba(11, 13, 19, 0.08);
  --shadow-sheet: 0 -8px 32px rgba(11, 13, 19, 0.16);
  --card-ratio: 1.586;     /* kartu polis ISO ID-1 */

  /* ---------- Gerak ---------- */
  --dur-micro: 120ms; --dur-std: 200ms; --dur-emph: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Tata letak ---------- */
  --gutter: var(--sp-4);
  --content-max: 75rem;    /* 1200 px web */
  --tabbar-h: 4rem;
  --btn-min: 8rem;         /* 128 px lebar minimum tombol di web */

  /* ---------- Komponen (override terarah) ---------- */
  --policy-card-from: var(--ez-600);
  --policy-card-to: var(--ez-800);
  --header-home-bg: var(--ez-600);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 0ms; --dur-std: 0ms; --dur-emph: 0ms; }
}