/* Cautionfield Market — design tokens (Ovasta Seeds / Ovasta Seeds)
   Hexes chosen to avoid prior platform palettes (no Neon Grove teal/purple,
   no coral+teal carnival stacks, no cream+terracotta serif cliché). */
:root {
  --cf-ink: #14181A;
  --cf-asphalt: #12151A;
  --cf-mute: #4A5560;
  --cf-field: #E8EEF2;
  --cf-field-warm: #FFF4E0;
  --cf-field-cool: #E0F7F4;
  --cf-surface: #FFFFFF;
  --cf-cone: #FF4E00;
  --cf-cone-deep: #C43800; /* AA with white (~5.4:1); was #D63E00 */
  --cf-tape: #00C8B4;
  --cf-tape-deep: #007A6E; /* AA as text on light (~5.2:1); was #009E8E */
  --cf-signal: #FFE600;
  --cf-signal-ink: #1A1600;
  --cf-ok: #007A4D; /* AA on white (~5.4:1); was #00A86B */
  --cf-err: #E11D48;
  /* Text-on-fill / fill-as-text helpers (WCAG AA targets) */
  --cf-on-cone: #12151A; /* dark text on bright cone fill (~5.5:1) */
  --cf-on-tape: #12151A;
  --cf-text-cone: #B83400; /* cone-hue copy on light surfaces (~6:1) */
  --cf-text-tape: #00665C; /* tape-hue copy on light / cool (~6:1) */
  --cf-soft-on-dark: #D2DAE0; /* secondary copy on asphalt (~12:1) */
  --cf-placeholder: #AAB4BC; /* inputs on dark (~4.6:1 vs #1C2228) */
  --cf-star-off: #8A949E; /* inactive stars on dark (~5.5:1 vs asphalt) */
  --cf-border: rgba(20, 24, 26, 0.14);
  --cf-border-strong: rgba(20, 24, 26, 0.28);
  --cf-shadow: 4px 4px 0 var(--cf-asphalt);
  --cf-shadow-soft: 0 12px 28px rgba(20, 24, 26, 0.12);
  --cf-radius: 2px;
  --cf-radius-lg: 10px;
  --cf-font-display: "Paytone One", "Arial Black", sans-serif;
  --cf-font-body: "Commissioner", "Segoe UI", sans-serif;
  --cf-space-1: 8px;
  --cf-space-2: 16px;
  --cf-space-3: 24px;
  --cf-space-4: 32px;
  --cf-space-5: 48px;
  --cf-space-6: 64px;
  --cf-max: 1120px;
  --cf-nav-h: 110px; /* Yard Stake Rail measured height (sticky offsets) */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.cf-store {
  margin: 0;
  min-height: 100vh;
  font-family: var(--cf-font-body);
  font-weight: 500;
  color: var(--cf-ink);
  background: var(--cf-field);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.cf-store a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 9999;
  background: var(--cf-signal);
  color: var(--cf-signal-ink);
  padding: 10px 16px;
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }
.cf-wrap {
  width: min(100% - 32px, var(--cf-max));
  margin-inline: auto;
}
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid var(--cf-asphalt);
  background: var(--cf-cone);
  color: var(--cf-on-cone); /* bright cone + white failed AA; ink on cone passes */
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--cf-shadow);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}
.cf-btn:hover, .cf-btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--cf-asphalt);
  background: var(--cf-cone-deep);
  color: #fff; /* cone-deep is AA with white */
  outline: none;
}
.cf-btn--ghost {
  background: var(--cf-surface);
  color: var(--cf-ink);
}
.cf-btn--ghost:hover, .cf-btn--ghost:focus-visible {
  background: var(--cf-signal);
  color: var(--cf-signal-ink);
}
.cf-btn--tape {
  background: var(--cf-tape);
  color: var(--cf-on-tape);
}
.cf-btn--tape:hover {
  background: var(--cf-tape-deep);
  color: #fff; /* tape-deep now AA with white */
}
::placeholder { color: var(--cf-mute); opacity: 1; }
input::placeholder,
textarea::placeholder { color: var(--cf-mute); opacity: 1; }

/* Caution stripe utility */
.cf-stripes {
  background: repeating-linear-gradient(
    -45deg,
    var(--cf-signal) 0 10px,
    var(--cf-asphalt) 10px 20px
  );
}
.cf-stripes-thin {
  background: repeating-linear-gradient(
    -45deg,
    var(--cf-signal) 0 6px,
    var(--cf-asphalt) 6px 12px
  );
}