/* ============================================================
   Handbook PMBM SIFA 2027–2028 — Design Tokens
   ============================================================ */

:root {
  /* ---- Color ---- */
  --color-primary: #14513F;          /* Deep Islamic Green */
  --color-primary-dark: #0B3428;     /* Dark Green */
  --color-primary-soft: #E8F0EC;
  --color-primary-softer: #F2F7F4;
  --color-secondary: #16233C;        /* Midnight Navy */
  --color-secondary-soft: #E9ECF2;
  --color-accent: #A97B33;           /* Warm Gold */
  --color-accent-soft: #F7F0E3;

  --color-background: #FBFAF7;       /* Warm Off White */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F6F5F1;

  --color-text: #191E1C;
  --color-text-soft: #3B443F;
  --color-muted: #5E6763;
  --color-border: #E3E1D9;
  --color-border-strong: #CFCEC4;

  --color-success: #1C6E52;
  --color-success-soft: #E6F1EC;
  --color-warning: #8E5A15;
  --color-warning-soft: #FBF1E2;
  --color-info: #23456F;
  --color-info-soft: #E8EEF6;
  --color-danger: #8B2F26;
  --color-danger-soft: #F8EBE9;

  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--color-accent);

  /* ---- Typography ---- */
  --font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2rem, 1.35rem + 3.1vw, 3.5rem);
  --fs-h1: clamp(1.65rem, 1.2rem + 2.1vw, 2.65rem);
  --fs-h2: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --fs-h3: clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --fs-small: 0.925rem;
  --fs-caption: 0.8125rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.2;
  --lh-heading: 1.28;
  --lh-body: 1.7;
  --ls-label: 0.13em;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.75rem;
  --sp-9: 5rem;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Shadow (very subtle) ---- */
  --sh-1: 0 1px 2px rgba(20, 30, 26, 0.05);
  --sh-2: 0 2px 10px rgba(20, 30, 26, 0.06);
  --sh-3: 0 12px 40px rgba(20, 30, 26, 0.14);

  /* ---- Layout ---- */
  --header-h: 58px;
  --sidebar-w: 268px;
  --measure: 68ch;
  --page-max: 1320px;

  --tr-fast: 140ms ease;
  --tr-base: 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (min-width: 1024px) {
  :root { --header-h: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --tr-fast: 1ms; --tr-base: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}