/* ============================================================
   VARIABLES.CSS — Al-Abbas Vocational Preparatory School
   Complete Design System Custom Properties
   Premium $7000 Quality — Royal Navy & Gold Theme
   ============================================================ */

:root {
  /* ─────────────────────────────────────────────
     COLOR SYSTEM — Navy Scale
     ───────────────────────────────────────────── */
  --navy-950: #030810;
  --navy-900: #050A14;
  --navy-800: #0A1628;
  --navy-700: #0F2042;
  --navy-600: #152C5C;
  --navy-500: #1B3876;
  --navy-400: #234A99;
  --navy-300: #2E5FBF;
  --navy-200: #4A7FD9;
  --navy-100: #7BA3E6;

  /* ─────────────────────────────────────────────
     COLOR SYSTEM — Gold Scale
     ───────────────────────────────────────────── */
  --gold-900: #6B5A1E;
  --gold-800: #8B7428;
  --gold-700: #AA8A30;
  --gold-600: #C8A84E;
  --gold-500: #D4B85C;
  --gold-400: #E0C86A;
  --gold-300: #ECD97E;
  --gold-200: #F5E8A0;
  --gold-100: #FCF4D0;

  /* ─────────────────────────────────────────────
     COLOR SYSTEM — Emerald Accent
     ───────────────────────────────────────────── */
  --emerald-800: #145218;
  --emerald-700: #1B5E20;
  --emerald-600: #257A28;
  --emerald-500: #2E7D32;
  --emerald-400: #43A047;
  --emerald-300: #66BB6A;

  /* ─────────────────────────────────────────────
     COLOR SYSTEM — Marble & Neutrals
     ───────────────────────────────────────────── */
  --marble: #FAF6F0;
  --marble-200: #F0E8DC;
  --marble-300: #E5DAC8;
  --marble-400: #D5C8B0;

  /* ─────────────────────────────────────────────
     COLOR SYSTEM — Text Colors
     ───────────────────────────────────────────── */
  --text-primary: #F5F0E8;
  --text-secondary: #B8B0A0;
  --text-muted: #7A7468;
  --text-accent: var(--gold-500);
  --text-heading: var(--gold-400);
  --text-inverse: var(--navy-900);

  /* ─────────────────────────────────────────────
     COLOR SYSTEM — Department Accents
     ───────────────────────────────────────────── */
  --dept-cyber-primary: #4A90D9;
  --dept-cyber-secondary: #7B68EE;
  --dept-surveying-primary: #43A047;
  --dept-surveying-secondary: #66BB6A;
  --dept-electrical-primary: #FFA000;
  --dept-electrical-secondary: #FFD54F;
  --dept-medical-primary: #E53935;
  --dept-medical-secondary: #EF5350;
  --dept-assembly-primary: #00ACC1;
  --dept-assembly-secondary: #4DD0E1;
  --dept-phones-primary: #7B1FA2;
  --dept-phones-secondary: #BA68C8;

  /* ─────────────────────────────────────────────
     GRADIENTS
     ───────────────────────────────────────────── */
  --gradient-gold: linear-gradient(135deg, #AA8A30, #C8A84E, #E0C86A, #C8A84E, #AA8A30);
  --gradient-gold-text: linear-gradient(90deg, #C8A84E, #E0C86A, #FCF4D0, #E0C86A, #C8A84E);
  --gradient-gold-subtle: linear-gradient(135deg, rgba(200, 168, 78, 0.15), rgba(224, 200, 106, 0.08));
  --gradient-gold-shine: linear-gradient(45deg, transparent 30%, rgba(252, 244, 208, 0.3) 50%, transparent 70%);

  --gradient-navy: linear-gradient(180deg, #050A14, #0F2042);
  --gradient-navy-reverse: linear-gradient(180deg, #0F2042, #050A14);
  --gradient-navy-radial: radial-gradient(ellipse at center, #152C5C 0%, #050A14 70%);

  --gradient-hero: linear-gradient(180deg,
    rgba(5, 10, 20, 0.1) 0%,
    rgba(10, 22, 40, 0.6) 50%,
    rgba(5, 10, 20, 0.95) 100%);

  --gradient-glass: linear-gradient(135deg,
    rgba(200, 168, 78, 0.05),
    rgba(15, 32, 66, 0.12));

  --gradient-glass-hover: linear-gradient(135deg,
    rgba(200, 168, 78, 0.1),
    rgba(15, 32, 66, 0.2));

  --gradient-overlay-top: linear-gradient(180deg,
    rgba(5, 10, 20, 0.8) 0%,
    transparent 100%);

  --gradient-overlay-bottom: linear-gradient(0deg,
    rgba(5, 10, 20, 0.9) 0%,
    transparent 100%);

  --gradient-section-divider: linear-gradient(90deg,
    transparent 0%,
    var(--gold-600) 20%,
    var(--gold-400) 50%,
    var(--gold-600) 80%,
    transparent 100%);

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — Font Families
     ───────────────────────────────────────────── */
  --font-arabic: 'Tajawal', 'Noto Sans Arabic', sans-serif;
  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Consolas', monospace;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — Font Sizes (Fluid)
     ───────────────────────────────────────────── */
  --fs-xs: 0.75rem;                                    /* 12px */
  --fs-sm: 0.875rem;                                   /* 14px */
  --fs-base: 1rem;                                     /* 16px */
  --fs-md: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);   /* 16-18px */
  --fs-lg: clamp(1.125rem, 0.75vw + 1rem, 1.375rem);  /* 18-22px */
  --fs-xl: clamp(1.25rem, 1vw + 1rem, 1.75rem);       /* 20-28px */
  --fs-2xl: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);     /* 24-36px */
  --fs-3xl: clamp(1.875rem, 2vw + 1.25rem, 3rem);     /* 30-48px */
  --fs-4xl: clamp(2.25rem, 3vw + 1.25rem, 4rem);      /* 36-64px */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 5rem);      /* 40-80px */
  --fs-hero: clamp(3rem, 6vw + 1rem, 6rem);            /* 48-96px */

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — Font Weights
     ───────────────────────────────────────────── */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — Line Heights
     ───────────────────────────────────────────── */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;
  --lh-loose: 2;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — Letter Spacing
     ───────────────────────────────────────────── */
  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;
  --ls-widest: 0.2em;
  --ls-ultra: 0.35em;

  /* ─────────────────────────────────────────────
     SPACING SCALE
     ───────────────────────────────────────────── */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  --section-padding-y: clamp(4rem, 8vw, 8rem);
  --section-padding-x: clamp(1rem, 3vw, 2rem);

  /* ─────────────────────────────────────────────
     BORDER RADIUS
     ───────────────────────────────────────────── */
  --radius-xs: 0.25rem;    /* 4px */
  --radius-sm: 0.5rem;     /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.5rem;     /* 24px */
  --radius-2xl: 2rem;      /* 32px */
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* ─────────────────────────────────────────────
     SHADOWS
     ───────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2),
               0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25),
               0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3),
               0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.35),
               0 8px 16px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.4),
                0 12px 24px rgba(0, 0, 0, 0.3);

  --shadow-gold: 0 4px 20px rgba(200, 168, 78, 0.25),
                 0 2px 8px rgba(200, 168, 78, 0.15);
  --shadow-gold-lg: 0 8px 32px rgba(200, 168, 78, 0.3),
                    0 4px 16px rgba(200, 168, 78, 0.2);
  --shadow-gold-glow: 0 0 20px rgba(200, 168, 78, 0.3),
                      0 0 40px rgba(200, 168, 78, 0.15),
                      0 0 60px rgba(200, 168, 78, 0.05);
  --shadow-gold-intense: 0 0 30px rgba(200, 168, 78, 0.5),
                         0 0 60px rgba(200, 168, 78, 0.25),
                         0 0 90px rgba(200, 168, 78, 0.1);

  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-inner-gold: inset 0 0 20px rgba(200, 168, 78, 0.1);

  /* ─────────────────────────────────────────────
     GLASS-MORPHISM TOKENS
     ───────────────────────────────────────────── */
  --glass-bg: rgba(10, 22, 40, 0.6);
  --glass-bg-light: rgba(10, 22, 40, 0.4);
  --glass-bg-heavy: rgba(10, 22, 40, 0.8);
  --glass-bg-card: rgba(15, 32, 66, 0.5);

  --glass-border: rgba(200, 168, 78, 0.15);
  --glass-border-hover: rgba(200, 168, 78, 0.35);
  --glass-border-active: rgba(200, 168, 78, 0.5);
  --glass-border-subtle: rgba(200, 168, 78, 0.08);

  --glass-blur: blur(20px);
  --glass-blur-light: blur(12px);
  --glass-blur-heavy: blur(30px);

  --glass-saturate: saturate(1.8);

  /* ─────────────────────────────────────────────
     TRANSITIONS & TIMING
     ───────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow: 0.6s ease;
  --transition-premium: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-elastic: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --ease-in-out-premium: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─────────────────────────────────────────────
     Z-INDEX LAYERS
     ───────────────────────────────────────────── */
  --z-behind: -1;
  --z-base: 0;
  --z-canvas: 1;
  --z-particles: 2;
  --z-overlay: 3;
  --z-content: 5;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 500;
  --z-nav: 1000;
  --z-modal-backdrop: 1500;
  --z-modal: 2000;
  --z-tooltip: 3000;
  --z-notification: 4000;
  --z-preloader: 9999;

  /* ─────────────────────────────────────────────
     CONTAINER & LAYOUT
     ───────────────────────────────────────────── */
  --container-max: 1400px;
  --container-narrow: 900px;
  --container-wide: 1600px;
  --container-padding: clamp(1rem, 3vw, 2rem);

  --nav-height: 80px;
  --nav-height-scrolled: 64px;
  --footer-min-height: 300px;

  /* ─────────────────────────────────────────────
     ISLAMIC / DECORATIVE TOKENS
     ───────────────────────────────────────────── */
  --pattern-opacity: 0.06;
  --pattern-color: var(--gold-600);
  --divider-width: 80px;
  --divider-height: 3px;
  --crest-size: 120px;

  /* ─────────────────────────────────────────────
     BREAKPOINTS (reference only — use in @media)
     ───────────────────────────────────────────── */
  /* Mobile:  < 768px   */
  /* Tablet:  768-1199px */
  /* Desktop: 1200+      */
}