/* ORTOVERO shared base: self-hosted font, design tokens (light and dark), element defaults. Loaded before app.css or shop.css. */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --green: #0E6B45;
  /* D155: the brand's accents; a brand stylesheet overrides these and the greens above */
  --accent: #3CC47C;
  --green-rgb: 14, 107, 69;
  --ink-rgb: 23, 40, 30;
  --cream: #F6F1E7;
  --sand: #E2C79D;
  --wood: #C9975C;
  --wood-dark: #9F6A36;
  --tint-a: #FFE9D2;
  --tint-b: #E1F1D9;
  --tint-c: #BFE3CB;
  --tint-d: #F3E3B5;
  --tint-e: #FFF3CD;
  --green-dark: #0A5234;
  --green-soft: #E2F3E8;
  --green-ink: #0E6B45;
  --ink: #17281E;
  --ink-deep: #15261C;
  --ground: #EEF2EC;
  --panel: #F2F5F1;
  --surface: #FFFFFF;
  --text: #17281E;
  --muted: #4F6155;
  --line: #D3DCD1;
  --field: #FFFFFF;
  --tomato: #D7321F;
  --lemon: #F6D246;
  --ok-bg: #E2F3E8;
  --ok-fg: #0F6B3E;
  --warn-bg: #FFF1D2;
  --warn-fg: #7A4E00;
  --err-bg: #FCE6E2;
  --err-fg: #A8231A;
  --held-bg: #F6F2FD;
  --held-fg: #3D2478;
  --held-line: #D9CCF2;
  --info-bg: #E7F0FB;
  --info-fg: #1D4E89;
  --focus: #1D5B9E;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --shadow: 0 16px 36px -26px rgba(23, 40, 30, .55);
  --t-fast: 120ms;
  --t: 220ms;
  --t-slow: 380ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F1A14;
    --panel: #0F1A14;
    --surface: #17261D;
    --text: #EAF2EC;
    --muted: #A9BAAE;
    --line: #2C3F33;
    --field: #0F1A14;
    --green-soft: #173A28;
    --green-ink: #7ED6A4;
    --ok-bg: #173A28;
    --ok-fg: #8FDCAE;
    --warn-bg: #3A2E12;
    --warn-fg: #F2C86A;
    --err-bg: #3D1B17;
    --err-fg: #FF9C8F;
    --held-bg: #2A2140;
    --held-fg: #D3C2FA;
    --held-line: #4A3A73;
    --info-bg: #1B2A3D;
    --info-fg: #A9CDF6;
    --focus: #8DB8F2;
    --shadow: 0 16px 36px -26px rgba(0, 0, 0, .8);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1; font-weight: 900; font-variation-settings: 'wdth' 68; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--green-ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* G7: the steps of an order, in the panel and in the customer's area. D183: only on the list (ol.stepper): the shop's
   quantity stepper (div.stepper, shop.css) shares the name, and each took the other's rules (the steps turned into a
   green bar in the customer's order page, the quantity got 6 px gaps that pushed the + out of the bag) */
ol.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; counter-reset: step; }
ol.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
ol.stepper li::before { content: ''; position: absolute; top: 9px; left: calc(-50% + 12px); right: calc(50% + 12px); height: 3px; border-radius: 2px; background: var(--line); }
ol.stepper li:first-child::before { display: none; }
ol.stepper .dot { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--line); background: var(--surface); z-index: 1; }
ol.stepper .is-done { color: var(--text); }
ol.stepper .is-done::before, ol.stepper .is-now::before { background: var(--green); }
ol.stepper .is-done .dot { background: var(--green); border-color: var(--green); }
ol.stepper .is-now { color: var(--text); }
ol.stepper .is-now .dot { border-color: var(--green); box-shadow: 0 0 0 5px var(--ok-bg); }
@media (max-width: 480px) { ol.stepper li { font-size: 11.5px; } }

/* D81: a product finished in an order stays visible, struck through (panel and customer area) */
.is-gone .line-name, .is-gone .item-name, .is-gone .qty, .is-gone .item-qty { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); }
.is-gone em, .gone-tag { text-decoration: none; display: inline-block; font-style: normal; font-weight: 800; color: var(--tomato); }

/* Found by the laboratory: a customer's long text without spaces (a pasted link in the notes) made the order page
   scroll sideways on a phone. Text typed by people always wraps, anywhere if it must. */
dd, .o-who strong, .o-who small { overflow-wrap: anywhere; min-width: 0; }