/*!
 * Square Sans Font System - Complete
 * Single import for both Text and Display variants
 * Usage: @import url('https://squarefonts.vercel.app/index.css');
 */

/* ===== SQUARE SANS TEXT (Body/UI Font) ===== */
@font-face {
  font-family: "Square Sans Text";
  src: url("/fonts/Sans/SquareSansText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Text";
  src: url("/fonts/Sans/SquareSansText-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Text";
  src: url("/fonts/Sans/SquareSansText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Text";
  src: url("/fonts/Sans/SquareSansText-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Text";
  src: url("/fonts/Sans/SquareSansText-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Text";
  src: url("/fonts/Sans/SquareSansText-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Text";
  src: url("/fonts/Sans/SquareSansText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Text";
  src: url("/fonts/Sans/SquareSansText-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ===== SQUARE SANS DISPLAY (Headlines/Large Text) ===== */
@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-RegularCondensed.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-RegularExpanded.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-stretch: expanded;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-MediumCondensed.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-MediumExpanded.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-stretch: expanded;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-BoldCondensed.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}

@font-face {
  font-family: "Square Sans Display";
  src: url("/fonts/display/SquareSansDisplay-BoldExpanded.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-stretch: expanded;
  font-display: swap;
}

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  --font-square-sans-text: "Square Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-square-sans-display: "Square Sans Display", "Square Sans Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Legacy support */
  --font-square-sans: var(--font-square-sans-text);
}

/* ===== UTILITY CLASSES ===== */
/* Text Font (Body/UI) */
.font-square-sans-text {
  font-family: var(--font-square-sans-text);
}

.font-square-sans {
  font-family: var(--font-square-sans-text);
}

/* Display Font (Headlines) */
.font-square-sans-display {
  font-family: var(--font-square-sans-display);
}

.font-square-sans-display-condensed {
  font-family: var(--font-square-sans-display);
  font-stretch: condensed;
}

.font-square-sans-display-expanded {
  font-family: var(--font-square-sans-display);
  font-stretch: expanded;
}

/* Auto-apply classes */
body.square-sans-default {
  font-family: var(--font-square-sans-text);
}

/* Weight + Style combinations for Text */
.font-square-sans-text-normal {
  font-family: var(--font-square-sans-text);
  font-weight: 400;
  font-style: normal;
}
.font-square-sans-text-italic {
  font-family: var(--font-square-sans-text);
  font-weight: 400;
  font-style: italic;
}
.font-square-sans-text-medium {
  font-family: var(--font-square-sans-text);
  font-weight: 500;
  font-style: normal;
}
.font-square-sans-text-medium-italic {
  font-family: var(--font-square-sans-text);
  font-weight: 500;
  font-style: italic;
}
.font-square-sans-text-semibold {
  font-family: var(--font-square-sans-text);
  font-weight: 600;
  font-style: normal;
}
.font-square-sans-text-semibold-italic {
  font-family: var(--font-square-sans-text);
  font-weight: 600;
  font-style: italic;
}
.font-square-sans-text-bold {
  font-family: var(--font-square-sans-text);
  font-weight: 700;
  font-style: normal;
}
.font-square-sans-text-bold-italic {
  font-family: var(--font-square-sans-text);
  font-weight: 700;
  font-style: italic;
}

/* Weight combinations for Display */
.font-square-sans-display-normal {
  font-family: var(--font-square-sans-display);
  font-weight: 400;
  font-style: normal;
}
.font-square-sans-display-medium {
  font-family: var(--font-square-sans-display);
  font-weight: 500;
  font-style: normal;
}
.font-square-sans-display-bold {
  font-family: var(--font-square-sans-display);
  font-weight: 700;
  font-style: normal;
}