/**
 * Neo Compounds — design tokens (from handoff README + Home/Checkout.dc.html)
 * Use these CSS variables everywhere; avoid hard-coded hex in components.
 */

:root {
  /* Brand */
  --neo-navy: #0B1A30;
  --neo-blue: #1E5BD8;
  --neo-green: #9BD84A;
  --neo-green-tint: rgba(155, 216, 74, 0.18);
  --neo-green-dark: #2F5A0B;
  --neo-green-dark-alt: #2F7A0B;
  --neo-green-pale: #EAF6DA;
  /* Brighter lime for navy heroes (eyebrow contrast) */
  --neo-green-on-dark: #C8F06A;

  /* Text */
  --neo-ink: #0B1A30;
  --neo-body: #2A3A52;
  --neo-muted: #4A5A70;
  --neo-faint: #7A889B;
  --neo-on-dark-muted: #C9D4E3;
  --neo-on-dark: #E8EEF7;

  /* Surfaces */
  --neo-bg: #F5F7FA;
  --neo-fill: #F1F4F8;
  --neo-card: #fff;

  /* Borders */
  --neo-border: #E3E8EF;
  --neo-border-input: #D5DCE6;
  --neo-border-row: #EEF1F5;
  --neo-border-radio: #B7C2D1;

  /* Status */
  --neo-error: #D6362F;
  --neo-warn-bg: #FFF4D6;
  --neo-warn-text: #7A5600;
  --neo-warn-dot: #E0A800;
  --neo-warn-on-dark: #FFD66B;

  /* Type */
  --neo-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --neo-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --neo-eyebrow-size: 11.5px;
  --neo-eyebrow-tracking: 0.14em;
  --neo-h1-size: clamp(34px, 4.4vw, 56px);
  --neo-h2-size: 26px;
  --neo-body-size: 15.5px;
  --neo-label-size: 13.5px;
  --neo-fine-size: 13px;

  /* Shape */
  --neo-pill: 999px;
  --neo-radius-card: 22px;
  --neo-radius-inner: 16px;
  --neo-radius-panel: 18px;
  --neo-radius-modal: 28px;
  --neo-radius-input: 14px;

  --neo-btn-h: 52px;
  --neo-btn-h-lg: 54px;
  --neo-input-h: 50px;
  --neo-header-control-h: 44px;

  /* Layout */
  --neo-max: 1320px;
  --neo-pad: 32px;
  --neo-drawer-w: 460px;

  /* Motion / shadow */
  --neo-ease-drawer: cubic-bezier(0.2, 0.8, 0.2, 1);
  --neo-shadow-dropdown: 0 24px 48px -16px rgba(11, 26, 48, 0.28);
  --neo-shadow-drawer: -24px 0 60px -20px rgba(11, 26, 48, 0.35);
  --neo-shadow-card: 0 18px 40px -20px rgba(11, 26, 48, 0.25);

  /* Decorative */
  --neo-rule: 120px;
  --neo-bullet: 6px;

  /* Chrome */
  --neo-header-bg: rgba(255, 255, 255, 0.92);
  --neo-header-blur: 12px;
  --neo-z-header: 20;
  --neo-z-dropdown: 26;
  --neo-z-cart-backdrop: 60;
  --neo-z-cart: 61;
  --neo-z-age: 1000;

  --neo-marquee-duration: 90s;
  --neo-free-shipping: 200;
}

/* Base document defaults (child theme) */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.neo-compounds,
body {
  margin: 0;
  background: var(--neo-bg);
  font-family: var(--neo-font);
  font-size: var(--neo-body-size);
  line-height: 1.65;
  color: var(--neo-ink);
}

.neo-eyebrow {
  font-family: var(--neo-font-mono);
  font-size: var(--neo-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--neo-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--neo-blue);
}

.neo-rule {
  display: block;
  width: var(--neo-rule);
  height: 2px;
  background: var(--neo-green);
}

.neo-container {
  max-width: var(--neo-max);
  margin: 0 auto;
  padding-left: var(--neo-pad);
  padding-right: var(--neo-pad);
}

.neo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--neo-btn-h);
  padding: 0 28px;
  border-radius: var(--neo-pill);
  border: 0;
  font-family: var(--neo-font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.neo-btn--primary {
  background: var(--neo-navy);
  color: #fff;
}

.neo-btn--primary:hover {
  background: var(--neo-blue);
  color: #fff;
}

.neo-btn--outline {
  background: #fff;
  color: var(--neo-navy);
  border: 1px solid var(--neo-border-input);
}

.neo-btn--outline:hover {
  border-color: var(--neo-navy);
  color: var(--neo-navy);
}

.neo-btn--green {
  background: var(--neo-green);
  color: var(--neo-navy);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}