/* Fonts, colours and sizes. Edit the look here. */

@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/Baloo2-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/InstrumentSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/InstrumentSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Palette: deep navy (base), sky blue (actions), marigold (warm accent from the logo flames).
   Green is only for "live / running". Change colours here, nowhere else. */
:root {
  --ground: #F5F8FE;         /* page: a hint of blue, not grey */
  --surface: #FFFFFF;
  --panel: #E3ECFB;          /* soft blue bands */
  --ink: #0B1636;            /* text: navy-black */
  --ink-2: #16264F;          /* body copy: still near-black */
  --line: #B7C8EA;
  --brand: #0A1B4D;          /* Flovo navy */
  --hero: #0A1B4D;
  --sky: #1AA7EC;           /* action blue */
  --sun: #FFC93C;            /* marigold accent */
  --btn-bg: #0A1B4D;
  --btn-fg: #FFFFFF;
  --btn-hover-bg: #1AA7EC;
  --btn-hover-fg: #06122F;
  --accent: #1A6FDB;         /* flow line, links */
  --live: #0B7A4F;           /* "live" dots only */
  --band: #061236;           /* contact section and footer */
  --band-ink: #F2F6FF;
  --band-line: #2A4A9A;
  --head-bg: #FFFFFF;        /* header is white so the logo hangs free */
  --head-ink: #0A1B4D;
  --head-line: #C9D6F0;
  --sticker: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px rgba(255,255,255,.9)); /* white edge for the logo on navy */

  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 12px;
  --wrap: 1180px;
  --gutter: clamp(18px, 4vw, 40px);
  --focus: 3px solid #1A6FDB;

  color-scheme: light;
}

:root[data-theme="dark"] {      /* dark theme chosen with the toggle */
  --ground: #070F2A;
  --surface: #0E1B45;
  --panel: #12245B;
  --ink: #EAF1FF;
  --ink-2: #D2DEFA;
  --line: #2A3F7A;
  --brand: #2A62E0;
  --hero: #0C2064;
  --btn-bg: #3DB8F5;
  --btn-fg: #06122F;
  --btn-hover-bg: #FFFFFF;
  --btn-hover-fg: #06122F;
  --accent: #5CC8FF;
  --live: #46D69F;
  --band: #040B22;
  --band-ink: #EAF1FF;
  --band-line: #2A4A9A;
  --head-bg: #070F2A;
  --head-ink: #EAF1FF;
  --head-line: rgba(255, 255, 255, .16);
  --focus: 3px solid #FFC93C;
  color-scheme: dark;
}

/* Dark theme from the visitor's system. Keep these values identical to the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #070F2A;
    --surface: #0E1B45;
    --panel: #12245B;
    --ink: #EAF1FF;
    --ink-2: #D2DEFA;
    --line: #2A3F7A;
    --brand: #2A62E0;
    --hero: #0C2064;
    --btn-bg: #3DB8F5;
    --btn-fg: #06122F;
    --btn-hover-bg: #FFFFFF;
    --btn-hover-fg: #06122F;
    --accent: #5CC8FF;
    --live: #46D69F;
    --band: #040B22;
    --band-ink: #EAF1FF;
    --band-line: #2A4A9A;
    --head-bg: #070F2A;
    --head-ink: #EAF1FF;
    --head-line: rgba(255, 255, 255, .16);
    --focus: 3px solid #FFC93C;
    color-scheme: dark;
  }
}