/* Source of truth: Website Media/DESIGN.md */
:root {
  --azul-deep-navy:     #284D69;
  --azul-signal-blue:   #4A87B5;
  --azul-midnight-ink:  #0E1A24;
  --azul-mist-blue:     #D9EAF4;
  --azul-cloud-white:   #F7FAFC;
  --azul-electric-cyan: #30C7E8;
  --azul-soft-lime:     #A7E86F;
  --azul-graphite:      #2B2F33;
  --azul-dark-gray:     #141414; /* near-black section surface (logo reveal, etc.) */
  --ai-page-bg:         #07090d; /* AI page + spotlight approach section */

  --primary:            var(--azul-deep-navy);
  --secondary:          var(--azul-signal-blue);
  --tertiary:           var(--azul-electric-cyan);
  --surface:            var(--azul-cloud-white);
  --surface-container:  #FFFFFF;
  --surface-soft:       var(--azul-mist-blue);
  --surface-strong:     var(--azul-midnight-ink);
  --surface-dark-gray:  var(--azul-dark-gray);
  --on-surface:         var(--azul-graphite);
  --on-surface-muted:   #5B6770;
  --on-surface-strong:  var(--azul-midnight-ink);
  --on-surface-inverse: var(--azul-cloud-white);
  --outline:            #C9D6E0;
  --outline-soft:       #E5ECF1;

  /* AI hero Spline recolor only (home hero uses scene defaults) */
  --hero-spline-hue:         -22deg;
  --hero-spline-saturate:     0.68;
  --hero-spline-brightness:   0.94;
  --hero-spline-contrast:     1;

  --max-w:              1200px;
  --gutter:             clamp(20px, 4vw, 60px);
  --nav-h:              108px;
  --section-pad:        clamp(80px, 12vw, 160px);
  --radius-md:          8px;
  --radius-lg:          12px;
}