/* Token desain BERANI CHECK-UP (PRD §9.3–9.4), disesuaikan dengan palet brand BERANI
   (primary #628FF4 / sky #4BA8DA, skala 12 langkah). Teks putih hanya di atas brand 600+. */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-800.woff2') format('woff2'); }
/* Montserrat — huruf wordmark logo BERANI, dipakai untuk judul merek */
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('../assets/fonts/montserrat-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url('../assets/fonts/montserrat-800.woff2') format('woff2'); }

:root {
  --brand-50: #F1F5FE;
  --brand-100: #E0EAFE;
  --brand-200: #C7D9FF;
  --brand-500: #628FF4;   /* warna logo */
  --brand-600: #3C6BDD;
  --brand-700: #3058BC;
  --brand-800: #2B498D;
  --brand-900: #233A6E;
  --sky-100: #D8EDFA;
  --sky-500: #4BA8DA;     /* tagline & cincin drum logo */
  --sky-700: #12678E;

  /* "Ruang gelap": satu bidang navy untuk semua layar; benda penting tampil sebagai permukaan putih.
     Kontras teks: on-dark 13:1, on-dark-soft 8:1, on-dark-mute 5,2:1 di atas --ground. */
  --ground: #172A55;
  --ground-2: #213A6F;   /* kontrol di atas ground (tombol kembali, keyboard) — satu langkah nada */
  --ground-3: #2D4A87;   /* saat ditekan */
  --on-dark: #F1F5FE;
  --on-dark-soft: #B9CCF5;
  --on-dark-mute: #8FA6D6;
  --ease-out-strong: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-strong: cubic-bezier(.77, 0, .175, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  --primary: var(--brand-700);       /* putih di atasnya ≈ 6,6:1 */
  --primary-strong: var(--brand-800);
  --primary-soft: var(--brand-100);
  --accent: #F59E0B;                 /* CTA, teks --ink di atasnya ≈ 9:1 */
  --accent-strong: #D97706;
  --fresh: #14B8A6;
  --bg: #F8FAFE;
  --surface: #FFFFFF;
  --ink: #0F172A;
  --muted: #475569;
  --border: #CBD5E1;
  --good: #16A34A;
  --ok: #0EA5E9;
  --warn: #F59E0B;
  --critical: #DC2626;
  --good-ink: #166534;  --good-soft: #DCFCE7;
  --ok-ink: #075985;    --ok-soft: #E0F2FE;
  --warn-ink: #92400E;  --warn-soft: #FEF3C7;
  --critical-ink: #B91C1C; --critical-soft: #FEE2E2;

  /* LaundryBiz Agregator (gradien logo biru → cyan) */
  --lbz-blue: #0A6CFF;
  --lbz-cyan: #00C2FF;

  /* Skala sudut — satu aturan untuk semua komponen:
     panel = permukaan besar (kartu jalur, panel kontak, modal) · tile = kontrol besar (jawaban, tombol ikon)
     control = input/keyboard · pill = semua CTA, chip, badge */
  --r-panel: 40px;
  --r-tile: 28px;
  --r-control: 20px;
  --r-pill: 999px;

  /* Bayangan diwarnai biru brand (bukan hitam) */
  --shadow-sm: 0 4px 14px rgba(35, 58, 110, .08);
  --shadow-md: 0 16px 40px rgba(35, 58, 110, .12);
  --shadow-lg: 0 30px 80px rgba(35, 58, 110, .20);

  --font-brand: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.icon { width: 1em; height: 1em; flex: none; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }