/* Custom styles shared by every page. Tailwind (compiled into tailwind.css)
   handles the rest — see README.md → Rebuilding the CSS. */

html {
    color-scheme: light;
    background-color: #fce7ee;
}

html.dark {
    color-scheme: dark;
    background-color: #1c1b1a;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #fce7ee;
    color: #2c2a29;
}

.dark body {
    background-color: #1c1b1a;
    color: #e7e1d3;
}

/* Chromium fakes (skews) italic for glyphs with no real italic face —
   Inter has no italic weight loaded, and color-emoji fonts never do — so
   any emoji inside admin-entered free text (fabric, etc.) renders visibly
   slanted/broken in these italic captions. Playfair Display's real italic
   face is unaffected by this. */
.italic {
    font-synthesis: none;
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

.gallery-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

*:focus-visible {
    outline: 2px solid #2c2a29;
    outline-offset: 4px;
}

.dark *:focus-visible {
    outline-color: #faf9f6;
}