/* Weigl Cattle Co. — design tokens + scope utilities.
 * Ported 1:1 from design/weigl-alpha-2: tokens.jsx (hayfield light,
 * serif-impact pairing, comfortable density) + theme.jsx scope styles. */

:root {
  /* Palette · hayfield · light */
  --bg:            #F6F4EE;
  --bg-raised:     #FBFAF5;
  --bg-sunken:     #E8E5DA;
  --ink:           #1B231A;
  --ink-muted:     #4A5446;
  --ink-subtle:    #7E8779;
  --rule:          #D8D4C5;
  --primary:       #3F7A45;
  --primary-hover: #4A8C50;
  --primary-ink:   #FBFAF5;
  --accent:        #F4C430;
  --accent-ink:    #1B231A;
  --success:       #3F6B3A;
  --danger:        #A23226;
  --stamp:         #1B231A;

  /* Type pairing · serif-impact (DM Serif Display + Work Sans) */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Work Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-label:   'Manrope', 'Work Sans', system-ui, sans-serif;
  --font-numeric: 'Work Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Shadows (palette-independent) */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(42, 29, 20, 0.12), 0 2px 4px rgba(42, 29, 20, 0.06);
  --shadow-md: 0 2px 4px rgba(42, 29, 20, 0.14), 0 8px 20px rgba(42, 29, 20, 0.12);
  --shadow-lg: 0 6px 12px rgba(42, 29, 20, 0.16), 0 20px 40px rgba(42, 29, 20, 0.18);

  /* Density · comfortable */
  --ctrl-h:   48px;
  --ctrl-px:  20px;
  --card-pad: 28px;
  --gap:      18px;
}

/* ── Scope (theme.jsx .weigl-scope) ─────────────────────────────── */
html, body { margin: 0; padding: 0; }

.weigl-scope {
  box-sizing: border-box;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}
.weigl-scope *, .weigl-scope *::before, .weigl-scope *::after { box-sizing: border-box; }

/* :where() keeps these at single-class specificity so component rules
 * (translated from design inline styles, loaded later) win ties —
 * mirroring the design app where inline styles always beat utilities. */
:where(.weigl-scope) .w-display { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.005em; font-weight: 400; }
:where(.weigl-scope) .w-mono    { font-family: var(--font-mono); }

/* Money / prices / weights / quantities — tabular + lining figures */
:where(.weigl-scope) .w-num,
:where(.weigl-scope) .w-price,
:where(.weigl-scope) .w-price__amount,
:where(.weigl-scope) .w-price__unit {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}
:where(.weigl-scope) .w-num,
:where(.weigl-scope) .w-price__amount {
  font-family: var(--font-numeric);
}
:where(.weigl-scope) .w-eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.weigl-scope .w-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.weigl-scope a { color: inherit; }

/* Stamped text-emphasis utility */
.weigl-scope .w-stamp {
  display: inline-block;
  padding: 3px 10px 1px;
  background: var(--stamp);
  color: var(--bg);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

/* Headings inherit their look from .w-display; kill UA margins */
.weigl-scope h1, .weigl-scope h2, .weigl-scope h3 { font-weight: 400; }

/* Page container — desktop artboards are 1280px compositions */
.page {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}
body { background: var(--bg-sunken); }