/* ==========================================================================
   Quadzero — colour tokens
   Derived from the Quadzero logo: "Quad" in mid gray (#8A8A8A) and
   "zero" in sky blue (#29A8E0). Change the palette here and every page
   follows. Contrast notes are against white unless stated.
   ========================================================================== */
:root{
  /* Brand blue ("zero") */
  --qz-blue-50:   #F2FAFE;   /* lightest section ground */
  --qz-blue-100:  #E3F4FC;   /* hero / hover tint */
  --qz-blue-200:  #C2E6F7;   /* borders on tinted panels */
  --qz-blue-300:  #8DD0EE;
  --qz-blue-400:  #55BBE7;
  --qz-blue-500:  #29A8E0;   /* brand blue, exact logo colour (2.7:1, decorative / large text on dark) */
  --qz-blue-600:  #1A86BC;   /* hover on dark grounds */
  --qz-blue-700:  #1576A3;   /* buttons + links on white (5.1:1 with white text) */
  --qz-blue-800:  #0F5F86;   /* button hover, pressed (7:1) */
  --qz-blue-900:  #0B3F5A;

  /* Brand gray ("Quad") and neutrals */
  --qz-gray-50:   #F7F7F8;
  --qz-gray-100:  #EFEFF1;
  --qz-gray-200:  #E2E3E6;   /* hairlines */
  --qz-gray-300:  #C9CACE;
  --qz-gray-400:  #A9AAAE;
  --qz-gray-500:  #8A8A8A;   /* brand gray, exact logo colour (3.5:1, large text / icons only) */
  --qz-gray-600:  #5E6066;   /* body copy (6.3:1) */
  --qz-gray-700:  #45474C;
  --qz-gray-800:  #2C2E33;
  --qz-gray-900:  #14181D;   /* headings */

  /* Dark grounds — header, footer, mobile menu (logo stays legible in true colours:
     gray 5:1, blue 6.4:1) */
  --qz-navy:      #0B1D2A;
  --qz-navy-soft: #13293A;
  --qz-on-dark:   #D6E4EE;   /* nav text on navy (13:1) */
  --qz-on-dark-muted: #93A9BA;

  /* Accent — warm amber to pair with the cool brand blue, for highlights only */
  --qz-accent:     #F5A524;
  --qz-accent-600: #D98A0B;

  /* Status */
  --qz-success: #1E9E6A;
  --qz-warning: #E0A100;
  --qz-danger:  #D64545;

  /* --------------------------------------------------------------------------
     Semantic aliases used by the stylesheets
     -------------------------------------------------------------------------- */
  --blue:      var(--qz-blue-700);
  --blue-600:  var(--qz-blue-800);
  --brand:     var(--qz-blue-500);
  --navy:      var(--qz-navy);
  --navy-soft: var(--qz-navy-soft);
  --tint:      var(--qz-blue-100);
  --tint-2:    var(--qz-blue-50);
  --tint-3:    var(--qz-blue-200);
  --line:      var(--qz-gray-200);
  --ink:       var(--qz-gray-900);
  --body:      var(--qz-gray-600);
  --muted:     var(--qz-gray-500);
  --white:     #FFFFFF;
  --bg:        #FFFFFF;
  --on-dark:   var(--qz-on-dark);
  --on-dark-muted: var(--qz-on-dark-muted);
  --accent:    var(--qz-accent);

  --shadow-sm:  0 2px 10px rgba(11, 29, 42, .06);
  --shadow-md:  0 14px 34px rgba(21, 118, 163, .12);
  --shadow-btn: 0 12px 24px rgba(21, 118, 163, .28);
}