/* src/styles/zw-theme.css */
:root {
  --zw-mat: #1a3397;
  --zw-grid-line: oklch(1 0 0 / 0.1);
  --zw-paper: #f9f6ef;
  --zw-ink: #282840;
  --zw-hairline: rgb(40 40 64 / 0.18);
  --zw-shadow: 0 8px 20px oklch(0.15 0.06 266.7 / 0.35);
  --zw-radius: 14px;
  --zw-lime: #f1bf4e;
  --zw-pink: #eda398;
  --zw-green: #6ecf9a;
  --zw-display: var(--font-zw-display);
  --zw-mono: var(--font-zw-mono);
  --zw-body: var(--font-zw-body);
  --zw-pad: clamp(16px, 3vw, 40px);
  --zw-gap: 22px;

  /*
   * About-section portrait width. Drives BOTH the image's max-width and the
   * about grid's first column, so the space either side of the portrait stays
   * symmetrical at every breakpoint instead of drifting.
   * Mobile default; stepped up at tablet and desktop below.
   */
  --zw-portrait-w: 200px;
}

@media (min-width: 768px) {
  :root { --zw-portrait-w: 260px; }
}

@media (min-width: 1200px) {
  :root { --zw-portrait-w: 340px; }
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--zw-lime); color: var(--zw-ink); }

/* Rules below override class definitions that hardcode the old green rather
 * than referencing a variable. They must stay after :root. */
.zw-btn-outline { border-color: rgb(40 40 64 / 0.4); }
.zw-slot        { border-color: rgb(40 40 64 / 0.3); background-color: rgb(40 40 64 / 0.04); }
.zw-tag-outline { border-color: rgb(40 40 64 / 0.3); }
.zw-field       { border-color: rgb(40 40 64 / 0.3); }
.zw-link:hover  { color: var(--zw-mat); }

.zw-formmsg-success { background-color: var(--zw-mat); color: var(--zw-paper); }
.zw-formmsg-error   { background-color: var(--zw-pink); }

@keyframes zwMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .zw-marquee-track { animation: none !important; }
}

.zw-tag:empty { display: none; }

.zw-work-grid > [data-instatic-loop] { display: contents; }

html { scroll-behavior: smooth; }