/* ==========================================================================
   عين الرافدين | Ain Al-Rafidain - Design Tokens & System Variables
   ========================================================================== */

:root {
  /* Brand Core Colors */
  --color-primary: #0C823E;
  --color-primary-hover: #0EA24D;
  --color-primary-active: #08612E;
  --color-primary-dark: #064E25;
  --color-primary-subtle: rgba(12, 130, 62, 0.12);
  --color-primary-glow: rgba(12, 130, 62, 0.35);
  --color-primary-border: rgba(12, 130, 62, 0.28);

  /* Dark Architecture Spectrum */
  --color-black: #000000;
  --color-dark-surface-0: #07090B;
  --color-dark-surface-1: #0D1115;
  --color-dark-surface-2: #141A20;
  --color-dark-surface-3: #1D252E;
  --color-dark-surface-4: #28333E;
  --color-dark-border: rgba(255, 255, 255, 0.08);
  --color-dark-border-hover: rgba(12, 130, 62, 0.45);

  /* Light Clean Spectrum */
  --color-white: #FFFFFF;
  --color-light-surface-0: #F8FAFC;
  --color-light-surface-1: #F1F5F9;
  --color-light-surface-2: #E2E8F0;
  --color-light-border: #E2E8F0;
  --color-light-border-hover: #CBD5E1;

  /* Text & Typography Colors */
  --color-text-light-primary: #FFFFFF;
  --color-text-light-secondary: #CBD5E1;
  --color-text-light-muted: #94A3B8;
  --color-text-dark-primary: #0F172A;
  --color-text-dark-secondary: #334155;
  --color-text-dark-muted: #e2e8f0;
  --color-text-accent: #10B981;

  /* Typography Families */
  --font-heading: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Tajawal', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  /* Type Scale (Fluid clamp) */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.125rem);
  --font-size-5xl: clamp(2.75rem, 2.3rem + 2.2vw, 4rem);

  /* Spacing Scale */
  --spacing-3xs: 0.25rem;
  --spacing-2xs: 0.5rem;
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;
  --spacing-2xl: 3.5rem;
  --spacing-3xl: 5rem;
  --spacing-4xl: 7.5rem;

  /* Layout Widths */
  --container-max-width: 1320px;
  --container-wide-width: 1480px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);
  --header-height: 84px;
  --header-height-scrolled: 72px;

  /* Architectural Radii (Clean, sharp, premium - avoids toyish rounded look) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Elevated Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.22);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.35);
  --shadow-green-glow: 0 8px 32px rgba(12, 130, 62, 0.3);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Transitions & Animation Easing */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 700ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-header: 1000;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
}