/* ==========================================================================
   LZS design system: tokens (fonts + :root custom properties)
   Source of truth: ../spec/zakatselangor-REVAMP-DESIGN.md (v2026.5-alpha, density-01);
   portal tokens live in lzs-portal.css (../spec/zakatselangor-REVAMP-PORTAL-DESIGN.md)
   Copied from POC-CC/DesignSystem/site/styles.css. Brand tokens are LOCKED:
   --color-brand-blue #005BAA, --color-brand-green #8DC63F, --color-brand-yellow #FFF200.
   ========================================================================== */

/* ---- Fonts ---- */
/* Metric-matched fallback: local Arial reshaped to PJS metrics (fontTools, PJS wght 400) so the swap does not shift layout. */
@font-face {
  font-family: "PJS Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 104.03%;
  ascent-override: 99.78%;
  descent-override: 21.34%;
  line-gap-override: 0%;
}
/* Naskh for ayat, doa and Jawi only. unicode-range means it downloads only on pages that contain Arabic script. */
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notonaskharabic/v44/RrQKbpV-9Dd1b1OAGA6M9PkyDuVBeN2DHV2mLXgzTrc.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}

:root {
  color-scheme: light;

  /* ---- Brand lock (never edit) ---- */
  --color-brand-blue: #005BAA;   /* logo artwork sample #005AAB (prose only) */
  --color-brand-green: #8DC63F;  /* logo artwork sample #8CC63F (prose only) */
  --color-brand-yellow: #FFF200; /* logo artwork sample #FFF200 */

  /* ---- Derived blue ---- */
  --color-blue-950: #0B2447;
  --color-blue-800: #003A70;
  --color-blue-700: #004A8C;
  --color-blue-300: #6BA6E0;
  --color-blue-200: #C6D6EA;
  --color-blue-100: #E6EFF8;
  /* ---- Derived green ---- */
  --color-green-hover: #A4D264;
  --color-green-pressed: #7AB22F;
  --color-accent-deep: #4F7A1A;
  --color-green-900: #3E6114;
  --color-green-100: #EEF7E1;
  /* ---- Neutrals ---- */
  --color-ink: #0A122B;
  --color-on-accent: var(--color-ink);
  --color-ink-2: #3A4256;
  --color-muted: #5B6376;
  --color-line-strong: #7B8699;
  --color-line: #C9D2DE;
  --color-disabled-bg: #E6EAF0;
  --color-canvas: #F3F7FC;
  --color-surface: #FFFFFF;
  /* ---- Semantic ---- */
  --color-positive: var(--color-accent-deep);
  --color-positive-bg: var(--color-green-100);
  --color-warning: #8A5300;
  --color-warning-bg: #FDF3E1;
  --color-negative: #B42318;
  --color-negative-bg: #FDECEA;
  --color-info: var(--color-brand-blue);
  --color-info-bg: var(--color-blue-100);
  --color-neutral: var(--color-ink-2);           /* 5th status role (R2) */
  --color-neutral-bg: var(--color-disabled-bg);
  /* ---- Overlay ---- */
  --color-scrim: #0B244799;
  --color-lattice-on-canvas: #005BAA0F;
  --color-lattice-on-blue: #FFFFFF1A;
  /* ---- Dark scheme roles (deferred, decision A7: defined, not wired) ---- */
  --color-dark-canvas: #07182F;
  --color-dark-surface: var(--color-blue-950);
  --color-dark-surface-2: #13325E;
  --color-dark-text: #EAF1FA;
  --color-dark-muted: #A9BCD6;
  --color-dark-line: #7F95BA;
  --color-dark-positive: #A8D878;
  --color-dark-warning: #F5B84D;
  --color-dark-negative: #FF8A80;

  /* ---- Typography: families ---- */
  --font-sans: "Plus Jakarta Sans", "PJS Fallback", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "Noto Naskh Arabic", "PJS Fallback", serif;
  /* Code face (R4): Menlo before ui-monospace keeps a distinct zero if Plex fails to load */
  --font-code: "IBM Plex Mono", Menlo, ui-monospace, Consolas, monospace;

  /* ---- Typography: 21 roles (rem; fluid roles use rem + vw so zoom and OS text size both scale) ---- */
  --fs-display-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);      /* density-01: 48 -> 40 max */
  --lh-display-xl: 1.15;
  --fw-display-xl: 600;
  --tr-display-xl: -0.01em;
  --fs-display-stat: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  --lh-display-stat: 1.1;
  --fw-display-stat: 600;
  --tr-display-stat: -0.01em;
  --fs-h1: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  --lh-h1: 1.2;
  --fw-h1: 600;
  --tr-h1: -0.01em;
  --fs-h2: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --lh-h2: 1.25;
  --fw-h2: 600;
  --fs-h3: clamp(1.125rem, 1.07rem + 0.2vw, 1.25rem);
  --lh-h3: 1.3;
  --fw-h3: 600;
  --fs-h4: 1.0625rem;
  --lh-h4: 1.35;
  --fw-h4: 600;
  --fs-body-lg: clamp(1rem, 0.89rem + 0.37vw, 1.125rem);
  --lh-body-lg: 1.6;
  --fw-body-lg: 400;
  --fs-body: 1rem;
  --lh-body: 1.6;
  --fw-body: 400;
  --fs-label: 0.9375rem;          /* 15/600: label sits one step under the 16 px field text */
  --lh-label: 1.3;
  --fw-label: 600;
  --fs-label-quiet: 1rem;
  --lh-label-quiet: 1.3;
  --fw-label-quiet: 500;
  --fs-button: 1rem;
  --lh-button: 1.3;
  --fw-button: 600;
  --fs-button-lg: 1rem;          /* a large button is taller, not louder */
  --lh-button-lg: 1.3;
  --fw-button-lg: 600;
  --fs-caption: 0.875rem;
  --lh-caption: 1.5;
  --fw-caption: 500;
  --fs-caption-strong: 0.875rem;
  --lh-caption-strong: 1.5;
  --fw-caption-strong: 600;
  --fs-error-text: 1rem;
  --lh-error-text: 1.5;
  --fw-error-text: 600;
  --fs-amount: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  --lh-amount: 1.15;
  --fw-amount: 600;
  --tr-amount: -0.01em;
  --fs-table-num: 1rem;
  --lh-table-num: 1.4;
  --fw-table-num: 500;
  --fs-ayat: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
  --lh-ayat: 2;
  --fw-ayat: 400;
  --fs-jawi: 1.25rem;
  --lh-jawi: 1.9;
  --fw-jawi: 400;
  --fs-code: 0.9375em;       /* code: raw values, IC, reference codes, file names only */
  --lh-code: inherit;
  --fw-code: 400;
  --fs-figure: var(--fs-h3); /* figure: totals and KPI values; a heading never holds a number */
  --lh-figure: var(--lh-h3);
  --fw-figure: 600;

  /* ---- Radius: 5-step ladder ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-circle: 50%;          /* intrinsic circles only (radio, spinner, step marker); no container is round: cap 12 (rem-1) */

  /* ---- Spacing ---- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-section: 64px;
  --space-band: 64px;
  --gutter: 24px;
  --gutter-mobile: 16px;
  --container: 1200px;
  --reading: 720px;
  --header-height: 56px;
  --header-height-mobile: 56px;
  --action-bar-height: 56px;
  --target-min: 44px;            /* every hit area; 36 under a fine-only pointer (block below), 44 on any touch */
  --control-xs: 32px;            /* portal row-action button, fine pointer only */
  --control-sm: 36px;            /* chip, pill, lang toggle, segmented, small button on a fine pointer */
  --control-dense: 40px;         /* portal field, toolbar control, compact row (fine pointer) */
  --control-md: 44px;            /* default button */
  --control-lg: 48px;            /* input, select, primary CTA, .btn-lg */
  --logo-tile: 64px;
  --task-tile: 112px;
  --border-hairline: 1px;
  --border-control: 1px;
  --border-emphasis: 2px;
  --border-focus: 3px;           /* active tab bar + current-step ring only; never a focus indicator */
  --focus-ring: 2px;             /* every focus indicator (density-01 §4) */
  /* sizes (2026.4) */
  --logo-height: 40px;           /* sizes the PNG only; artwork never changes */
  --logo-height-mobile: 32px;
  --modal-max: 560px;
  --drawer-max: 560px;
  --calc-card-max: 480px;
  --hero-actions-max: 440px;
  --col-text-min: 192px;         /* text-column floor in scrolling tables */
  --col-min: 128px;              /* any other data column */
  --kv-key-width: 208px;         /* key column of key-value lists at >= 768 */
  --marker-size: var(--space-lg);   /* stepper + timeline marker box */
  --marker-dot: var(--space-xs);    /* current-marker centre dot */
  --progress-height: var(--space-xs);
  --toast-max: 400px;
  --btn-pad-inline: var(--space-lg);                            /* .btn resting inline padding */
  --btn-busy-shift: calc((var(--icon-sm) + var(--space-xs)) / 2); /* 14px: what each inline padding gives up while busy (R8) */

  /* ---- Elevation ---- */
  --elevation-flat: none;
  --elevation-raised: 0 1px 2px #0B24470F, 0 8px 24px #0B244714;
  --elevation-overlay: 0 16px 48px #0B24472E;

  /* ---- Motion ---- */
  --motion-instant: 100ms;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 360ms;
  --motion-barakah: 600ms;
  --motion-spin: 900ms;          /* the one sanctioned loop: spinner inside a busy control */
  --motion-toast-dwell: 6s;      /* read by script; paused on hover and focus */
  --motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --motion-reduced: 0ms;
  --motion-reduced-crossfade: 120ms;

  /* ---- Focus ---- */
  /* One ring per element type: A field = border recolour + flush ring (one 3 px band); B own blue edge = flush ring;
     C borderless = detached ring; D tight container = inset ring. Never a border change plus an offset ring. */
  --focus-outline: var(--focus-ring) solid var(--color-brand-blue);
  --focus-outline-on-dark: var(--focus-ring) solid var(--color-brand-yellow);
  --focus-outline-negative: var(--focus-ring) solid var(--color-negative);
  --focus-outline-on-fill: var(--focus-ring) solid var(--color-ink);   /* B on a blue-filled selected control: a blue ring on a blue fill is invisible (rem-1) */
  --focus-offset: 2px;
  --focus-offset-flush: 0px;
  --focus-offset-inset: calc(-1 * var(--focus-ring));

  /* ---- Icons ---- */
  --icon-stroke: 1.75;
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;

  /* ---- z-index scale (CSS-only; low to high) ---- */
  --z-content: 10;
  --z-sticky: 12;
  --z-sticky-corner: 14;
  --z-header: 20;
  --z-decision-bar: 25;
  --z-bottom-bar: 30;
  --z-sheet: 40;
  --z-popover: 45;
  --z-modal: 50;
  --z-toast: 60;
  --z-skip-link: 70;

  /* ---- CSS-only tokens (non-px units; no YAML group) ---- */
  --measure-body: 68ch;
  --measure-lead: 60ch;
  --measure-heading: 48ch;
  --measure-hero: 20ch;
  --underline-offset: 0.2em;
  --sheet-max-block: 85dvh;       /* dvh: the sheet foot never hides behind the mobile URL bar */
  --lh-control: 1.5;              /* 24 px line: input, select, textarea, table cells */
  --textarea-rows-min: 5;         /* 5 lines at rest = 146 px */
  --textarea-rows-max: 15;        /* grows with content to 15 lines (386 px), then scrolls; 10 below 768 */
  --textarea-chrome: calc(2 * var(--space-sm) + 2 * var(--border-control));   /* 26 px padding + border */
  --table-row: var(--control-lg); /* resolved here: 48 px data rows everywhere, even where a scope densifies fields */
  --skeleton-40: 40%;
  --skeleton-60: 60%;
  --skeleton-80: 80%;
  --lattice-width: 40%;
  --focus-clearance: calc(var(--focus-offset) + var(--focus-ring));  /* ring room inside scrollers */
  /* Masked glyphs: shape only; colour comes from background: currentColor or a role token */
  --glyph-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --glyph-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --glyph-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h14'/%3E%3C/svg%3E");

  /* ---- Layout helpers (resolved from tokens; not tokens themselves) ---- */
  --page-gutter: var(--gutter);
  --band-pad: var(--space-band);
  --card-pad: var(--space-lg);
  --hdr-h: var(--header-height);
  --hdr-offset: var(--hdr-h);     /* measured header block size; site.js overwrites it, the header never reads it */
  --sticky-toolbar-h: 0px;        /* a page with a sticky toolbar sets this */
  --sticky-bar-bottom: 0px;       /* a page with a sticky bottom bar sets this */
}

@media (max-width: 1023px) {
  :root { --band-pad: var(--space-2xl); }
}
@media (max-width: 767px) {
  :root {
    --page-gutter: var(--gutter-mobile);
    --band-pad: var(--space-xl);
    --card-pad: var(--space-md);
    --hdr-h: var(--header-height-mobile);
    --textarea-rows-max: 10;
  }
}
/* Density by pointer (density-01 §3.1): touch sizing is the default; only when EVERY pointer is fine do small targets
   drop to 36. Hybrid touch laptops keep 44. The smallest target anywhere is 32 (portal row action), above the 24 px 2.5.8 floor. */
@media (pointer: fine) and (not (any-pointer: coarse)) {
  :root { --target-min: var(--control-sm); }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: var(--motion-reduced);
    --motion-fast: var(--motion-reduced);
    --motion-base: var(--motion-reduced);
    --motion-slow: var(--motion-reduced-crossfade);
    --motion-barakah: var(--motion-reduced);
    --motion-spin: var(--motion-reduced);
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}