/* ============================================================
   Riyadh Municipality — typography, spacing, effects tokens
   Synced from the Claude design system (tokens/typography.css,
   spacing.css, effects.css). Do not hand-edit.
   ============================================================ */

/* --- Bahij TheSansArabic — the official brand family, self-hosted.
   Served as subsetted woff2 (see build_fonts.py): 2 MB of .ttf down to
   274 KB. The PDF renderer inlines these same files as base64 data URIs,
   because Chromium blocks file:// fonts and the system-installed copies
   collapse weights 600/700/900 onto a single face. --- */
@font-face {
  font-family: "Bahij TheSansArabic";
  src: url("/static/fonts/BahijTheSansArabic-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bahij TheSansArabic";
  src: url("/static/fonts/BahijTheSansArabic-Plain.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bahij TheSansArabic";
  src: url("/static/fonts/BahijTheSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bahij TheSansArabic";
  src: url("/static/fonts/BahijTheSansArabic-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bahij TheSansArabic";
  src: url("/static/fonts/BahijTheSansArabic-Black.woff2") format("woff2");
  font-weight: 800 900; font-style: normal; font-display: swap;
}

:root {
  /* --- Families — exactly as tokens/typography.css declares them.
     Bahij is self-hosted from static/fonts/ and installed system-wide.
     No Arabic fallback on purpose: if Bahij ever fails to load we want it
     to be obvious rather than silently substituted. --- */
  --font-display: "Bahij TheSansArabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-body:    "Bahij TheSansArabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-latin:   "IBM Plex Sans", "Bahij TheSansArabic", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* --- Weights --- */
  --w-light: 300;  --w-regular: 400; --w-medium: 500;
  --w-semibold: 600; --w-bold: 700; --w-black: 800; --w-heavy: 900;

  /* --- Type scale --- */
  --fs-display-xl: 88px; --fs-display-l: 64px; --fs-display-m: 48px;
  --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 26px; --fs-h4: 21px;
  --fs-lg: 19px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12.5px; --fs-micro: 11px;

  /* --- Numerals / data --- */
  --fs-stat-xl: 72px; --fs-stat-l: 52px; --fs-stat-m: 38px;

  /* --- Line heights (Arabic body reads better with more air) --- */
  --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7;

  /* --- Letter spacing (Latin only; Arabic is never letter-spaced) --- */
  --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.02em; --ls-caps: 0.14em;

  /* --- Spacing: 8px base rhythm --- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --space-8: 64px; --space-9: 96px; --space-10: 128px;

  --container-sm: 640px; --container-md: 960px;
  --container-lg: 1200px; --container-xl: 1440px;
  --gutter: 24px; --page-pad: 32px;

  /* --- Radii --- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 40px 120px rgba(0, 0, 0, 0.6);

  --glow-brand: 0 0 0 1px rgba(0, 106, 70, 0.5), 0 8px 32px rgba(0, 106, 70, 0.20);

  /* --- Glass / blur --- */
  --blur-sm: blur(8px); --blur-md: blur(18px); --blur-lg: blur(32px);

  /* --- Cinematic scrims --- */
  --scrim-bottom: linear-gradient(to top, rgba(4,14,9,0.94) 0%, rgba(4,14,9,0.55) 35%, rgba(4,14,9,0) 75%);
  --scrim-top: linear-gradient(to bottom, rgba(4,14,9,0.85) 0%, rgba(4,14,9,0) 60%);
  --scrim-radial: radial-gradient(120% 120% at 70% 20%, rgba(4,14,9,0) 30%, rgba(4,14,9,0.85) 100%);
  --tint-brand: linear-gradient(120deg, rgba(0,106,70,0.10), rgba(4,103,106,0.06));

  /* --- Motion --- */
  --ease-cinematic: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms; --dur-normal: 240ms; --dur-slow: 480ms; --dur-cinematic: 900ms;
}