/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Semantic type roles — same names as AlbumApp/theme/fonts.js.
 * font-display = titles (Fraunces), font-heading (Inter SemiBold),
 * font-sans = body (Geomini Regular), font-sub (Geomini Light).
 * Faces are already the intended weight, so keep font-weight: 400.
 */
@font-face {
  font-family: "Fraunces-Regular";
  src: url("/assets/Fraunces-Regular-31816927.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces-SemiBoldItalic";
  src: url("/assets/Fraunces-SemiBoldItalic-58e190ff.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter-SemiBold";
  src: url("/assets/Inter-SemiBold-1ef66184.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geomini-Regular";
  src: url("/assets/Geomini-Regular-0f6e3178.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geomini-Light";
  src: url("/assets/Geomini-Light-c4aa6929.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.font-display {
  font-family: "Fraunces-Regular", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: normal;
}

.font-wordmark {
  font-family: "Fraunces-SemiBoldItalic", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-style: italic;
}

.font-heading {
  font-family: "Inter-SemiBold", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
}

.font-sans {
  font-family: "Geomini-Regular", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
}

.font-sub {
  font-family: "Geomini-Light", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
}

h1,
h1.font-bold,
h1.font-semibold {
  font-family: "Fraunces-Regular", Georgia, "Times New Roman", serif;
  font-weight: 400;
}

h2,
h3,
h2.font-bold,
h3.font-bold,
h2.font-semibold,
h3.font-semibold {
  font-family: "Inter-SemiBold", ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
}

/* Native <dialog> is centered via margin: auto; Tailwind preflight zeros that. */
dialog.copy-template-sheet {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(28rem, calc(100% - 2rem));
}

dialog.copy-template-sheet::backdrop {
  background: rgba(0, 0, 0, 0.4);
}