/* ============================================================
   Hexagon — Colour
   ------------------------------------------------------------
   The palette is organised into three hue ranges — Sky (blues),
   Land (greens), Sea (teals) — each with a Primary, Primary Dark
   and Accent tone. Backgrounds, neutrals and special-use round
   out the system. Gradients are NOT permitted: solid colour only.
   ============================================================ */

:root {
  /* ---- Primary palette — Sky ---- */
  --sky:            #01ADFF;   /* Primary Sky        — PMS 299 C  */
  --sky-dark:       #005198;   /* Primary Sky Dark   — PMS 7686 C */
  --accent-sky:     #99D6FF;   /* Accent Sky         — PMS 2905 C */

  /* ---- Primary palette — Land ---- */
  --land:           #83C410;   /* Primary Land       — PMS 368 C  */
  --land-dark:      #28721E;   /* Primary Land Dark  — PMS 356 C  */
  --accent-land:    #DFF73F;   /* Accent Land        — PMS 382 C  */

  /* ---- Primary palette — Sea ---- */
  --sea:            #04D0E6;   /* Primary Sea        — PMS 3115 C */
  --sea-dark:       #106B73;   /* Primary Sea Dark   — PMS 7468 C */
  --accent-sea:     #7DFFFC;   /* Accent Sea         — PMS 319 C  */

  /* ---- Backgrounds (work with the full palette) ---- */
  --bg-white:       #FFFFFF;   /* Hexagon White */
  --bg-gray:        #E7E8E9;   /* Cool Gray 1 C */
  --bg-dark-blue:   #00284C;   /* Background Dark Blue — PMS 281 C */

  /* ---- Neutrals (website / Pardot / landing-page use) ---- */
  --gray-1:         #E7E8E9;   /* Cool Gray 1 C  */
  --gray-4:         #B9B9BD;   /* Cool Gray 4 C  */
  --gray-9:         #71737B;   /* Cool Gray 9 C  */
  --gray-11:        #41454F;   /* Cool Gray 11 C */
  --black:          #000000;   /* Hexagon Black  */
  --white:          #FFFFFF;   /* Hexagon White  */

  /* ---- Special-use — functional only (warnings, chart highlights,
          wayfinding). Never type, logos, icons, illustrations,
          backgrounds, buttons or decoration. ---- */
  --special-yellow: #FFC505;
  --special-red:    #FA4C40;

  /* ============================================================
     Semantic aliases — light mode is Hexagon's predominant look
     ============================================================ */
  --surface-page:     var(--bg-white);
  --surface-subtle:   var(--bg-gray);
  --surface-inverse:  var(--bg-dark-blue);

  --text-primary:     var(--black);   /* type is 100% black … */
  --text-on-dark:     var(--white);   /* … or 100% white      */
  --text-muted:       var(--gray-9);  /* neutral, web/email only */
  --text-faint:       var(--gray-4);

  --border-subtle:    var(--gray-4);
  --border-strong:    var(--gray-11);

  /* Default brand hue is Sky — override per piece (mono-hue rule) */
  --brand-primary:    var(--sky);
  --brand-primary-dark: var(--sky-dark);
  --brand-accent:     var(--accent-sky);

  /* Functional / status */
  --status-warning:   var(--special-yellow);
  --status-error:     var(--special-red);
  --status-success:   var(--land);
  --status-info:      var(--sky);
}

/* ------------------------------------------------------------
   Hue-range scopes. Add class="hue-sky|hue-land|hue-sea" to a
   container to switch the mono-hue brand tokens for everything
   inside it. Keeps the 60/30/10 ratio honest — one hue per piece.
   ------------------------------------------------------------ */
.hue-sky {
  --brand-primary: var(--sky);
  --brand-primary-dark: var(--sky-dark);
  --brand-accent: var(--accent-sky);
}
.hue-land {
  --brand-primary: var(--land);
  --brand-primary-dark: var(--land-dark);
  --brand-accent: var(--accent-land);
}
.hue-sea {
  --brand-primary: var(--sea);
  --brand-primary-dark: var(--sea-dark);
  --brand-accent: var(--accent-sea);
}

/* ------------------------------------------------------------
   Dark mode — reserved for presentations, banners and other
   applications requiring a dark background for readability.
   Background is always Background Dark Blue.
   ------------------------------------------------------------ */
.theme-dark {
  --surface-page:    var(--bg-dark-blue);
  --surface-subtle:  #013a6b;       /* tonal step up from dark blue */
  --surface-inverse: var(--bg-white);
  --text-primary:    var(--white);
  --text-on-dark:    var(--white);
  --text-muted:      var(--gray-4);
  --border-subtle:   rgba(255, 255, 255, 0.18);
  --border-strong:   rgba(255, 255, 255, 0.32);
}