/* Tokens and parts shared by the shop and the admin. */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --green: #00694a;
  --green-dark: #004f38;
  --blue: #0b3c8c;
  --blue-dark: #082c68;
  --ink: #0a1f44;
  --red: #d81e2c;
  --red-dark: #b01522;
  --white: #fff;
  --surface: #f2f5f7;
  --line: #d5dde4;
  --muted: #526078;
  --radius: 6px;
  --gutter: clamp(16px, 4vw, 48px);
  --wide: 1240px;
  color-scheme: light;
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 1rem/1.55 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 750;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

.wrap { width: min(var(--wide), 100%); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.logo-mark { width: 34px; height: 24px; flex: none; }

/* Buttons: green means go. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 20px;
  border: 2px solid var(--green); border-radius: var(--radius);
  background: var(--green); color: var(--white);
  font-weight: 650; font-stretch: 105%; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface); border-color: var(--muted); }
.btn.danger { background: transparent; color: var(--red-dark); border-color: var(--red); }
.btn.danger:hover { background: var(--red); color: var(--white); }
.btn.small { min-height: 36px; padding: 5px 12px; font-size: .9rem; }

/* Forms */
.field { display: grid; gap: 5px; }
.field > span, .label { font-weight: 600; font-size: .92rem; }
.field small { color: var(--muted); font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 11px;
  background: var(--white);
  border: 1.5px solid #aab6c2; border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--blue) 35%, transparent); border-color: var(--blue); }
textarea { min-height: 110px; resize: vertical; }

/* Signal lamps: green in stock, blue printed to order, red sold out. */
.signal { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; }
.signal::before {
  content: ''; width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 20%, transparent);
}
.signal.green { --tone: #00855e; }
.signal.blue { --tone: var(--blue); }
.signal.red { --tone: var(--red); }

.tag {
  display: inline-block; padding: 2px 9px;
  background: var(--red); color: var(--white);
  font-size: .78rem; font-weight: 700; font-stretch: 105%;
  border-radius: 3px;
}

.sil { color: #7f92a8; width: 62%; }

.notice { padding: 12px 14px; border-left: 4px solid var(--blue); background: var(--surface); }
.notice.bad { border-color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}