/* Brand pack: gov360 — "Gov360 BIR" (bir.gov360.systems).

   TOKENS AND ASSETS ONLY. This file sets the font, the motif and the colour
   tokens app.css reads; it never styles a component. Loaded after app.css.

   The palette is the Gov360 shield's: Gov Navy (#0F1B4C) carries primary
   actions, the top bar and text accents; Civic Orange (#FA7500) is for the
   current page, badges, focus and key figures, and never carries small text on
   a light surface (2.8:1 on white). Orange that carries text is #A84E00. */

/* Outfit: round and friendly, like the Gov360 wordmark. Self-hosted, because
   the CSP allows fonts from this origin only. OFL-1.1, see
   ../brands/gov360/fonts/OFL-Outfit.txt.

   Outfit has no peso sign (U+20B1). Its latin-ext range leaves U+20B1 out, and
   a one-glyph subset of Manrope (OFL-1.1, ../brands/gov360/fonts/OFL-Manrope.txt)
   supplies it under the same family name, so every ₱ renders in one face at
   the right weight instead of a system fallback. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../brands/gov360/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations"),
       url("../brands/gov360/fonts/outfit-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../brands/gov360/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../brands/gov360/fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B0, U+20B2-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../brands/gov360/fonts/peso-manrope-wght-normal.woff2") format("woff2-variations"),
       url("../brands/gov360/fonts/peso-manrope-wght-normal.woff2") format("woff2");
  unicode-range: U+20B1;
}

:root {
  /* ---- theme-invariant ---- */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --motif-image: url("../brands/gov360/motif.svg");   /* the shield's orbit arc */
  --shadow-tint: 15 27 76;

  /* ---- ramps ---- */
  --gv-navy-50: #e8ecf7;         /* navy tint */
  --gv-navy-100: #c9d1ec;
  --gv-navy-200: #b3c1ff;
  --gv-navy-300: #8fa4ff;
  --gv-navy: #0f1b4c;            /* Gov Navy */
  --gv-navy-700: #0a1338;
  --gv-navy-800: #121a45;
  --gv-navy-900: #0a1033;
  --gv-mark: #00167a;            /* the shield's blue */

  --gv-orange-50: #fff1e5;
  --gv-orange-100: #ffe3c7;
  --gv-orange-200: #ffd2a8;
  --gv-orange-300: #ffb070;
  --gv-orange-400: #ff9a3d;
  --gv-orange: #fa7500;          /* Civic Orange */
  --gv-orange-600: #c85e00;
  --gv-orange-700: #a84e00;      /* orange that may carry text */
  --gv-orange-800: #7a3800;
  --gv-orange-900: #3d1c00;

  /* ---- semantic: light ---- */
  --primary: var(--gv-navy);
  --primary-hover: var(--gv-navy-700);
  --on-primary: #ffffff;
  --primary-soft: var(--gv-navy-50);

  --accent: var(--gv-orange);            /* fills and marks only, never small text */
  --on-accent: var(--n-900);
  --accent-ink: var(--gv-orange-700);
  --accent-soft: var(--gv-orange-50);
  --figure: var(--gv-orange-700);

  --info-bg: var(--gv-navy-50);
  --info-text: var(--gv-navy);

  --focus: var(--gv-orange-600);
  --focus-on-brand: var(--gv-orange-400);

  --bar-bg: var(--gv-navy);
  --bar-text: #ffffff;
  --bar-muted: #c6cdea;
  --bar-hover: rgb(255 255 255 / 0.1);
  --bar-line: rgb(255 255 255 / 0.28);
  --bar-mark: var(--gv-orange-400);
  --mark-bg: #ffffff;

  --demo-bg: var(--n-900);
  --demo-text: #f3efe8;
  --demo-chip-bg: var(--gv-orange);
  --demo-chip-text: var(--n-900);

  --offline-bg: var(--n-900);
  --offline-text: #ffffff;
  --offline-dot: var(--gv-orange-400);
  --offline-soft: var(--gv-orange-50);
  --offline-soft-text: var(--gv-orange-800);

  --stage-bg: #e9ecf3;
  --motif: var(--gv-navy-100);
  --hero-bg: var(--gv-navy);
  --hero-text: #ffffff;
  --hero-muted: #c6cdea;
  --hero-figure: var(--gv-orange-400);
  --hero-motif: rgb(255 255 255 / 0.12);
  --backdrop: rgb(10 16 51 / 0.55);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: var(--gv-navy-300);
    --primary-hover: var(--gv-navy-200);
    --on-primary: var(--gv-navy-900);
    --primary-soft: #161d3d;

    --accent: var(--gv-orange-400);
    --on-accent: var(--n-900);
    --accent-ink: var(--gv-orange-400);
    --accent-soft: #2e1a08;
    --figure: var(--gv-orange-400);

    --info-bg: #161d3d;
    --info-text: #d3dbff;

    --focus: var(--gv-orange-400);
    --focus-on-brand: var(--gv-orange-400);

    --bar-bg: var(--gv-navy-800);
    --bar-text: #ffffff;
    --bar-muted: #b9c2ea;
    --bar-hover: rgb(255 255 255 / 0.1);
    --bar-line: rgb(255 255 255 / 0.28);
    --bar-mark: var(--gv-orange-400);
    --mark-bg: #ffffff;

    --demo-bg: var(--gv-orange-400);
    --demo-text: var(--n-900);
    --demo-chip-bg: var(--n-900);
    --demo-chip-text: var(--gv-orange-200);

    --offline-bg: var(--gv-orange-100);
    --offline-text: var(--gv-orange-900);
    --offline-dot: var(--gv-orange-600);
    --offline-soft: #2e1a08;
    --offline-soft-text: var(--gv-orange-200);

    --stage-bg: #0e1224;
    --motif: #26306a;
    --hero-bg: var(--gv-navy-800);
    --hero-text: #ffffff;
    --hero-muted: #b9c2ea;
    --hero-figure: var(--gv-orange-400);
    --hero-motif: rgb(143 164 255 / 0.16);
    --backdrop: rgb(10 16 51 / 0.6);
  }
}