/* =========================================================
   DABDIB ALJDIDA — Design System / CSS Custom Properties
   ========================================================= */

:root {
  /* Light Mode */
  --clr-bg-primary:       #FFFFFF;
  --clr-bg-secondary:     #F8F5F0;
  --clr-bg-tertiary:      #F0EBE0;
  --clr-bg-dark:          #1A1A2E;
  --clr-text-primary:     #1A1A2E;
  --clr-text-secondary:   #4A5568;
  --clr-text-muted:       #718096;
  --clr-gold:             #C9A84C;
  --clr-gold-light:       #D9BC72;
  --clr-gold-dark:        #A8872A;
  --clr-slate:            #4A5568;
  --clr-border:           rgba(201, 168, 76, 0.28);
  --clr-border-subtle:    rgba(74, 85, 104, 0.14);
  --clr-card-bg:          #FFFFFF;
  --clr-card-hover:       #FDFAF5;
  --clr-navbar-bg:        rgba(255, 255, 255, 0.88);
  --clr-navbar-scrolled:  rgba(255, 255, 255, 0.97);
  --clr-footer-bg:        #1A1A2E;
  --clr-footer-text:      #F0EDE8;
  --clr-footer-muted:     #8899AA;
  --clr-shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.06);
  --clr-shadow-md:        0 4px 20px rgba(0, 0, 0, 0.09);
  --clr-shadow-lg:        0 8px 40px rgba(0, 0, 0, 0.13);
  --clr-shadow-gold:      0 8px 32px rgba(201, 168, 76, 0.30);
  --clr-hero-overlay: linear-gradient(
    to top,
    rgba(26, 26, 46, 0.92) 0%,
    rgba(26, 26, 46, 0.55) 45%,
    rgba(26, 26, 46, 0.20) 100%
  );

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);
  --section-pad:   clamp(70px, 10vw, 120px);
  --radius-sm:     6px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;

  /* Easing */
  --ease:        0.3s ease;
  --ease-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Navbar height */
  --nav-h: 72px;
}

/* Dark Mode */
html.dark {
  --clr-bg-primary:       #0D1B2A;
  --clr-bg-secondary:     #1B2838;
  --clr-bg-tertiary:      #142030;
  --clr-bg-dark:          #060F1A;
  --clr-text-primary:     #F0EDE8;
  --clr-text-secondary:   #B8C4D0;
  --clr-text-muted:       #7890A4;
  --clr-gold:             #E8C76A;
  --clr-gold-light:       #F5D980;
  --clr-gold-dark:        #C9A84C;
  --clr-slate:            #8899AA;
  --clr-border:           rgba(232, 199, 106, 0.28);
  --clr-border-subtle:    rgba(255, 255, 255, 0.08);
  --clr-card-bg:          #1B2838;
  --clr-card-hover:       #223040;
  --clr-navbar-bg:        rgba(13, 27, 42, 0.88);
  --clr-navbar-scrolled:  rgba(13, 27, 42, 0.97);
  --clr-footer-bg:        #060F1A;
  --clr-footer-text:      #F0EDE8;
  --clr-footer-muted:     #506070;
  --clr-shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.35);
  --clr-shadow-md:        0 4px 20px rgba(0, 0, 0, 0.45);
  --clr-shadow-lg:        0 8px 40px rgba(0, 0, 0, 0.55);
  --clr-shadow-gold:      0 8px 32px rgba(232, 199, 106, 0.22);
  --clr-hero-overlay: linear-gradient(
    to top,
    rgba(6, 15, 26, 0.96) 0%,
    rgba(6, 15, 26, 0.65) 45%,
    rgba(6, 15, 26, 0.32) 100%
  );
}