/* Redesign v2 tokens — a deliberate departure from the v1 system.
   Warmer ground, sharper hierarchy, type does more work, photography
   gets out of the way, brand green is reserved for action only. */

:root {
  /* Surfaces — warm, agricultural, not stark white */
  --r-bg:        #f7f4ec;      /* warm cream, page ground */
  --r-bg-alt:    #efebde;      /* slightly deeper cream, alternating bands */
  --r-surface:   #ffffff;      /* card / panel */
  --r-surface-2: #fafaf6;      /* nested panel */
  --r-ink:       #14130f;      /* near-black, slight warmth */
  --r-ink-2:     #3a3a32;      /* secondary text */
  --r-muted:     #7a786d;      /* tertiary / labels */
  --r-line:      #e7e1d0;      /* warm hairline */
  --r-line-strong: #cdc6b3;    /* stronger divider */

  /* Brand — green earns its keep, used for action only */
  --r-green:        #2d5a28;
  --r-green-hover:  #244820;
  --r-green-light:  #4a8f3d;
  --r-green-tint:   #e8f0e6;   /* very light fill */

  /* Functional signals — borrowed sparingly */
  --r-success:  #2d5a28;
  --r-warn:     #b45309;       /* burnt amber for "Low stock" / "Ships in 7 days" */
  --r-alert:    #b91c1c;
  --r-info:     #1e40af;

  /* Type stacks */
  --r-display: "Bricolage Grotesque", "Open Sans", system-ui, sans-serif;
  --r-body:    "Open Sans", system-ui, sans-serif;
  --r-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — bigger contrasts than v1 */
  --r-fs-display:  clamp(40px, 5.5vw, 80px);   /* hero headline */
  --r-fs-section:  clamp(28px, 3vw, 44px);     /* section heading */
  --r-fs-h3:       22px;
  --r-fs-h4:       18px;
  --r-fs-body:     16px;
  --r-fs-sm:       14px;
  --r-fs-xs:       12px;
  --r-fs-data:     14px;
  --r-fs-eyebrow:  11px;
  --r-fs-price-lg: 32px;
  --r-fs-price:    20px;

  /* Spatial rhythm */
  --r-radius-sm: 4px;
  --r-radius:    8px;
  --r-radius-lg: 14px;
  --r-radius-xl: 22px;

  --r-shadow-sm: 0 1px 0 rgba(20,19,15,0.04), 0 1px 3px rgba(20,19,15,0.06);
  --r-shadow:    0 2px 4px rgba(20,19,15,0.05), 0 4px 12px rgba(20,19,15,0.06);
  --r-shadow-lg: 0 8px 24px rgba(20,19,15,0.08), 0 2px 6px rgba(20,19,15,0.05);
}

/* Scoped reset — only when body has the `r-redesign` class so existing
   pages aren't affected. */
body.r-redesign {
  background: var(--r-bg);
  color: var(--r-ink);
  font-family: var(--r-body);
  font-size: var(--r-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.r-redesign * { box-sizing: border-box; }

/* Typography primitives — used directly in views */
.r-display {
  font-family: var(--r-display);
  font-weight: 700;
  font-size: var(--r-fs-display);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
.r-section {
  font-family: var(--r-display);
  font-weight: 600;
  font-size: var(--r-fs-section);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.r-h3 { font-family: var(--r-display); font-weight: 600; font-size: var(--r-fs-h3); line-height: 1.15; letter-spacing: -0.01em; }
.r-h4 { font-family: var(--r-body); font-weight: 700; font-size: var(--r-fs-h4); line-height: 1.25; }
.r-eyebrow {
  font-family: var(--r-mono);
  font-weight: 500;
  font-size: var(--r-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--r-muted);
}
.r-body { font-family: var(--r-body); font-size: var(--r-fs-body); line-height: 1.6; color: var(--r-ink-2); }
.r-mono { font-family: var(--r-mono); font-variant-numeric: tabular-nums; }
.r-price-lg {
  font-family: var(--r-mono);
  font-weight: 600;
  font-size: var(--r-fs-price-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--r-ink);
  line-height: 1;
}
.r-price {
  font-family: var(--r-mono);
  font-weight: 600;
  font-size: var(--r-fs-price);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--r-ink);
}

/* Buttons */
.r-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-radius);
  font-family: var(--r-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
}
.r-btn--primary {
  background: var(--r-green);
  color: #fff;
  box-shadow: var(--r-shadow-sm);
}
.r-btn--primary:hover { background: var(--r-green-hover); }
.r-btn--primary:active { transform: translateY(1px); }
.r-btn:disabled {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.62;
}
.r-btn--primary:disabled,
.r-btn--primary:disabled:hover,
.r-btn--primary:disabled:active {
  background: var(--r-muted);
  transform: none;
}
.r-btn--ghost {
  background: transparent;
  color: var(--r-ink);
  border: 1px solid var(--r-line-strong);
}
.r-btn--ghost:hover { background: var(--r-surface); border-color: var(--r-ink-2); }
.r-btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.r-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* Surface card */
.r-card {
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-radius-lg);
  transition: border-color 120ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.r-card--hover:hover {
  border-color: var(--r-line-strong);
  box-shadow: var(--r-shadow);
  transform: translateY(-2px);
}

/* Chips */
.r-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  background: var(--r-surface-2);
  border: 1px solid var(--r-line);
  border-radius: 999px;
  font-family: var(--r-body); font-size: 11px; font-weight: 500;
  color: var(--r-ink-2);
  white-space: nowrap;
}
.r-chip--accent { background: var(--r-green-tint); border-color: rgba(45,90,40,0.2); color: var(--r-green); }
.r-chip--warn   { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.r-chip--instant { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }

/* Inputs */
.r-input {
  height: 44px; padding: 0 14px;
  background: var(--r-surface);
  border: 1px solid var(--r-line-strong);
  border-radius: var(--r-radius);
  font-family: var(--r-body); font-size: 15px; color: var(--r-ink);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.r-input:focus {
  border-color: var(--r-green);
  box-shadow: 0 0 0 3px rgba(45,90,40,0.12);
}

/* Subtle divider rule */
.r-rule { border: 0; border-top: 1px solid var(--r-line); margin: 0; }