/* PER Learning Studio — Token reka bentuk
   Satu sumber kebenaran untuk warna, jarak, tipografi.
   Portal Guru & Arena Murid berkongsi token ini; Arena menambah lapisan ceria. */

:root {
  /* Jenama */
  --c-ink: #14213d;          /* teks utama, nav */
  --c-primary: #2747c9;      /* tindakan utama */
  --c-primary-strong: #1c35a0;
  --c-primary-soft: #e7ecfc;
  --c-teal: #0f9d8a;         /* kejayaan / Arab */
  --c-teal-soft: #dff5f1;
  --c-sun: #f6b324;          /* aksen, ganjaran */
  --c-sun-soft: #fff4d6;
  --c-coral: #e5533d;        /* ralat */
  --c-coral-soft: #fde8e4;

  /* Permukaan */
  --c-bg: #f5f7fb;
  --c-surface: #ffffff;
  --c-surface-2: #eef1f7;
  --c-border: #d9dfeb;
  --c-text: #14213d;
  --c-text-muted: #5b6785;
  --c-focus: #f6b324;

  /* Tipografi */
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;
  --fs-arabic: 1.6rem;       /* teks Arab lebih besar untuk kebolehbacaan tanda baris */

  /* Jarak & bentuk */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 33, 61, 0.06), 0 2px 8px rgba(20, 33, 61, 0.06);
  --shadow-2: 0 6px 24px rgba(20, 33, 61, 0.12);

  /* Susun atur */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;
  --content-max: 1120px;
  --tap-min: 44px;           /* saiz sentuh minimum (WCAG 2.5.5) */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0f1526;
    --c-surface: #182038;
    --c-surface-2: #212a46;
    --c-border: #2e3a5c;
    --c-text: #eef1f8;
    --c-text-muted: #a7b1cc;
    --c-ink: #eef1f8;
    --c-primary: #6f8bff;
    --c-primary-strong: #93a8ff;
    --c-primary-soft: #232f5c;
    --c-teal-soft: #123a36;
    --c-sun-soft: #3a3016;
    --c-coral-soft: #3d1f1b;
  }
}

:root[data-theme="dark"] {
  --c-bg: #0f1526;
  --c-surface: #182038;
  --c-surface-2: #212a46;
  --c-border: #2e3a5c;
  --c-text: #eef1f8;
  --c-text-muted: #a7b1cc;
  --c-ink: #eef1f8;
  --c-primary: #6f8bff;
  --c-primary-strong: #93a8ff;
  --c-primary-soft: #232f5c;
  --c-teal-soft: #123a36;
  --c-sun-soft: #3a3016;
  --c-coral-soft: #3d1f1b;
}