/* ==========================================================================
   AL SHAA EL LIBI (الشعاع الليبي) — Design Tokens
   Palette sampled directly from the logo: deep navy + orange accent only.
   ========================================================================== */

:root {
  /* ---- Color: brand ---- */
  --color-navy: #00224B;
  --color-navy-2: #06316A;
  --color-orange: #E97801;
  --color-orange-dark: #C46600;
  /* Same hue, darkened for use as TEXT color on light backgrounds only —
     the brand orange is ~2.9:1 on white (fails WCAG AA at any size); this
     tint clears 4.5:1. Never used for fills/lines/borders — those keep
     the exact brand hex above. */
  --color-orange-text: #B85D00;

  /* ---- Color: surfaces ---- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F6F9;
  --color-bg-navy: var(--color-navy);

  /* ---- Color: text ---- */
  --color-heading: var(--color-navy);
  --color-text: #3E4A61;
  --color-text-soft: #6B7690;
  --color-on-navy: #FFFFFF;
  --color-on-navy-muted: rgba(255, 255, 255, 0.72);

  /* ---- Color: lines / borders ---- */
  --color-border: rgba(0, 34, 75, 0.12);
  --color-border-soft: rgba(0, 34, 75, 0.08);
  --color-line-navy: rgba(0, 34, 75, 0.16);

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px rgba(233, 120, 1, 0.35);

  /* ---- Shadows: soft and ambient only ---- */
  --shadow-sm: 0 2px 14px rgba(0, 34, 75, 0.06);
  --shadow-md: 0 12px 36px rgba(0, 34, 75, 0.10);
  --shadow-lg: 0 24px 60px rgba(0, 34, 75, 0.14);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Spacing scale ---- */
  --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;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-narrow: 860px;
  --container-pad: clamp(20px, 5vw, 64px);
  --section-pad-y: clamp(64px, 9vw, 128px);
  --section-pad-y-tight: clamp(40px, 6vw, 72px);

  /* ---- Typography: font families ---- */
  --font-display: 'Cairo', 'Manrope', 'Segoe UI', Tahoma, sans-serif;
  --font-body: 'Tajawal', 'Manrope', 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- Typography: type scale ---- */
  --text-display: clamp(2.6rem, 4.6vw + 1rem, 4.6rem);
  --text-h1: clamp(2.1rem, 2.6vw + 1rem, 3.2rem);
  --text-h2: clamp(1.6rem, 1.4vw + 1rem, 2.25rem);
  --text-h3: clamp(1.2rem, 0.6vw + 1rem, 1.5rem);
  --text-lead: clamp(1.05rem, 0.4vw + 0.95rem, 1.3rem);
  --text-body: 1rem;
  --text-small: 0.9rem;
  --text-caption: 0.8rem;
  --text-numeral: clamp(2.4rem, 3vw + 1rem, 3.6rem);

  --leading-tight: 1.18;
  --leading-snug: 1.4;
  --leading-normal: 1.75;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-line: 1400ms;

  /* ---- Icon ---- */
  --icon-stroke: 1.6;

  /* ---- Header ---- */
  --header-height: 88px;
}

@media (max-width: 767px) {
  :root {
    --header-height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-line: 0ms;
  }
}