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

@import url("https://fonts.googleapis.com/css2?family=Manrope:ital,wght@0,700;0,800;1,700&family=DM+Sans:wght@400;500;600&display=swap");

:root {
  --navy:        #0d2137;
  --navy-mid:    #163350;
  --ocean:       #1a5276;
  --ocean-light: #2471a3;
  --teal:        #148f9a;
  --teal-light:  #d1f2f4;
  --sand:        #f5f0e8;
  --sand-mid:    #ede6d6;
  --cream:       #faf8f4;
  --coral:       #e05c3a;
  --gold:        #c9973a;
  --text:        #1a1a1a;
  --text-muted:  #5a6070;
  --text-light:  #8a94a0;
  --border:      #ddd8cc;
  --border-dark: #c8c2b4;
  --shadow-sm:   0 1px 4px rgba(13, 33, 55, 0.07);
  --shadow-md:   0 4px 20px rgba(13, 33, 55, 0.1);
  --shadow-lg:   0 8px 40px rgba(13, 33, 55, 0.14);
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --transition:  0.22s ease;
  --font-display: "Manrope", Georgia, serif;
  --font-body:   "DM Sans", system-ui, sans-serif;
  --font:        "DM Sans", system-ui, sans-serif;
  --max-width:   1200px;
  /* Admin-specific */
  --red:         #c0392b;
  --green:       #1a7a4a;
}

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

/* Display */
.hidden        { display: none; }
.d-inline      { display: inline; }
.d-inline-flex { display: inline-flex; }
.d-block       { display: block; }
.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; }
.flex-row-xs   { display: flex; flex-wrap: wrap; gap: .5rem; }
.flex-col      { display: flex; flex-direction: column; gap: 1rem; }
.flex-center   { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.flex-end      { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.w-full        { width: 100%; }
.w-fit         { width: fit-content; }
.mt-auto       { margin-top: auto; }

/* Typography */
.text-center  { text-align: center; }
.text-muted   { color: var(--text-muted); }
.text-light   { color: var(--text-light); }
.text-navy    { color: var(--navy); }
.text-teal    { color: var(--teal); }
.text-coral   { color: var(--coral); }
.text-red     { color: var(--red); }
.text-sm      { font-size: .875rem; }
.text-xs      { font-size: .8rem; }
.text-2xs     { font-size: .75rem; }
.text-lg      { font-size: 1.3rem; }
.text-xl      { font-size: 2.5rem; }
.fw-400       { font-weight: 400; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }
.italic       { font-style: italic; }
.opacity-75   { opacity: .75; }
.opacity-50   { opacity: .5; }
.opacity-35   { opacity: .35; }

/* Margin-top */
.mt-tiny { margin-top: .25rem; }
.mt-1    { margin-top: .5rem; }
.mt-sm   { margin-top: .75rem; }
.mt-2    { margin-top: 1rem; }
.mt-3    { margin-top: 1.5rem; }
.mt-4    { margin-top: 1.75rem; }
.mt-xl   { margin-top: 2.5rem; }
.mt-2xl  { margin-top: 5rem; }

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

/* Misc */
.btn-full        { width: 100%; justify-content: center; }
.is-disabled     { opacity: .6; }
.label-clickable { font-weight: 500; cursor: pointer; font-size: .9rem; }
.bg-white        { background: white; }
.position-rel    { position: relative; }

/* ── 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(--teal);
  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(--navy-mid); }

/* ── Site credit (subtle designer attribution) ─────────────────────────────── */
.site-credit {
  text-align: center;
  font-size: .72rem;
  padding: .7rem 1rem;
  opacity: .5;
}
/* Scoped under `footer` so the inherited footer-text colour beats any site-wide
   `a:hover` rule — without this, hover could recolour the link to the background. */
footer .site-credit a { color: inherit; text-decoration: none; }
footer .site-credit a:hover,
footer .site-credit a:focus { color: inherit; text-decoration: underline; }