/* ============================================
   NWK-BSAC Design System v2 — CSS Variables
   "Deep Dive" Theme
   ============================================ */

:root {
  /* === Mood A: Deep Ocean === */
  --abyss:        #071932;
  --deep:         #0B2545;
  --ocean:        #003C5F;

  /* === Mood B: Mediterranean === */
  --teal:         #009688;
  --aqua:         #45C8D1;
  --pale:         #E0F7FA;

  /* === Mood C: Warm Shallows === */
  --coral:        #F0774A;
  --sand:         #F5F0EB;
  --gold:         #C5A64E;

  /* === Neutrals === */
  --text-primary: #0A1628;
  --text-secondary: #5A6B7B;
  --border:       rgba(11, 37, 69, 0.1);
  --border-light: rgba(11, 37, 69, 0.06);
  --white:        #FFFFFF;

  /* === Semantic Aliases === */
  --hero-bg:      var(--abyss);
  --section-dark:  var(--deep);
  --btn-primary:  var(--ocean);
  --link:         var(--teal);
  --highlight:    var(--aqua);
  --section-light: var(--pale);
  --cta:          var(--coral);
  --section-warm:  var(--sand);
  --accent:       var(--gold);

  /* === Typography === */
  --font: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);    /* 12-13px */
  --text-sm:   clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);   /* 13-15px */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);         /* 16-18px */
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);         /* 18-22px */
  --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);        /* 20-28px */
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2.25rem);            /* 24-36px */
  --text-3xl:  clamp(2rem, 1.6rem + 2vw, 3rem);                  /* 32-48px */
  --text-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);         /* 36-56px */

  /* === Spacing === */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-xxl: 100px;

  --container:  1200px;
  --container-narrow: 800px;
  --card-gap:   24px;
  --section-padding: clamp(60px, 8vw, 100px);

  /* === Shadows === */
  --shadow-sm:  0 2px 8px rgba(7, 25, 50, 0.08);
  --shadow-md:  0 4px 20px rgba(7, 25, 50, 0.12);
  --shadow-lg:  0 8px 32px rgba(7, 25, 50, 0.16);
  --shadow-glow-teal: 0 0 20px rgba(69, 200, 209, 0.3);
  --shadow-glow-coral: 0 0 20px rgba(240, 119, 74, 0.3);

  /* === Border Radius === */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill:  50px;
  --radius-circle: 50%;

  /* === Transitions === */
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* === Glass Effect === */
  --glass-bg:    rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur:  12px;
}