/* ==========================================================================
   Design Tokens & CSS Variables — Al Kawader Al Amilah
   Master Color Palette, Typography & Structural Metrics
   ========================================================================== */

:root {
  /* Brand Palette — Saudi Corporate Identity */
  --navy: #0b2038;
  --navy-2: #102d49;
  --navy-dark: #071727;
  --navy-card: #0e243d;
  --navy-surface: #0a1e33;

  /* Restrained Sand Gold Accents */
  --gold: #c4a977;
  --gold-accent: #c7953e;
  --gold-light: #e0be77;
  --gold-pale: #fbf7ef;
  --gold-dark: #a8823b;
  --gold-badge-bg: #fdfaf4;
  --gold-badge-border: #ebd9b5;

  /* Secondary Steel Grey & Neutral Tones */
  --ink: #0d1e32;
  --ink-secondary: #22374e;
  --steel: #5a6b7d;
  --steel-light: #8292a4;
  --steel-border: #e2e8f0;

  /* Surfaces & Backgrounds */
  --bg: #f8fafc;
  --bg-section: #f4f6f9;
  --white: #ffffff;
  --line: #e2e8f0;
  --line-light: rgba(11, 32, 56, 0.07);
  --line-dark: rgba(255, 255, 255, 0.1);
  --line-gold: rgba(196, 169, 119, 0.4);

  /* Typography System */
  --font-arabic: "IBM Plex Sans Arabic", "Cairo", system-ui, -apple-system, sans-serif;
  --font-latin: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  /* Fluid Type Scale */
  --font-size-display: clamp(2.35rem, 4.2vw, 3.5rem);
  --font-size-h1: clamp(2.05rem, 3.6vw, 3.1rem);
  --font-size-h2: clamp(1.65rem, 2.6vw, 2.3rem);
  --font-size-h3: clamp(1.18rem, 1.45vw, 1.38rem);
  --font-size-lead: clamp(1rem, 1.15vw, 1.15rem);
  --font-size-body: 0.96rem;
  --font-size-sm: 0.86rem;
  --font-size-xs: 0.76rem;

  /* Macro-whitespace Spacing Scale */
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 72px;
  --space-3xl: 96px;

  /* Max Widths */
  --max: 1240px;
  --max-wide: 1440px;
  --container-padding: 24px;
  --header-height: 78px;
  --topbar-height: 40px;

  /* Architectural Radii (Restrained & Structured) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  /* Shadows (Subtle, Layered & Architectural) */
  --shadow-xs: 0 1px 3px rgba(11, 32, 56, 0.04);
  --shadow-sm: 0 4px 14px rgba(11, 32, 56, 0.05);
  --shadow-md: 0 8px 24px rgba(11, 32, 56, 0.07);
  --shadow: 0 16px 40px rgba(11, 32, 56, 0.09);
  --shadow-hover: 0 20px 48px rgba(11, 32, 56, 0.12);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}