/* static/css/basier_square.css */

/*
  Goal:
  - Drop-in font pack for Basier Square
  - Keep the "active font" API identical across font packs by setting:
      :root { --app-font-family: ...; --pico-font-family: ...; }
  - Then you can swap fonts by making custom_font.css be a copy/symlink of
    whichever font pack you want (basier_square.css, thicccboi.css, etc).

  Your BasierSquare files are here:
    /static/fonts/BasierSquare/*.woff2
    /static/fonts/BasierSquare/*.woff

  Notes:
  - BasierSquare includes Regular, Medium, SemiBold, Bold (+ italics).
  - Font family name is set to "BasierSquare" (internal alias for CSS).
*/

@font-face {
  font-family: "BasierSquare";
  src: url("/static/fonts/BasierSquare/BasierSquare-Regular.woff2") format("woff2"),
       url("/static/fonts/BasierSquare/BasierSquare-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BasierSquare";
  src: url("/static/fonts/BasierSquare/BasierSquare-RegularItalic.woff2") format("woff2"),
       url("/static/fonts/BasierSquare/BasierSquare-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "BasierSquare";
  src: url("/static/fonts/BasierSquare/BasierSquare-Medium.woff2") format("woff2"),
       url("/static/fonts/BasierSquare/BasierSquare-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BasierSquare";
  src: url("/static/fonts/BasierSquare/BasierSquare-MediumItalic.woff2") format("woff2"),
       url("/static/fonts/BasierSquare/BasierSquare-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "BasierSquare";
  src: url("/static/fonts/BasierSquare/BasierSquare-SemiBold.woff2") format("woff2"),
       url("/static/fonts/BasierSquare/BasierSquare-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BasierSquare";
  src: url("/static/fonts/BasierSquare/BasierSquare-SemiBoldItalic.woff2") format("woff2"),
       url("/static/fonts/BasierSquare/BasierSquare-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "BasierSquare";
  src: url("/static/fonts/BasierSquare/BasierSquare-Bold.woff2") format("woff2"),
       url("/static/fonts/BasierSquare/BasierSquare-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BasierSquare";
  src: url("/static/fonts/BasierSquare/BasierSquare-BoldItalic.woff2") format("woff2"),
       url("/static/fonts/BasierSquare/BasierSquare-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/*
  One knob to set the app font:
  - Use --app-font-family everywhere you control
  - Also set Pico's --pico-font-family so Pico components follow it
*/
:root {
  --app-font-family: "BasierSquare", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pico-font-family: var(--app-font-family);
}

/* Force it everywhere (keeps behavior consistent across font packs) */
html, body {
  font-family: var(--app-font-family);
}

* {
  font-family: var(--app-font-family);
}