/* Shared by the homepage and the app: the five type pairings (theme/appearance.js) and the appearance picker.
   Fonts are self-hosted, Latin subset, and a face only downloads when the chosen pairing uses it.
   All fonts: SIL Open Font License 1.1, see fonts/OFL-*.txt. */

/* Classic: Cormorant Garamond + DM Sans */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/cormorant-garamond-400.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-500.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/dm-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/dm-sans-500.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/dm-sans-600.woff2) format('woff2'); }

/* Modern: Inter */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter.woff2) format('woff2'); }

/* Editorial: Playfair Display + Source Sans 3 */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(fonts/playfair-display-italic.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/source-sans-3.woff2) format('woff2'); }

/* Soft: Fraunces + Nunito */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/fraunces-italic.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url(fonts/nunito.woff2) format('woff2'); }

/* Geometric: Poppins */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/poppins-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/poppins-600.woff2) format('woff2'); }

/* --- Appearance picker (theme/appearance.js mountPicker), shared by the homepage and the app --- */
.ap { display: flex; flex-direction: column; gap: 22px; }
.ap-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.ap-group legend { padding: 0; margin-bottom: 10px; font-size: 12px; letter-spacing: 0.02em; color: var(--t-muted); }
.ap-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ap-theme, .ap-font { display: flex; align-items: center; min-width: 0; border: 1px solid var(--t-line); border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.ap-theme { gap: 8px; min-height: 44px; padding: 8px 10px; font-size: 13px; }
.ap-theme > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-theme:hover, .ap-font:hover { border-color: var(--t-line-strong); }
.ap-theme[aria-pressed="true"], .ap-font[aria-pressed="true"] { border-color: var(--t-ink); background: var(--t-card); }
.ap-swatch { display: flex; flex: none; overflow: hidden; width: 28px; height: 18px; border-radius: 4px; box-shadow: 0 0 0 1px var(--t-line); }
.ap-swatch i { flex: 1; }
.ap-swatch-custom:empty { background: conic-gradient(from 90deg, #ff4b3e, #f9fbb2, #5b8266, #657ed4, #ff4b3e); }
.ap-custom { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ap-custom label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--t-muted); cursor: pointer; }
.ap-custom input[type="color"] { width: 100%; height: 36px; padding: 2px; border: 1px solid var(--t-line-strong); border-radius: 8px; background: none; cursor: pointer; }
.ap-fonts { display: grid; gap: 6px; }
.ap-font { gap: 14px; padding: 8px 12px; }
.ap-font b { flex: none; width: 46px; font-size: 26px; font-weight: 500; line-height: 1.1; }
.ap-font > span { display: flex; flex-direction: column; min-width: 0; }
.ap-font-name { font-size: 14px; font-weight: 500; }
.ap-font small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--t-muted); }
@media (max-width: 420px) { .ap-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }