/* ─── Sammy's Brezels — Shared CSS ─────────────────────────────────────────
 *
 * Linked on every page (root, shop, admin).
 * Contains: CSS variables + generic utility classes.
 * Site-specific components belong in style.css or admin.css.
 */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");

:root {
  --brown:       #612626;
  --brown-dark:  #4a1c1c;
  --brown-mid:   #8b3a3a;
  --brown-light: #f5e3e3;
  --blue:        #3d2fb0;
  --blue-dark:   #2d2285;
  --blue-light:  #eae8f8;
  --beige:       #f7eedd;
  --beige-dark:  #ede0c8;
  --cream:       #fefcf7;
  --text:        #2c1810;
  --text-muted:  #7a5c52;
  --text-light:  #a08070;
  --border:      rgba(97, 38, 38, 0.12);
  --font:        "Lato", sans-serif;
  --max-width:   1200px;
  --radius:      10px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --shadow-sm:   0 2px 8px rgba(97, 38, 38, 0.08);
  --shadow:      0 4px 20px rgba(97, 38, 38, 0.12);
  --shadow-lg:   0 8px 40px rgba(97, 38, 38, 0.16);
  --transition:  0.22s ease;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */

/* Display */
.hidden        { display: none; }
.d-inline      { display: inline; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-row      { display: flex; flex-wrap: wrap; gap: 1rem; }
.flex-row-sm   { display: flex; flex-wrap: wrap; gap: .75rem; }
.admin-row     { display: flex; flex-wrap: wrap; gap: .75rem; }
.flex-center   { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }

/* Typography */
.text-center { text-align: center; }
.text-brown  { color: var(--brown); }
.text-blue   { color: var(--blue); }
.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.text-sm     { font-size: .88rem; }
.text-xs     { font-size: .8rem; }
.text-2xs    { font-size: .78rem; }
.text-error  { color: #c0392b; font-size: .78rem; font-weight: 700; }
.italic      { font-style: italic; }

/* Margin-top */
.mt-1  { margin-top: .5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mt-sm { margin-top: .75rem; }
.mt-lg { margin-top: 1.25rem; }
.mt-xl { margin-top: 2rem; }

/* Margin-bottom */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: .75rem; }
.mb-md { margin-bottom: 1rem; }
.mb-2  { margin-bottom: 1.25rem; }
.mb-3  { margin-bottom: 1.5rem; }
.mb-4  { margin-bottom: 2rem; }
.mb-5  { margin-bottom: 2.5rem; }

/* State */
.opacity-disabled { opacity: .6; }
.is-disabled      { opacity: .6; }
.is-past          { opacity: .5; }

/* Misc */
.section-pad { padding: 4rem 0; }

/* ── Native form controls ─────────────────────────────────────────────────── */
input[type="date"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; transition: opacity .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="file"]::file-selector-button {
  background: var(--brown);
  color: white;
  border: none;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.75rem;
  transition: background 0.15s;
}
input[type="file"]:hover::file-selector-button { background: var(--brown-mid); }