:root {
  --ibt-navy: #0b1026;
  --ibt-navy-2: #111a3d;
  --ibt-bg: #ffffff;
  --ibt-bg-soft: #f6f8fc;
  --ibt-surface: #ffffff;
  --ibt-text: #11162b;
  --ibt-muted: #667085;
  --ibt-border: #e4e9f2;
  --ibt-blue: #4f7df3;
  --ibt-cyan: #10c8e8;
  --ibt-purple: #7c3aed;
  --ibt-pink: #ec4899;
  --ibt-green: #20c98b;
  --ibt-orange: #f59e0b;
  --ibt-success: #20c98b;
  --ibt-warning: #f59e0b;
  --ibt-error: #ef4444;
  --ibt-info: #4f7df3;
  --ibt-gradient: linear-gradient(135deg, var(--ibt-cyan) 0%, var(--ibt-blue) 34%, var(--ibt-purple) 67%, var(--ibt-pink) 100%);
  /* Action gradient keeps the brand hue progression while using darker stops
   * so white button copy does not cross the low-contrast cyan/pink values of
   * the decorative brand gradient. */
  --ibt-gradient-action: linear-gradient(135deg, #08728a 0%, #315bb2 34%, #5b21b6 67%, #a11d61 100%);
  --ibt-gradient-dark: linear-gradient(145deg, #07102b 0%, #101848 45%, #28103e 100%);
  --ibt-container: 1180px;
  --ibt-container-wide: 1240px;
  --ibt-header-h: 72px;
  --ibt-announcement-h: 34px;
  --ibt-target-min: 44px;

  /* Canonical layout / readability primitives.
   * These preserve the currently approved effective values while moving
   * ownership into the token layer so page refinements do not invent a
   * parallel foundation system. */
  --ibt-gutter: clamp(18px, 3vw, 28px);
  --ibt-reading: 68ch;
  --ibt-control-h: 46px;

  /* Canonical cinematic grammar shared by homepage and service categories.
   * Page families keep their own content and scroll geometry; the visual
   * theatre, caption surface, hierarchy and orientation cues remain one system. */
  --ibt-cinema-bg: #050817;
  --ibt-cinema-bg-soft: #080d20;
  --ibt-cinema-panel: rgba(5, 10, 27, .76);
  --ibt-cinema-panel-strong: rgba(8, 15, 36, .88);
  --ibt-cinema-panel-border: rgba(255, 255, 255, .11);
  --ibt-cinema-panel-radius: 18px;
  --ibt-cinema-panel-shadow: 0 20px 52px rgba(0, 0, 0, .28);
  --ibt-cinema-panel-blur: 16px;
  --ibt-cinema-copy: #b5c0d6;
  --ibt-cinema-index: #82eaf8;
  --ibt-cinema-vignette: rgba(2, 4, 13, .76);

  --ibt-space-1: 2px;
  --ibt-space-2: 4px;
  --ibt-space-3: 8px;
  --ibt-space-4: 12px;
  --ibt-space-5: 16px;
  --ibt-space-6: 24px;
  --ibt-space-7: 32px;
  --ibt-space-8: 48px;
  --ibt-space-9: 64px;
  --ibt-space-10: 80px;
  --ibt-space-11: 96px;
  --ibt-space-12: 128px;
  --ibt-radius-sm: 12px;
  --ibt-radius: 18px;
  --ibt-radius-lg: 26px;
  --ibt-radius-xl: 34px;
  --ibt-radius-pill: 999px;

  /* Semantic radii used by compact controls/panels. They intentionally keep
   * the approved visual geometry instead of forcing every component onto one
   * radius value. */
  --ibt-radius-control: 10px;
  --ibt-radius-compact: 16px;
  --ibt-radius-panel: 22px;

  --ibt-shadow-sm: 0 8px 30px rgba(20, 31, 67, .08);
  --ibt-shadow-md: 0 18px 55px rgba(20, 31, 67, .14);
  --ibt-shadow-lg: 0 30px 90px rgba(5, 13, 45, .24);
  --ibt-shadow-glow: 0 0 40px rgba(79, 125, 243, .18);
  --ibt-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --ibt-font-display: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --ibt-text-xs: clamp(.72rem, .69rem + .12vw, .78rem);
  --ibt-text-sm: clamp(.82rem, .78rem + .16vw, .92rem);
  --ibt-text-base: clamp(1rem, .95rem + .18vw, 1.08rem);
  --ibt-text-lg: clamp(1.08rem, 1rem + .34vw, 1.28rem);
  --ibt-text-xl: clamp(1.45rem, 1.18rem + 1vw, 2rem);
  --ibt-text-2xl: clamp(2rem, 1.52rem + 1.9vw, 3.25rem);
  --ibt-text-3xl: clamp(2.7rem, 1.8rem + 3.6vw, 5.5rem);
  --ibt-ease: cubic-bezier(.22, 1, .36, 1);
  --ibt-duration-fast: .2s;
  --ibt-duration: .35s;
  --ibt-duration-slow: .65s;
  --ibt-z-base: 1;
  --ibt-z-dropdown: 100;
  --ibt-z-sticky: 500;
  --ibt-z-header: 2200;
  --ibt-z-overlay: 2300;
  --ibt-z-modal: 2400;
  --ibt-z-toast: 2500;
  --ibt-focus-color: color-mix(in srgb, var(--ibt-cyan) 58%, transparent);
  --ibt-focus-width: 3px;
  --ibt-focus-offset: 3px;
  --ibt-focus: 0 0 0 3px rgba(16, 200, 232, .28);
  --color-bg: var(--ibt-bg);
  --color-bg-soft: var(--ibt-bg-soft);
  --color-surface: var(--ibt-surface);
  --color-white: var(--ibt-text);
  --color-dark-text: var(--ibt-navy);
  --color-muted: var(--ibt-muted);
  --color-muted-strong: color-mix(in srgb, var(--ibt-muted) 88%, var(--ibt-text));
  --color-line: var(--ibt-border);
  --gradient-brand: var(--ibt-gradient);
  --font-sans: var(--ibt-font);
  --font-display: var(--ibt-font-display);
  --container: var(--ibt-container);
  --container-wide: var(--ibt-container-wide);
  --header-height: var(--ibt-header-h);
  --announcement-height: var(--ibt-announcement-h);
  --radius-sm: var(--ibt-radius-sm);
  --radius: var(--ibt-radius);
  --radius-lg: var(--ibt-radius-lg);
  --shadow-soft: var(--ibt-shadow-sm);
  --shadow-md: var(--ibt-shadow-md);
  --shadow-lg: var(--ibt-shadow-lg);
  --ease: var(--ibt-ease);
  --duration-fast: var(--ibt-duration-fast);
  --duration-base: var(--ibt-duration);
  --duration-slow: var(--ibt-duration-slow);
  --focus-ring: var(--ibt-focus);
  --z-header: var(--ibt-z-header);
  --z-toast: var(--ibt-z-toast);
  --step-13: var(--ibt-space-11);
}

html[data-theme="dark"] {
  --ibt-bg: #090e20;
  --ibt-bg-soft: #0f162d;
  --ibt-surface: #121a33;
  --ibt-text: #f8fafc;
  --ibt-muted: #a8b1c5;
  --ibt-border: rgba(255, 255, 255, .1);
  /* The base brand blue is tuned for light surfaces. Dark surfaces need a
   * slightly lighter semantic blue so 13px navigation/link text clears AA
   * contrast without changing the action gradient or decorative identity. */
  --ibt-blue: #678dfb;
  --ibt-info: #678dfb;
  --ibt-shadow-sm: 0 8px 30px rgba(0, 0, 0, .18);
  --ibt-shadow-md: 0 18px 55px rgba(0, 0, 0, .28);
}

@media (max-width: 760px) {
  :root {
    --ibt-gutter: 16px;
  }
}