/* ============================================================
   Yates Produce — Design Tokens · "Dawn Dock"
   Engineered freshness: pre-dawn dock, instrument mono, one warm
   sun signal + a 35-year heritage seal. Light & dark.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Signal greens ---- */
  --green-900:#06291D; --green-800:#0A5C40; --green-700:#0D7350;
  --green-signal:#0F8A5F; --green-600:#0F8A5F; --green-500:#15A06E;
  --green-400:#3FBE93; --green-300:#7DD3B0; --green-100:#D6EFE4; --green-50:#EFF7F3;
  --green-deep:#0A5C40;

  /* ---- Dock-sun warm signal ---- */
  --sun:#C9791E; --sun-soft:#E0902A; --sun-bright:#F2A93B; --sun-block:#C9791E;
  --on-sun:#1A0F02;
  --amber-600:#C9791E; --amber-500:#E0902A; --amber-400:#F2A93B; --amber-100:#F8E6C9;

  --kraft:#C9A878; --crate:#B4742E; --crate-dk:#8A5620; --seal-ink:#9E3A20;

  /* ---- Semantic — light ---- */
  --bg:#F4F7F5; --bg-alt:#E9F0EC; --bg-mesh:#E7F0EB;
  --surface:#FFFFFF; --surface-2:#FBFDFC; --surface-raised:#FCFEFD;
  --ink:#0B1411; --ink-soft:#33433C; --ink-muted:#5E7068;
  --line:#D4E2DA; --line-strong:#B9CDC3; --hairline:#C9D8CF;
  --border:#D4E2DA; --border-soft:#E4EEE9;

  --primary:#0F8A5F; --primary-700:#0D7350; --on-primary:#FFFFFF;
  --accent:#C9791E; --accent-500:#E0902A; --on-accent:#1A0F02;
  --sun-text:#B45309; --green-text:#0A5C40;   /* AA-safe text-only variants on light surfaces */

  --live-dot:#0F8A5F; --limited:#C2410C;
  --ok:#0F8A5F; --warn:#C2410C; --danger:#C2410C; --danger-bg:#FCEEE6;

  /* ---- Type ---- */
  --font-display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  --step--2: clamp(.72rem,.70rem + .1vw,.78rem);
  --step--1: clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:  clamp(1rem,.97rem + .18vw,1.06rem);
  --step-1:  clamp(1.18rem,1.08rem + .45vw,1.36rem);
  --step-2:  clamp(1.5rem,1.3rem + .95vw,1.95rem);
  --step-3:  clamp(2rem,1.6rem + 1.9vw,2.9rem);
  --step-4:  clamp(2.7rem,1.95rem + 3.3vw,4.5rem);
  --step-5:  clamp(3.3rem,2.2rem + 5.2vw,6.4rem);
  --step-6:  clamp(4rem,2.4rem + 7vw,8rem);

  /* ---- Spacing / layout ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --pad-compress: clamp(2.5rem,5vw,4rem);
  --pad-expand:   clamp(5rem,9vw,8.5rem);
  --container:1240px;

  /* ---- Radius / shadow ---- */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(8,28,20,.06), 0 1px 3px rgba(8,28,20,.07);
  --shadow-md:0 8px 24px -10px rgba(8,28,20,.16), 0 2px 6px rgba(8,28,20,.07);
  --shadow-lg:0 30px 70px -24px rgba(8,28,20,.28), 0 10px 24px -12px rgba(8,28,20,.16);
  --shadow-amber:0 10px 30px -12px rgba(201,121,30,.32);
  --ring:0 0 0 3px rgba(15,138,95,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
}

/* ---------- Dark ---------- */
:root[data-theme="dark"] {
  --green-signal:#15B37A; --green-600:#15B37A; --green-700:#13A06E; --green-deep:#0F8A5F;
  --green-100:#0E3A2A; --green-50:#0A241A; --green-300:#5FD3A6; --green-400:#3FBE93;
  --sun:#FFB84D; --sun-soft:#F2A93B; --sun-bright:#FFC766; --sun-block:#F2A93B; --on-sun:#1A0F02;
  --amber-600:#F2A93B; --amber-500:#E0902A; --amber-400:#FFB84D; --amber-100:#3A2A12;
  --seal-ink:#E0714D; --kraft:#A98F66;

  --bg:#070D0B; --bg-alt:#0A1410; --bg-mesh:#0B1714;
  --surface:#0E1A15; --surface-2:#0C1712; --surface-raised:#12231C;
  --ink:#EAF4EE; --ink-soft:#B7CEC2; --ink-muted:#7C9588;
  --line:#1B2E26; --line-strong:#284439; --hairline:#22382E;
  --border:#1B2E26; --border-soft:#15261F;

  --primary:#15B37A; --primary-700:#13A06E; --on-primary:#04120C;
  --accent:#F2A93B; --accent-500:#E0902A; --on-accent:#1A0F02;
  --sun-text:var(--sun); --green-text:var(--green-signal);
  --live-dot:#15B37A; --limited:#FB923C;
  --ok:#15B37A; --warn:#FB923C; --danger:#FB923C; --danger-bg:#2A1414;

  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-lg:0 30px 70px -24px rgba(0,0,0,.72);
  --shadow-amber:0 10px 30px -12px rgba(0,0,0,.55);
  --ring:0 0 0 3px color-mix(in srgb, var(--sun) 70%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green-signal:#15B37A; --green-600:#15B37A; --green-700:#13A06E; --green-deep:#0F8A5F;
    --green-100:#0E3A2A; --green-50:#0A241A; --green-300:#5FD3A6; --green-400:#3FBE93;
    --sun:#FFB84D; --sun-soft:#F2A93B; --sun-bright:#FFC766; --sun-block:#F2A93B; --on-sun:#1A0F02;
    --amber-600:#F2A93B; --amber-500:#E0902A; --amber-400:#FFB84D; --amber-100:#3A2A12;
    --seal-ink:#E0714D; --kraft:#A98F66;
    --bg:#070D0B; --bg-alt:#0A1410; --bg-mesh:#0B1714;
    --surface:#0E1A15; --surface-2:#0C1712; --surface-raised:#12231C;
    --ink:#EAF4EE; --ink-soft:#B7CEC2; --ink-muted:#7C9588;
    --line:#1B2E26; --line-strong:#284439; --hairline:#22382E;
    --border:#1B2E26; --border-soft:#15261F;
    --primary:#15B37A; --primary-700:#13A06E; --on-primary:#04120C;
    --accent:#F2A93B; --accent-500:#E0902A; --on-accent:#1A0F02;
    --sun-text:var(--sun); --green-text:var(--green-signal);
    --live-dot:#15B37A; --limited:#FB923C;
    --ok:#15B37A; --warn:#FB923C; --danger:#FB923C; --danger-bg:#2A1414;
    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --shadow-md:0 8px 24px -10px rgba(0,0,0,.6);
    --shadow-lg:0 30px 70px -24px rgba(0,0,0,.72);
    --shadow-amber:0 10px 30px -12px rgba(0,0,0,.55);
    --ring:0 0 0 3px color-mix(in srgb, var(--sun) 70%, transparent);
  }
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  letter-spacing: -.005em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.06; font-weight: 700; letter-spacing: -.03em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Buttons (engineered, square 8px, no spring) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); line-height: 1;
  padding: .85rem 1.4rem; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  transition: transform .14s var(--ease-out), background .18s, color .18s, border-color .18s, box-shadow .18s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sun-block); color: var(--on-sun); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--sun-soft); }
.btn-green { background: var(--green-signal); color: var(--on-primary); }
.btn-green:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--green-700); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--green-signal); color: var(--green-signal); }
.btn-lg { padding: 1.05rem 1.9rem; font-size: var(--step-1); }
.btn-sm { padding: .55rem 1rem; font-size: var(--step--1); border-radius: var(--r-xs); }

/* ---------- Mono kicker / eyebrow ---------- */
.eyebrow, .kicker { font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  font-size: var(--step--1); color: var(--sun-text); display: inline-flex; align-items: center; gap: .5rem; }

/* ---------- Ink-stamp badges ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; padding: .22rem .5rem; border-radius: var(--r-xs); text-transform: uppercase; border: 1px solid currentColor; line-height: 1; }
.badge-local { color: var(--green-signal); background: transparent; }
.badge-limited { color: var(--limited); background: transparent; }
.badge-out { color: var(--ink-muted); background: transparent; }

/* ---------- Engineering corner-tick module ---------- */
.module { position: relative; }
.module::before, .module::after,
.module > .tick-bl, .module > .tick-br { content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none; }
.module::before { top: -1px; left: -1px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.module::after  { top: -1px; right: -1px; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }
.module .tick-bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.module .tick-br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }

/* ---------- Telemetry HUD chip ---------- */
.hud { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xs); padding: .35rem .6rem; }
.hud .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live-dot); box-shadow: 0 0 0 0 var(--live-dot); animation: pulse 1.9s infinite; flex: none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live-dot) 55%,transparent)} 70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* ---------- Language picker menu ---------- */
[data-lang-button] { display: inline-flex; align-items: center; gap: .35rem; }
[data-lang-button] .caret { width: 9px; height: 9px; opacity: .6; }
.lang-menu { position: fixed; z-index: 300; min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.lang-menu li { margin: 0; }
.lang-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .7rem; background: none; border: 0; border-radius: var(--r-xs); color: var(--ink); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu button[aria-current="true"] { color: var(--primary); font-weight: 700; }
.lang-menu .lm-code { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); }
.lang-menu button[aria-current="true"] .lm-code { color: var(--primary); }