/* =====================================================================
   AVSPMC — DESIGN TOKENS
   ---------------------------------------------------------------------
   Change the brand here. Every colour, font and spacing value used on
   the site comes from this file, so editing a value below updates all
   six pages at once.

   Colours are hex codes (#RRGGBB). Pick new ones at
   https://htmlcolorcodes.com and paste them in.
   ===================================================================== */

:root {
  /* ---- Brand colours ---------------------------------------------- */
  --blue:        #16325C;  /* brand colour: logo, headings, buttons, footer */
  --blue-deep:   #0E2240;  /* button hover, footer base                     */
  --blue-soft:   #DCE3EE;  /* subtle tints, selected filter                 */

  --ink:         #1A1F27;  /* body text                                     */
  --muted:       #5D6573;  /* captions, secondary text                      */
  --line:        #DFE2E7;  /* hairlines between items                       */
  --surface:     #F2F3F5;  /* alternate section background                  */
  --white:       #FFFFFF;  /* page background                               */

  --on-track:    #2C6E4F;  /* "Completed"                                   */
  --in-progress: #8A5A12;  /* "Ongoing"                                     */
  --alert:       #B3261E;  /* form errors                                   */
  --whatsapp:    #1F7A4D;  /* floating WhatsApp button on phones            */

  /* Surfaces that change between light and dark mode */
  --header-bg:     rgba(255, 255, 255, 0.96);
  --badge-bg:      rgba(255, 255, 255, 0.94);
  --footer-bg:     #16325C;
  --footer-ink:    #DCE3EE;
  --footer-strong: #FFFFFF;
  --shadow:        rgba(14, 34, 64, 0.08);
  --img-filter:    none;
  color-scheme: light;

  /* ---- Fonts --------------------------------------------------------
     To change fonts: pick new ones at fonts.google.com, replace the
     <link> in the <head> of each page, then change the names here.  */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* ---- Type scale ------------------------------------------------- */
  --fs-xs:   0.8125rem;                          /* 13px */
  --fs-sm:   0.9375rem;                          /* 15px */
  --fs-base: 1.0625rem;                          /* 17px */
  --fs-md:   1.25rem;                            /* 20px */
  --fs-lg:   clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --fs-xl:   clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-2xl:  clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  /* ---- Spacing ---------------------------------------------------- */
  --gutter:    clamp(16px, 5vw, 64px);
  --max-width: 1320px;
  --section-y: clamp(72px, 10vw, 152px);
  --radius:    2px;
}

/* =====================================================================
   DARK MODE
   Follows the visitor's device setting. The sun/moon button in the
   header overrides it (saved per browser as data-theme on <html>).
   Change dark colours here; components pick them up automatically.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue:        #A9C1EA;
    --blue-deep:   #C9D8F2;
    --blue-soft:   #1C2738;
    --ink:         #E4E8EE;
    --muted:       #A0A9B6;
    --line:        #2A323E;
    --surface:     #151B24;
    --white:       #0E131A;
    --on-track:    #6CC69A;
    --in-progress: #E3B567;
    --alert:       #FF8A80;
    --header-bg:     rgba(14, 19, 26, 0.9);
    --badge-bg:      rgba(14, 19, 26, 0.88);
    --footer-bg:     #0A1220;
    --footer-ink:    #A0A9B6;
    --footer-strong: #E4E8EE;
    --shadow:        rgba(0, 0, 0, 0.45);
    --img-filter:    brightness(0.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --blue:        #A9C1EA;
  --blue-deep:   #C9D8F2;
  --blue-soft:   #1C2738;
  --ink:         #E4E8EE;
  --muted:       #A0A9B6;
  --line:        #2A323E;
  --surface:     #151B24;
  --white:       #0E131A;
  --on-track:    #6CC69A;
  --in-progress: #E3B567;
  --alert:       #FF8A80;
  --header-bg:     rgba(14, 19, 26, 0.9);
  --badge-bg:      rgba(14, 19, 26, 0.88);
  --footer-bg:     #0A1220;
  --footer-ink:    #A0A9B6;
  --footer-strong: #E4E8EE;
  --shadow:        rgba(0, 0, 0, 0.45);
  --img-filter:    brightness(0.9);
  color-scheme: dark;
}