/* ============================================================================
   Printabotic — Google Fonts catalog (~28 fonts)
   ============================================================================
   Same TTF file used by:
     • Canvas preview (@font-face below)
     • SVG export (opentype.js loads the SAME url from FONT_URLS in app.js)
   → guaranteed WYSIWYG.

   @frozen WYSIWYG EXPORT — whole file checksummed in 2222/EXPORT-FROZEN.md.
   VF→static Bold @font-face + `font-synthesis:none` are export-critical.
   Do not modify without explicit approval + version bump + baseline refresh.

   Lazy by browser: `@font-face` ALONE does not trigger a fetch — the browser
   only downloads a TTF when something on the page actually uses
   `font-family: 'X Custom'`. Until a user selects one of these fonts (or
   restores a saved design that uses it, or the font picker dropdown previews
   it), nothing in this file is fetched. → zero impact on initial page speed.

   font-display: swap → render fallback first, swap when TTF arrives, no FOIT.

   font-synthesis: none → kritično. Sprečava browser da pravi "faux bold" za
   fontove koji nemaju Bold weight u @font-face. Bez ovoga, canvas bi
   algoritamski podebljao Regular glyph-e kad se traži bold, dok bi
   opentype.js u SVG export-u renderovao Regular kakav jeste → različita
   širina glyph-ova → centriran/right-aligned tekst se pomera.

   "Custom" suffix on every family name → avoids conflicts with locally-installed
   versions of the same name (Open Sans, Inter, etc. may be system fonts).

   ──────────────────────────────────────────────────────────────────────────
   VF (variable font) policy:
     - 400 weight @font-face pokazuje na VF fajl (Regular instance)
     - 700 weight @font-face pokazuje na STATIC Bold TTF (zasebno upload-ovan)
   Razlog: opentype.js@1.3.4 ne primenjuje VF varijacije u getPath() — koristi
   default instance (Regular). Da bi canvas i SVG export pokazali ISTI Bold
   weight sa istim glyph metrikom, oba moraju koristiti isti TTF fajl za 700.
   ──────────────────────────────────────────────────────────────────────────
*/

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP D — System font aliases (Impact, Arial Black, Georgia, Helvetica, Arial)
   Ovde se SUBSTITUTE fontovi učitavaju da klijenti bez sistemskog Impact/itd.
   imaju identično iskustvo kao klijenti koji ga imaju. Mapiranje:
     Impact      → Anton-Regular.ttf  (heavy condensed display, single weight)
     Arial Black → Oswald-Bold.ttf    (heavy sans, single weight)
     Georgia     → SourceSerif4-Regular.ttf (serif, single weight)
     Helvetica   → Roboto-Regular.ttf + Roboto-Bold.ttf
     Arial       → Roboto-Regular.ttf + Roboto-Bold.ttf
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Impact Custom';
    src: url('/fonts/Anton-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Impact Custom';
    src: url('/fonts/Anton-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Arial Black Custom';
    src: url('/fonts/Oswald-Bold.ttf?v=2') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Arial Black Custom';
    src: url('/fonts/Oswald-Bold.ttf?v=2') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Georgia Custom';
    src: url('/fonts/SourceSerif4-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Georgia Custom';
    src: url('/fonts/SourceSerif4-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Helvetica Custom';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Helvetica Custom';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Arial Custom';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Arial Custom';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP A — Sans-serif (non-VF, separate Regular + Bold files)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Lato Custom';
    src: url('/fonts/google/Lato-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Lato Custom';
    src: url('/fonts/google/Lato-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Poppins Custom';
    src: url('/fonts/google/Poppins-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Poppins Custom';
    src: url('/fonts/google/Poppins-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP B1 — Sans-serif VF + static Bold
   400 = VF (Regular instance), 700 = static Bold TTF (matches opentype.js)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Open Sans Custom';
    src: url('/fonts/google/OpenSans-VF.ttf') format('truetype-variations'),
         url('/fonts/google/OpenSans-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Open Sans Custom';
    src: url('/fonts/google/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Montserrat Custom';
    src: url('/fonts/google/Montserrat-VF.ttf') format('truetype-variations'),
         url('/fonts/google/Montserrat-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Montserrat Custom';
    src: url('/fonts/google/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Inter Custom';
    src: url('/fonts/google/Inter-VF.ttf') format('truetype-variations'),
         url('/fonts/google/Inter-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Inter Custom';
    src: url('/fonts/google/Inter-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Nunito Custom';
    src: url('/fonts/google/Nunito-VF.ttf') format('truetype-variations'),
         url('/fonts/google/Nunito-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Nunito Custom';
    src: url('/fonts/google/Nunito-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Raleway Custom';
    src: url('/fonts/google/Raleway-VF.ttf') format('truetype-variations'),
         url('/fonts/google/Raleway-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Raleway Custom';
    src: url('/fonts/google/Raleway-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP C — Sans display / condensed (single Regular file, no Bold variant)
   Canvas+SVG oba renderuju Regular weight. font-synthesis: none sprečava
   browser da faux-bolduje kad se traži weight 700.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Bebas Neue Custom';
    src: url('/fonts/google/BebasNeue-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Bebas Neue Custom';
    src: url('/fonts/google/BebasNeue-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Fjalla One Custom';
    src: url('/fonts/google/FjallaOne-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Fjalla One Custom';
    src: url('/fonts/google/FjallaOne-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP B2 — Serif VF + static Bold (isti pattern kao B1)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Playfair Display Custom';
    src: url('/fonts/google/PlayfairDisplay-VF.ttf') format('truetype-variations'),
         url('/fonts/google/PlayfairDisplay-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Playfair Display Custom';
    src: url('/fonts/google/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Merriweather Custom';
    src: url('/fonts/google/Merriweather-VF.ttf') format('truetype-variations'),
         url('/fonts/google/Merriweather-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Merriweather Custom';
    src: url('/fonts/google/Merriweather-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Lora Custom';
    src: url('/fonts/google/Lora-VF.ttf') format('truetype-variations'),
         url('/fonts/google/Lora-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Lora Custom';
    src: url('/fonts/google/Lora-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP C2 — Serif single Regular (no Bold variant)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'PT Serif Custom';
    src: url('/fonts/google/PTSerif-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'PT Serif Custom';
    src: url('/fonts/google/PTSerif-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP C3 — Display / decorative (script + display, single Regular only)
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Pacifico Custom';
    src: url('/fonts/google/Pacifico-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Pacifico Custom';
    src: url('/fonts/google/Pacifico-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Lobster Custom';
    src: url('/fonts/google/Lobster-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Lobster Custom';
    src: url('/fonts/google/Lobster-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Bangers Custom';
    src: url('/fonts/google/Bangers-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Bangers Custom';
    src: url('/fonts/google/Bangers-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Righteous Custom';
    src: url('/fonts/google/Righteous-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Righteous Custom';
    src: url('/fonts/google/Righteous-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Permanent Marker Custom';
    src: url('/fonts/google/PermanentMarker-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Permanent Marker Custom';
    src: url('/fonts/google/PermanentMarker-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP B3 — Script / handwriting VF + static Bold
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Dancing Script Custom';
    src: url('/fonts/google/DancingScript-VF.ttf') format('truetype-variations'),
         url('/fonts/google/DancingScript-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Dancing Script Custom';
    src: url('/fonts/google/DancingScript-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Caveat Custom';
    src: url('/fonts/google/Caveat-VF.ttf') format('truetype-variations'),
         url('/fonts/google/Caveat-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Caveat Custom';
    src: url('/fonts/google/Caveat-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'Great Vibes Custom';
    src: url('/fonts/google/GreatVibes-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Great Vibes Custom';
    src: url('/fonts/google/GreatVibes-Regular.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUP B4 — Monospace VF + static Bold
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Roboto Mono Custom';
    src: url('/fonts/google/RobotoMono-VF.ttf') format('truetype-variations'),
         url('/fonts/google/RobotoMono-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'Roboto Mono Custom';
    src: url('/fonts/google/RobotoMono-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}

@font-face {
    font-family: 'JetBrains Mono Custom';
    src: url('/fonts/google/JetBrainsMono-VF.ttf') format('truetype-variations'),
         url('/fonts/google/JetBrainsMono-VF.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap; font-synthesis: none;
}
@font-face {
    font-family: 'JetBrains Mono Custom';
    src: url('/fonts/google/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap; font-synthesis: none;
}