/* css/variables.css */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Syne:wght@500;600;700;800&display=swap');

:root {
  /* Luxury Color Palette */
  --clr-primary: #050A1F;
  /* Deep Midnight Blue */
  --clr-secondary: #0A1128;
  /* Rich Navy */
  --clr-accent: #D4AF37;
  /* Luxury Gold */
  --clr-accent-dim: rgba(212, 175, 55, 0.2);
  --clr-bg-light: #FDFDFD;
  /* Pearl White */
  --clr-bg-dark: #030613;
  /* Ultra Dark for contrast */
  --clr-text-main: #1A1A1A;
  --clr-text-light: #6A6E78;
  --clr-white: #FFFFFF;

  /* Glassmorphism & Borders */
  --clr-glass: rgba(255, 255, 255, 0.05);
  --clr-glass-border: rgba(255, 255, 255, 0.1);
  --clr-glass-dark: rgba(5, 10, 31, 0.6);
  --border-gold: 1px solid rgba(212, 175, 55, 0.3);
  --border-light: 1px solid rgba(0, 0, 0, 0.05);

  /* Modern Sleek Typography */
  --font-page-title: 'Cinzel', serif; /* Controls ONLY top page headings like "About The Company", "Our Projects", etc. */
  --font-heading: 'Playfair Display', serif; /* Controls all other section & content headings across the website */
  --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-number: 'Outfit', sans-serif;

  /* Layout */
  --container-width: 1500px;
  /* Slightly wider for editorial feel */
  --grid-gap: 1.5rem;

  /* Transitions */
  --transition-fast: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-normal: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 1.2s cubic-bezier(0.25, 1, 0.5, 1);

  /* Shadows */
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 20px 40px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.15);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* 4K and Ultra-wide Display Tokens */
@media (min-width: 2000px) {
  :root {
    --container-width: 1800px;
    --grid-gap: 2rem;
  }
}

@media (min-width: 2800px) {
  :root {
    --container-width: 2200px;
    --grid-gap: 2.5rem;
  }
}

/* Mobile Token Adjustments */
@media (max-width: 768px) {
  :root {
    --grid-gap: 1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --grid-gap: 1rem;
  }
}

/* Custom scrollbar for luxury feel */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--clr-bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--clr-accent);
}