/*
 * Bundled worksheet fonts.
 *
 * Files live under /public/fonts/<FolderName>/<FolderName>-Regular.ttf
 * (Next.js serves /public as the site root, so the URL becomes
 *  /fonts/<FolderName>/<FolderName>-Regular.ttf).
 *
 * Variable fonts (Anuphan, Baloo 2, Comfortaa, Fredoka, IBM Plex,
 * Lexend, Montserrat, Noto Sans Thai Looped, Nunito, Open Sans,
 * Quicksand, Raleway, Sarabun) carry every weight in a single file —
 * one @font-face is enough.
 *
 * `font-display: swap` shows the canvas with the system fallback while
 * the woff downloads, then re-renders. The brief flash is preferable
 * to staring at a blank page for half a second.
 *
 * Imported once from src/app/layout.tsx — DO NOT @import this from
 * a CSS module or it'll be inlined per route.
 */

/* ─── Classic / web-safe (the 5 fonts shown in the picker) ──────
 *
 * Always served from /public/fonts so the editor never has to wonder
 * whether the user's OS happens to have the file. These are the names
 * the user picks from the font dropdown.
 */

@font-face {
  font-family: "Arimo";
  src: url("/fonts/Arimo/Arimo-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tinos";
  src: url("/fonts/Tinos/Tinos-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cousine";
  src: url("/fonts/Cousine/Cousine-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comic Neue";
  src: url("/fonts/Comic_Neue/Comic_Neue-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anton";
  src: url("/fonts/Anton/Anton-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Legacy aliases (NOT shown in picker) ──────────────────────
 *
 * Old worksheets stored "Arial" / "Times New Roman" / etc. before we
 * switched to the Google Fonts replacements. Map those names to the
 * matching bundle so existing files keep rendering with the right
 * metrics. `local()` first lets Mac/Windows users still see the real
 * OS font when present — the bundled file is the safety net.
 */

@font-face {
  font-family: "Arial";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"),
       url("/fonts/Arimo/Arimo-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"),
       url("/fonts/Arimo/Arimo-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Verdana";
  src: local("Verdana"),
       url("/fonts/Arimo/Arimo-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tahoma";
  src: local("Tahoma"),
       url("/fonts/Arimo/Arimo-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Trebuchet MS";
  src: local("Trebuchet MS"),
       url("/fonts/Arimo/Arimo-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Times New Roman";
  src: local("Times New Roman"), local("Times"),
       url("/fonts/Tinos/Tinos-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Georgia";
  src: local("Georgia"),
       url("/fonts/Tinos/Tinos-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Courier New";
  src: local("Courier New"), local("Courier"),
       url("/fonts/Cousine/Cousine-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comic Sans MS";
  src: local("Comic Sans MS"),
       url("/fonts/Comic_Neue/Comic_Neue-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Impact";
  src: local("Impact"),
       url("/fonts/Anton/Anton-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Sans-serif (modern, readable) ────────────────────────────── */

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/Open_Sans/Open_Sans-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito/Nunito-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat/Montserrat-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raleway";
  src: url("/fonts/Raleway/Raleway-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("/fonts/Quicksand/Quicksand-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comfortaa";
  src: url("/fonts/Comfortaa/Comfortaa-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fredoka";
  src: url("/fonts/Fredoka/Fredoka-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("/fonts/Lexend/Lexend-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Varela Round";
  src: url("/fonts/Varela_Round/Varela_Round-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/Baloo_2/Baloo_2-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Andika";
  src: url("/fonts/Andika/Andika-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sniglet";
  src: url("/fonts/Sniglet/Sniglet-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jua";
  src: url("/fonts/Jua/Jua-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Handwriting / Kid-friendly (worksheet body) ─────────────── */

@font-face {
  font-family: "Patrick Hand";
  src: url("/fonts/Patrick_Hand/Patrick_Hand-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Indie Flower";
  src: url("/fonts/Indie_Flower/Indie_Flower-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Short Stack";
  src: url("/fonts/Short_Stack/Short_Stack-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Schoolbell";
  src: url("/fonts/Schoolbell/Schoolbell-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pangolin";
  src: url("/fonts/Pangolin/Pangolin-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Handwriting Practice (with stroke guides) ───────────────── */

/* "Nada" is our own dashed tracing font — generated from Quicksand
   (SIL OFL) by scripts/build-nada-font.cjs. Every glyph is the dashed
   pen-stroke centerline, pre-baked so it works everywhere a normal
   font does. */
@font-face {
  font-family: "Nada";
  /* ?v= cache-buster — bump when regenerating the font (same reason
     Mina carries one: browsers cache public font files hard). */
  src: url("/fonts/Nada/Nada-Regular.ttf?v=2") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playwrite CA Guides";
  src: url("/fonts/Playwrite_CA_Guides/Playwrite_CA_Guides-Regular.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mina";
  src: url("/fonts/Mina/Mina-Regular.ttf?v=6") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Cursive / Decorative ────────────────────────────────────── */

@font-face {
  font-family: "Allura";
  src: url("/fonts/Allura/Allura-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Italianno";
  src: url("/fonts/Italianno/Italianno-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Parisienne";
  src: url("/fonts/Parisienne/Parisienne-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sacramento";
  src: url("/fonts/Sacramento/Sacramento-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Yellowtail";
  src: url("/fonts/Yellowtail/Yellowtail-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Whisper";
  src: url("/fonts/Whisper/Whisper-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Great Vibes";
  src: url("/fonts/Great_Vibes/Great_Vibes-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Thai support ─────────────────────────────────────────────── */

@font-face {
  font-family: "Anuphan";
  src: url("/fonts/Anuphan/Anuphan-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("/fonts/IBM_Plex_Sans_Thai/IBM_Plex_Sans_Thai-Regular.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Thai Looped";
  src: url("/fonts/Noto_Sans_Thai_Looped/Noto_Sans_Thai_Looped-Regular.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarabun";
  src: url("/fonts/Sarabun/Sarabun-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Krub";
  src: url("/fonts/Krub/Krub-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Itim";
  src: url("/fonts/Itim/Itim-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("/fonts/Chakra_Petch/Chakra_Petch-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* TH Sarabun New ships real Bold/Italic/BoldItalic files, so declare
   each face explicitly — genuine glyphs beat browser-synthesized
   bold/oblique, especially for Thai loops at print sizes. */
@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/TH_Sarabun_New/THSarabunNew-Regular.ttf") format("truetype");
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/TH_Sarabun_New/THSarabunNew-Bold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/TH_Sarabun_New/THSarabunNew-Italic.ttf") format("truetype");
  font-weight: 100 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "TH Sarabun New";
  src: url("/fonts/TH_Sarabun_New/THSarabunNew-BoldItalic.ttf") format("truetype");
  font-weight: 600 900;
  font-style: italic;
  font-display: swap;
}

/* ─── Special / Symbol ─────────────────────────────────────────── */

@font-face {
  font-family: "Libre Barcode 39";
  src: url("/fonts/Libre_Barcode_39/Libre_Barcode_39-Regular.ttf")
    format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}