/* ============================================================
   MAREA · Arrecife — custom CSS for Dynacat (hugthecurves.com)
   Mid-century modern layer over the theme block in glance.yml.
   Tokens: ink #141424 · pink #e8479d · blue #4d84e8 · gold #f4c542
           sand #d8c49a · reef #2bc4ab · cream #ecdfc3
   Rollback: remove `custom-css-file` from glance.yml theme block.
   ============================================================ */

:root {
  --marea-pink: #e8479d;
  --marea-blue: #4d84e8;
  --marea-gold: #f4c542;
  --marea-sand: #d8c49a;
  --marea-reef: #2bc4ab;
  --marea-cream: #ecdfc3;
  --marea-hairline: rgba(236, 223, 195, 0.14);
  --marea-disp: "Futura", "Century Gothic", "Avenir Next", "Jost", system-ui, sans-serif;
}

/* ---- reef separators: header and footer bookend the page, like Arrecife ---- */
.header-container {
  border-bottom: 1px solid var(--marea-reef);
  padding-bottom: 6px;
}
.footer {
  border-top: 1px solid var(--marea-reef);
  padding-top: 14px;
}

/* ---- navigation + logo: Futura small caps, letterspaced ---- */
.logo,
.nav-item {
  font-family: var(--marea-disp);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.95em;
}
.nav-item-current {
  color: var(--marea-pink);
}

/* ---- widget titles: the MCM label treatment ---- */
.widget-header {
  font-family: var(--marea-disp);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.widget-group-title {
  font-family: var(--marea-disp);
  letter-spacing: 0.14em;
}

/* ---- square the corners (targeted — circles keep their radius) ---- */
.widget-content img,
.widget-content video,
.widget-content iframe {
  border-radius: 2px;
}

/* ---- selection + focus wear the brand ---- */
::selection {
  background: var(--marea-pink);
  color: #141424;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--marea-pink);
  outline-offset: 1px;
}

/* ---- sand scrollbars ---- */
* {
  scrollbar-color: rgba(216, 196, 154, 0.4) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(216, 196, 154, 0.4); }
::-webkit-scrollbar-track { background: transparent; }