/*
  El Masdar News — design tokens as CSS custom properties.
  Palette sampled from the El Masdar logo (assets/img/logo.webp):
    navy  #002354  (wordmark body)
    blue  #014490  (wordmark highlights)
    red   #d90c1d  (flag accent / underline strokes)
  Mirror of replica/design/tokens.css; keep both in sync.
*/

:root {
  /* brand */
  --color-brand-navy: #002354;
  --color-brand-blue: #014490;
  --color-brand-red: #d90c1d;

  /* color roles */
  --color-bg: #ffffff;
  --color-surface: #f4f6fa;
  --color-surface-alt: #e9eef6;
  --color-border: #e1e6ee;
  --color-border-input: #8a94a3;
  --color-text: #0b1526;
  --color-text-muted: #5a6475;
  --color-accent: var(--color-brand-blue);
  --color-accent-strong: var(--color-brand-navy);
  --color-accent-tint: #e6eefa;
  --color-on-accent: #ffffff;
  --color-breaking: var(--color-brand-red);
  --color-on-breaking: #ffffff;
  --color-live: var(--color-brand-red);
  --color-on-live: #ffffff;
  --color-overlay: #001233;
  --color-on-media: #ffffff;
  --color-on-dark-muted: #b9c6dc;
  --color-danger: #c62f2f;
  --color-success: #1f7a4d;
  --color-warning: #a15c00;
  --color-whatsapp: #128c4a;
  --color-facebook: #1665d8;
  --color-x: #0b1526;

  /* fonts — Arabic-first, open licenses (Google Fonts, OFL).
     Kufi headings echo the geometric Kufi wordmark in the logo. */
  --font-heading: 'Noto Kufi Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --font-body: 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-sans-primary: var(--font-body);

  /* type scale: size / line-height / weight */
  --text-xs-size: 12px;   --text-xs-line: 18px;   --text-xs-weight: 500;
  --text-sm-size: 14px;   --text-sm-line: 24px;   --text-sm-weight: 400;
  --text-base-size: 16px; --text-base-line: 28px; --text-base-weight: 400;
  --text-md-size: 18px;   --text-md-line: 30px;   --text-md-weight: 700;
  --text-lg-size: 22px;   --text-lg-line: 36px;   --text-lg-weight: 700;
  --text-xl-size: 28px;   --text-xl-line: 44px;   --text-xl-weight: 800;
  --text-display-size: 40px; --text-display-line: 60px; --text-display-weight: 800;
  --text-article-size: 19px; --text-article-line: 36px;

  /* spacing scale (4/8 base) */
  --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;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-card: 0 1px 2px rgba(0,35,84,.06), 0 4px 12px rgba(0,35,84,.08);
  --shadow-pop: 0 12px 32px rgba(0,35,84,.18);
  --shadow-sticky: 0 2px 10px rgba(0,35,84,.16);

  /* motion */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 600ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);

  /* layout */
  --layout-max-width: 1280px;
  --layout-content-width: 760px;
  --layout-sidebar-width: 320px;
  --layout-header-height: 88px;
  --layout-nav-height: 52px;
  --layout-ticker-height: 42px;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans-primary);
}