/* PintarArabKids — Token reka bentuk
   Semua warna, saiz dan jarak diambil dari sini. Jangan tulis nilai warna terus dalam fail lain. */

@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("../assets/fonts/noto-naskh-arabic.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* Warna jenama */
  --c-bg: #FFF8EC;          /* krim lembut */
  --c-bg-deep: #FBEBD0;     /* krim lebih gelap untuk jalur/lapisan */
  --c-surface: #FFFFFF;     /* permukaan kad */
  --c-primary: #1E8C8A;     /* hijau firus */
  --c-primary-dark: #146563;
  --c-primary-soft: #D6EEEC;
  --c-accent: #FFC845;      /* kuning matahari — ganjaran */
  --c-accent-dark: #D9A21B;
  --c-action: #FF7A59;      /* oren karang — tindakan penting */
  --c-action-dark: #D95A3B;
  --c-success: #4CAF50;
  --c-success-dark: #3A8A3D;
  --c-ink: #2B2B3A;         /* teks */
  --c-ink-soft: #5E5E70;
  --c-line: #EADFCB;
  --c-sky-top: #BFE8F2;
  --c-sky-bottom: #FFF8EC;
  --c-hill-1: #A8D98A;
  --c-hill-2: #86C470;

  /* Warna jalur umur */
  --band-bijakKecil: #FF9FB2;
  --band-tahun1: #FFC845;
  --band-tahun2: #6FC3DF;
  --band-tahun3: #9C8CE0;

  /* Fon */
  --font-ui: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-ar: "Noto Naskh Arabic", "Geeza Pro", "Arial", serif;

  /* Skala teks — berskala ikut lebar skrin */
  --text-sm: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-base: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --text-ar-card: clamp(2.5rem, 8vw, 5rem);
  --text-ar-label: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);

  /* Jarak */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Bentuk */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Sasaran sentuh minimum (jari kanak-kanak) */
  --tap-min: 56px;
  --tap-lg: 72px;

  /* Bayang "tebal" gaya mainan */
  --shadow-press: 0 6px 0 rgba(43, 43, 58, 0.18);
  --shadow-card: 0 4px 0 rgba(43, 43, 58, 0.10), 0 10px 24px rgba(43, 43, 58, 0.08);
  --shadow-float: 0 16px 40px rgba(43, 43, 58, 0.18);

  /* Gerakan */
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 450ms;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Ketinggian bar atas */
  --topbar-h: 72px;

  /* Safe area (notch) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

@media (max-width: 600px), (max-height: 500px) {
  :root { --topbar-h: 64px; }
}