/* =====================================================================
   HOOMEY — token reka bentuk & komponen asas (brand.css)
   ---------------------------------------------------------------------
   Guna: <link rel="stylesheet" href="/shared/brand.css">
   Semua halaman keluarga (/, /rumah/, /akaun/, /polisi/) kongsi fail ini.
   Jangan reka warna baharu sesuka hati — pilih dari token di bawah.

   WARNA
     --hm-ink      #33262B  garis luar tebal + teks utama (sama dgn karakter)
     --hm-bg       #FFF8EC  latar krim (kertas lukisan)
     --hm-card     #FFFFFF  kad / panel
     --hm-muted    #6E5E55  teks kecil / penerangan (kontras 5.9:1 atas krim)
     --hm-line     #F0E2CF  garis halus, pemisah
     --hm-sky      #9ED8F2  langit (latar hero)
     --hm-grass    #9BD86A  bukit belakang
     Warna tema (satu huruf logo = satu warna):
     --hm-pink #FF5C7A (UTAMA: butang utama)  --hm-orange #F7A440
     --hm-yellow #FFD23F (fokus/sorotan)      --hm-green #2EBD8C
     --hm-blue #3B82F6                        --hm-purple #B07CFF
     *-soft = versi pucat untuk latar cip / lencana.
     Teks putih atas pink = 2.97:1 sahaja → WAJIB garis gelap keliling huruf
     (lihat .hm-btn--primary) atau guna teks --hm-ink (4.9:1).

   BENTUK
     --hm-stroke   4px    tebal garis luar komponen (karakter guna 6/300)
     --hm-r-sm 14px · --hm-r-md 22px · --hm-r-lg 32px · --hm-r-pill 999px
     --hm-shadow-*  bayang "pelekat" keras ke bawah (tiada blur) — tekan = turun

   JARAK (skala 4px): --hm-s-1 4 · -2 8 · -3 12 · -4 16 · -5 24 · -6 32 · -7 48 · -8 64
   TAIP: Baloo 2 (Google Fonts) — 500 badan, 700 tajuk kecil, 800 tajuk/butang
     --hm-fs-sm 15px · -base 18px · -lg 22px · -xl 28px · -2xl clamp tajuk
   GERAK: --hm-ease-boing (lantun), --hm-dur 200ms. Hormati prefers-reduced-motion.
   SENTUH: --hm-tap 56px minimum; butang utama kanak-kanak ≥64px.
   Mod gelap: SENGAJA tiada — laman kanak-kanak, sentiasa cerah (color-scheme: light).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --hm-ink: #33262B; --hm-bg: #FFF8EC; --hm-card: #FFFFFF; --hm-muted: #6E5E55; --hm-line: #F0E2CF;
  --hm-sky: #9ED8F2; --hm-grass: #9BD86A;
  --hm-pink: #FF5C7A; --hm-orange: #F7A440; --hm-yellow: #FFD23F;
  --hm-green: #2EBD8C; --hm-blue: #3B82F6; --hm-purple: #B07CFF;
  --hm-pink-soft: #FFE1E7; --hm-orange-soft: #FFEBD2; --hm-yellow-soft: #FFF3C4;
  --hm-green-soft: #D5F3E8; --hm-blue-soft: #DCE8FD; --hm-purple-soft: #EEE4FF;
  --hm-primary: var(--hm-pink); --hm-on-primary: #FFFFFF; --hm-focus: var(--hm-yellow);

  --hm-stroke: 4px; --hm-outline: var(--hm-stroke) solid var(--hm-ink);
  --hm-r-sm: 14px; --hm-r-md: 22px; --hm-r-lg: 32px; --hm-r-pill: 999px;
  --hm-shadow-sm: 0 4px 0 rgba(51, 38, 43, .22);
  --hm-shadow-md: 0 6px 0 rgba(51, 38, 43, .22);
  --hm-shadow-lg: 0 10px 0 rgba(51, 38, 43, .22);

  --hm-s-1: 4px; --hm-s-2: 8px; --hm-s-3: 12px; --hm-s-4: 16px;
  --hm-s-5: 24px; --hm-s-6: 32px; --hm-s-7: 48px; --hm-s-8: 64px;

  --hm-font: 'Baloo 2', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --hm-fs-sm: 15px; --hm-fs-base: 18px; --hm-fs-lg: 22px; --hm-fs-xl: 28px;
  --hm-fs-2xl: clamp(30px, 4.4vw, 44px);

  --hm-ease-boing: cubic-bezier(.3, 1.6, .5, 1); --hm-ease-out: cubic-bezier(.2, .8, .3, 1);
  --hm-dur: 200ms; --hm-tap: 56px;
  --hm-safe-t: env(safe-area-inset-top, 0px); --hm-safe-b: env(safe-area-inset-bottom, 0px);
  --hm-safe-l: env(safe-area-inset-left, 0px); --hm-safe-r: env(safe-area-inset-right, 0px);
}

/* asas ringan — :where() supaya mudah ditindih oleh halaman */
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) { margin: 0; background: var(--hm-bg); color: var(--hm-ink); font: 500 var(--hm-fs-base)/1.55 var(--hm-font);
  -webkit-tap-highlight-color: transparent; }
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(img, svg) { max-width: 100%; }
:where(a) { color: inherit; }
:where(:focus-visible) { outline: 4px solid var(--hm-focus); outline-offset: 3px; border-radius: 8px; }
.hm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- bekas ---------- */
.hm-container { width: 100%; max-width: 1080px; margin-inline: auto;
  padding-inline: max(16px, var(--hm-safe-l)) max(16px, var(--hm-safe-r)); }
@media (min-width: 700px) { .hm-container { padding-inline: max(24px, var(--hm-safe-l)) max(24px, var(--hm-safe-r)); } }

/* ---------- butang: ikon + label (jangan ikon bogel) ---------- */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--hm-tap); padding: 8px 24px 8px 18px; border-radius: var(--hm-r-pill);
  border: var(--hm-outline); background: var(--hm-card); color: var(--hm-ink);
  font: 800 var(--hm-fs-lg)/1.1 var(--hm-font); text-decoration: none; cursor: pointer;
  box-shadow: var(--hm-shadow-md); user-select: none; -webkit-user-select: none;
  transition: transform var(--hm-dur) var(--hm-ease-out), box-shadow var(--hm-dur) var(--hm-ease-out), background-color var(--hm-dur); }
.hm-btn svg { width: 1.35em; height: 1.35em; flex: none; }
.hm-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(51, 38, 43, .22); }
.hm-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(51, 38, 43, .22); transition-duration: 80ms; }
.hm-btn--primary { background: var(--hm-primary); color: var(--hm-on-primary);
  /* teks "pelekat": garis gelap keliling huruf putih — kontras selamat atas pink */
  text-shadow: 0 2px 0 var(--hm-ink), 2px 0 0 var(--hm-ink), 0 -2px 0 var(--hm-ink), -2px 0 0 var(--hm-ink),
    1.5px 1.5px 0 var(--hm-ink), -1.5px 1.5px 0 var(--hm-ink), 1.5px -1.5px 0 var(--hm-ink), -1.5px -1.5px 0 var(--hm-ink), 0 4px 0 var(--hm-ink); }
.hm-btn--secondary { background: var(--hm-card); color: var(--hm-ink); }
.hm-btn--ghost { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.hm-btn--lg { min-height: 76px; padding: 10px 40px 10px 28px; font-size: clamp(28px, 3.4vw, 36px); box-shadow: var(--hm-shadow-lg); }
.hm-btn--lg:active { transform: translateY(7px); box-shadow: 0 3px 0 rgba(51, 38, 43, .22); }
.hm-btn--sm { min-height: 48px; padding: 6px 18px 6px 14px; font-size: var(--hm-fs-base); box-shadow: var(--hm-shadow-sm); }
.hm-btn[disabled], .hm-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: var(--hm-shadow-sm); }

/* ---------- kad ---------- */
.hm-card { background: var(--hm-card); border: var(--hm-outline); border-radius: var(--hm-r-lg);
  box-shadow: var(--hm-shadow-lg); padding: var(--hm-s-5); }
.hm-card--flat { box-shadow: none; border-width: 3px; }

/* ---------- cip / lencana ---------- */
.hm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 14px 2px 10px;
  border-radius: var(--hm-r-pill); border: 3px solid var(--hm-ink); background: var(--hm-yellow);
  color: var(--hm-ink); font: 800 var(--hm-fs-sm)/1 var(--hm-font); white-space: nowrap; }
.hm-chip svg { width: 18px; height: 18px; }
.hm-chip--pink { background: var(--hm-pink-soft); } .hm-chip--green { background: var(--hm-green-soft); }
.hm-chip--blue { background: var(--hm-blue-soft); } .hm-chip--purple { background: var(--hm-purple-soft); }

/* ---------- logo ---------- */
.hm-logo { display: block; height: auto; aspect-ratio: 664 / 234; }

@media (prefers-reduced-motion: reduce) {
  .hm-btn, .hm-btn:hover, .hm-btn:active { transition: none; transform: none; }
}

/* Label BETA di sebelah logo (masih dalam ujian) */
.hm-logo-wrap { position: relative; display: inline-flex; align-items: flex-start; }
.hm-beta { display: inline-block; margin-left: 4px; padding: 3px 8px 2px; border-radius: 999px; background: #FFD23F; color: #33262B;
  border: 2.5px solid #33262B; font: 800 11px/1.1 inherit; font-family: inherit; letter-spacing: 1px; transform: rotate(-6deg) translateY(-2px);
  box-shadow: 0 2px 0 #33262B; white-space: nowrap; pointer-events: none; }
.hm-logo-wrap-besar .hm-beta { position: absolute; right: 2%; top: 4%; font-size: clamp(12px, 2.2vw, 18px); padding: 5px 12px 4px; border-width: 3px; }
/* saiz BETA ikut saiz logo (logo = min(620px, 84vw, 64vh)) — di telefon landskap logo kecil, lencana 2.2vw dulu menutup huruf "ey" */
.hm-logo-wrap-besar .hm-beta { font-size: clamp(10px, calc(min(620px, 84vw, 64vh) * .029), 18px); padding: .3em .7em .22em; right: -1%; top: -2%; }