/* ---------------------------------------------------------------------------
   Components — the design system's UI kit, expressed as CSS classes.

   Every value here comes from tokens/. Nothing is hard-coded that a token
   already names. Component names match the design system's component files:
   Button, IconButton, Badge, Tag, Icon, LabelPanel, WaveRule, RibBand, Card,
   SectionHeading, ProcessStep, ProductCard, Quote, Stat, LanguageToggle, and
   the form shell.
   --------------------------------------------------------------------------- */

/* ============================================================ Icon ======= */
/* Lucide, 2px stroke, round caps, 24px grid — inlined, tinted by currentColor.
   Icons sit beside a label and are never the only signal. */
.ds-icon {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================ Button ===== */
/* Always a pill. A squared button is off-brand. */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  border: var(--border-1) solid transparent;
  border-radius: var(--radius-pill);
  font: var(--type-body);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-interactive);
  -webkit-appearance: none;
  appearance: none;
}

.ds-btn:hover { text-decoration: none; }

/* Press: 1px down and a 0.985 scale — no colour flash. */
.ds-btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
}

/* --- sizes --- */
.ds-btn--sm { padding: 8px 14px; font-size: var(--text-sm); gap: 6px; }
.ds-btn--md { padding: 12px 22px; font-size: var(--text-base); gap: var(--space-2); }
.ds-btn--lg { padding: 16px 30px; font-size: var(--text-md); gap: 10px; }

.ds-btn--full { display: flex; width: 100%; }

/* --- variants --- */
.ds-btn--primary {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--cream-50);
}
.ds-btn--primary:hover {
  background: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: var(--cream-50);
}

.ds-btn--accent {
  background: var(--action-accent);
  border-color: var(--action-accent);
  color: var(--earth-900);
}
.ds-btn--accent:hover {
  background: var(--action-accent-hover);
  border-color: var(--action-accent-hover);
  color: var(--earth-900);
}

.ds-btn--secondary {
  background: transparent;
  border-color: var(--green-800);
  color: var(--green-800);
}
.ds-btn--secondary:hover { background: var(--green-100); color: var(--green-800); }

.ds-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--green-800);
}
.ds-btn--ghost:hover { background: var(--green-100); color: var(--green-800); }

.ds-btn--inverse {
  background: var(--cream-100);
  border-color: var(--cream-100);
  color: var(--green-800);
}
.ds-btn--inverse:hover { background: var(--white); border-color: var(--white); color: var(--green-800); }

/* Anchors styled as buttons must not inherit the link underline. */
a.ds-btn { border-bottom: var(--border-1) solid transparent; }
a.ds-btn--secondary { border-color: var(--green-800); }

/* --- the bottle detail: a ribbed orange cap and the label in packaging caps.
   Primary order CTA only, one per page. --- */
.ds-btn--bottle { background-image: var(--pattern-ribs-light); }

.ds-btn__cap {
  flex: 0 0 auto;
  width: 11px;
  height: 18px;
  border-radius: 2px 3px 3px 2px;
  background-color: var(--orange-500);
  background-image: var(--pattern-cap-ribs);
  box-shadow: inset -1px 0 0 rgba(36, 22, 9, 0.18);
}
.ds-btn--sm .ds-btn__cap { width: 9px; height: 15px; }
.ds-btn--lg .ds-btn__cap { width: 12px; height: 20px; }

.ds-btn__label {
  font-family: var(--font-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.2;
}

/* ========================================================= IconButton ==== */
.ds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: var(--border-1) solid var(--green-800);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--green-800);
  cursor: pointer;
  transition: var(--transition-interactive);
}
.ds-icon-btn:hover { background: var(--green-100); }
.ds-icon-btn--sm { width: 32px; height: 32px; }
.ds-icon-btn--lg { width: 48px; height: 48px; }
.ds-icon-btn--primary {
  background: var(--action-primary);
  color: var(--cream-50);
}
.ds-icon-btn--primary:hover { background: var(--action-primary-hover); }
.ds-icon-btn--ghost { border-color: transparent; }

/* ============================================================= Badge ===== */
/* Packaging voice: bold geometric caps at 0.055em. */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-badge--green  { background: var(--green-100);  color: var(--green-800); }
.ds-badge--orange { background: var(--orange-100); color: var(--orange-700); }
.ds-badge--teal   { background: var(--teal-200);   color: var(--teal-600); }
.ds-badge--kraft  { background: var(--kraft-300);  color: var(--earth-700); }
.ds-badge--solid  { background: var(--green-700);  color: var(--cream-100); }

/* =============================================================== Tag ===== */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: var(--border-1) solid var(--border-hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  font: var(--type-small);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-interactive);
}
a.ds-tag { border-bottom-color: var(--border-hairline); }
.ds-tag:hover { background: var(--cream-100); color: var(--text-body); }
.ds-tag[aria-pressed="true"],
.ds-tag[aria-current="true"],
.ds-tag--selected {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--cream-50);
}
.ds-tag[aria-pressed="true"]:hover,
.ds-tag[aria-current="true"]:hover,
.ds-tag--selected:hover { background: var(--green-800); border-color: var(--green-800); color: var(--cream-50); }
.ds-tag--static { cursor: default; }
.ds-tag--static:hover { background: transparent; }

/* ======================================================== LabelPanel ===== */
/* The 10 kg sack made into a container: kraft board with a ribbed grain
   holding an inset green or cream label panel. Paper on paper — no shadow. */
.ds-label-panel {
  background-color: var(--surface-kraft);
  background-image: var(--pattern-ribs);
  border-radius: var(--radius-lg);
  padding: var(--label-inset);
}
.ds-label-panel__inner {
  padding: var(--space-6);
  border-radius: var(--shape-leaf-soft);
}
.ds-label-panel--green .ds-label-panel__inner {
  background: var(--green-800);
  color: var(--cream-100);
}
.ds-label-panel--cream .ds-label-panel__inner {
  background: var(--cream-200);
  color: var(--earth-700);
}
.ds-label-panel--square .ds-label-panel__inner { border-radius: var(--shape-label); }
.ds-label-panel--tight .ds-label-panel__inner { padding: var(--space-5); }

/* ========================================================== WaveRule ===== */
/* The lake waves from under the wordmark, as a heading underline. */
.ds-wave-rule {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 132px;
}
.ds-wave-rule svg {
  display: block;
  width: 100%;
  height: 4px;
  overflow: visible;
}
.ds-wave-rule--wide { width: 168px; }
.ds-wave-rule--narrow { width: 110px; }
.ds-wave-rule--full { width: 100%; }

/* =========================================================== RibBand ===== */
/* The bottle's moulded ribs, closing a dark section. */
.ds-rib-band {
  height: 26px;
  background-color: var(--surface-soil);
  background-image: var(--pattern-ribs-light);
}
.ds-rib-band--kraft {
  background-color: var(--surface-kraft);
  background-image: var(--pattern-ribs);
}

/* ============================================================== Card ===== */
.ds-card {
  padding: var(--space-5);
  border: var(--border-1) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-body);
  box-shadow: var(--shadow-sm);
}
.ds-card--pad-lg { padding: var(--space-6); }

/* Kraft and green cards are paper laid on paper: no shadow. */
.ds-card--kraft {
  background: var(--surface-paper);
  border-color: var(--border-paper);
  color: var(--earth-700);
  box-shadow: var(--shadow-none);
}
.ds-card--green {
  background: var(--surface-inverse);
  border-color: var(--green-800);
  color: var(--text-inverse);
  box-shadow: var(--shadow-none);
}
.ds-card--soil {
  background: var(--surface-soil);
  border-color: var(--earth-700);
  color: var(--cream-100);
  box-shadow: var(--shadow-none);
}
.ds-card--flat { box-shadow: var(--shadow-none); }
.ds-card--raised { box-shadow: var(--shadow-md); }

.ds-card--green :is(h1, h2, h3, h4),
.ds-card--soil :is(h1, h2, h3, h4) { color: var(--cream-100); }

/* ==================================================== SectionHeading ===== */
.ds-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: 58ch;
}
.ds-section-heading > * { margin: 0; }
.ds-section-heading__eyebrow {
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
}
.ds-section-heading__title { font: var(--type-h2); color: var(--text-heading); }
.ds-section-heading__lead { font: var(--type-lead); color: var(--text-body); }

.ds-section-heading--inverse .ds-section-heading__eyebrow { color: var(--orange-300); }
.ds-section-heading--inverse .ds-section-heading__title { color: var(--cream-100); }
.ds-section-heading--inverse .ds-section-heading__lead { color: rgba(246, 238, 221, 0.82); }

.ds-section-heading--center {
  align-items: center;
  text-align: center;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

/* ======================================================= ProcessStep ===== */
.ds-process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ds-process-step__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ds-process-step__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--green-100);
  color: var(--green-700);
}
.ds-process-step__index {
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}
.ds-process-step__title { font: var(--type-h3); color: var(--text-heading); }
.ds-process-step__body { margin: 0; font: var(--type-body); color: var(--text-body); }

.ds-process-step--inverse .ds-process-step__mark {
  background: rgba(246, 238, 221, 0.14);
  color: var(--orange-300);
}
.ds-process-step--inverse .ds-process-step__index { color: rgba(246, 238, 221, 0.6); }
.ds-process-step--inverse .ds-process-step__title { color: var(--cream-100); }
.ds-process-step--inverse .ds-process-step__body { color: rgba(246, 238, 221, 0.8); }

/* ======================================================= ProductCard ===== */
/* Leaf-cut corners, echoing the orange leaf. Lifts on hover. */
.ds-product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-1) solid var(--border-hairline);
  border-radius: var(--shape-leaf-soft);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-interactive);
}
.ds-product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.ds-product-card__media {
  position: relative;
  padding: var(--space-5);
  background: var(--surface-subtle);
}
.ds-product-card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
}
.ds-product-card__media img {
  width: 100%;
  height: 240px;
  object-fit: contain;
}
.ds-product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}
.ds-product-card__name { font: var(--type-h3); color: var(--text-heading); }
.ds-product-card__variant {
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-accent);
}
.ds-product-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.ds-product-card__price {
  font: var(--type-h3);
  font-family: var(--font-display);
  color: var(--green-800);
}
.ds-product-card__size {
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-product-card__action { margin-top: auto; padding-top: var(--space-3); }

/* ============================================================= Quote ===== */
.ds-quote {
  margin: 0;
  padding-left: var(--space-5);
  border-left: var(--border-2) solid var(--orange-500);
}
.ds-quote__text {
  margin: 0;
  font: var(--weight-regular) var(--text-xl) / 1.4 var(--font-display);
  color: var(--text-heading);
}
.ds-quote__by {
  margin-top: var(--space-3);
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-quote--inverse { border-left-color: var(--orange-300); }
.ds-quote--inverse .ds-quote__text { color: var(--cream-100); }
.ds-quote--inverse .ds-quote__by { color: rgba(246, 238, 221, 0.7); }

/* ============================================================== Stat ===== */
.ds-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ds-stat__value {
  font: var(--weight-black) var(--text-3xl) / 1 var(--font-display);
  color: var(--green-700);
}
.ds-stat__unit { font-size: var(--text-lg); margin-left: 4px; }
.ds-stat__label {
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-stat--inverse .ds-stat__value { color: var(--orange-300); }
.ds-stat--inverse .ds-stat__label { color: rgba(246, 238, 221, 0.72); }

/* ==================================================== LanguageToggle ===== */
.ds-lang-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: var(--border-1) solid var(--border-paper);
  border-radius: var(--radius-pill);
}
.ds-lang-toggle__item {
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--green-800);
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-interactive);
}
a.ds-lang-toggle__item { border-bottom: none; }
.ds-lang-toggle__item:hover { color: var(--green-800); background: var(--green-100); }
.ds-lang-toggle__item[aria-current="true"] {
  background: var(--green-700);
  color: var(--cream-50);
}
.ds-lang-toggle__item[aria-current="true"]:hover { background: var(--green-800); color: var(--cream-50); }

.ds-lang-toggle--inverse { border-color: rgba(246, 238, 221, 0.32); }
.ds-lang-toggle--inverse .ds-lang-toggle__item { color: var(--cream-100); }
.ds-lang-toggle--inverse .ds-lang-toggle__item[aria-current="true"] {
  background: var(--cream-100);
  color: var(--green-800);
}

/* ============================================================ Forms ====== */
/* FieldShell: an uppercase packaging-caps label over the control, with a hint
   or an error underneath. */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.ds-field__label {
  font: var(--type-label);
  font-family: var(--font-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--green-800);
}
.ds-field__required { color: var(--orange-600); }
.ds-field__hint { font: var(--type-small); font-family: var(--font-sans); color: var(--text-muted); }
.ds-field__error { font: var(--type-small); font-family: var(--font-sans); color: var(--status-error); }
.ds-field--wide { grid-column: 1 / -1; }

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  padding: 12px 14px;
  border: var(--border-1) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-body);
  font: var(--type-body);
  font-family: var(--font-sans);
  outline: none;
  transition: var(--transition-interactive);
}
.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  border-color: var(--green-700);
  box-shadow: var(--shadow-focus);
}
.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] { border-color: var(--status-error); }

.ds-textarea { resize: vertical; min-height: 96px; }

.ds-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--green-700) 50%),
    linear-gradient(135deg, var(--green-700) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Checkbox — 3px corners, the only square-ish control in the system. */
.ds-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  font: var(--type-body);
  font-family: var(--font-sans);
  color: var(--text-body);
  cursor: pointer;
}
.ds-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ds-checkbox__box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: var(--border-1) solid var(--border-paper);
  border-radius: var(--radius-xs);
  background: var(--white);
  color: transparent;
  transition: var(--transition-interactive);
}
.ds-checkbox__input:checked + .ds-checkbox__box {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--cream-50);
}
.ds-checkbox__input:focus-visible + .ds-checkbox__box {
  box-shadow: var(--shadow-focus);
}
.ds-checkbox__input:disabled + .ds-checkbox__box { opacity: 0.42; }

/* ========================================================== Notices ====== */
/* Status colours stay inside the brand palette. */
.ds-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--border-1) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  font: var(--type-body);
  font-family: var(--font-sans);
  color: var(--text-body);
}
.ds-notice--success { border-color: var(--green-200); background: var(--green-100); color: var(--green-800); }
.ds-notice--error { border-color: rgba(163, 36, 24, 0.28); background: #FBEDEB; color: var(--status-error); }
.ds-notice--info { border-color: var(--teal-200); background: rgba(183, 214, 209, 0.35); color: var(--teal-600); }