/* === AZR Innovation Studio — Design System Variables === */
/* Colors from official AZR brand identity */

:root {
  /* Primary Brand Colors */
  --azr-navy: #1C2D4F;
  --azr-navy-dark: #0F1B33;
  --azr-blue: #1C2D4F;
  --azr-orange: #E07C24;
  --azr-gold: #D4A017;
  --azr-yellow: #F4D03F;
  --azr-purple: #2C1B3D;
  --azr-purple-light: #4A2D6B;
  --azr-white: #FFFFFF;

  /* Aliases for backward compatibility */
  --azr-teal: #E07C24;
  --azr-teal-light: #E89A4F;

  /* Extended Palette */
  --azr-blue-light: #2E4A7A;
  --azr-orange-light: #F0A050;
  --azr-gold-light: #F4D03F;
  --azr-navy-light: #243758;
  --azr-gray: #AEB6BF;
  --azr-gray-light: #F0F3F5;
  --azr-gray-dark: #5D6D7E;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--azr-orange), var(--azr-gold));
  --gradient-gold: linear-gradient(135deg, var(--azr-gold), var(--azr-yellow));
  --gradient-hero: linear-gradient(160deg, var(--azr-navy) 0%, var(--azr-navy-dark) 100%);
  --gradient-dark: linear-gradient(180deg, var(--azr-navy) 0%, #0F1B33 100%);
  --gradient-purple: linear-gradient(180deg, var(--azr-purple) 0%, #1A0F28 100%);

  /* Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-bg-light: rgba(255, 255, 255, 0.9);
  --glass-border-light: rgba(0, 0, 0, 0.08);

  /* 4D Phase Colors — gold circles on purple bg */
  --phase-discover: var(--azr-gold);
  --phase-design: var(--azr-gold);
  --phase-deliver: var(--azr-gold);
  --phase-develop: var(--azr-gold);

  /* Typography */
  --font-primary: 'Tajawal', 'Segoe UI', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.2);
  --shadow-glow-blue: 0 8px 32px rgba(28, 45, 79, 0.3);
  --shadow-glow-teal: 0 8px 32px rgba(224, 124, 36, 0.3);
  --shadow-glow-gold: 0 8px 32px rgba(212, 160, 23, 0.3);
  --shadow-glow-orange: 0 8px 32px rgba(224, 124, 36, 0.3);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 80px;
}