/* Bear & Willow HR — shared design tokens */
:root {
  /* Palette — sage + warm cream */
  --cream: #F2EBDC;
  --cream-warm: #EEE5D0;
  --ivory: #FAF6EB;
  --ivory-soft: #F7F1E2;
  --sage: #9DA98C;
  --sage-soft: #C2CBB4;
  --sage-deep: #6E7D63;
  --moss: #4A5A45;
  --forest: #2C3A2E;
  --ink: #1F2620;
  --ink-soft: #3A413A;
  --clay: #B86F4F;
  --clay-soft: #D89876;
  --linen: #E8DFC9;

  /* Borders + shadows */
  --hair: rgba(31, 38, 32, 0.12);
  --hair-strong: rgba(31, 38, 32, 0.22);
  --shadow-sm: 0 1px 2px rgba(31, 38, 32, 0.05), 0 4px 12px rgba(31, 38, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 38, 32, 0.06), 0 16px 40px rgba(31, 38, 32, 0.08);

  /* Layout */
  --maxw: 1240px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--ink); background: var(--cream); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* Utility: visually-hidden */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Image placeholder for image-slot style fallback */
.placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(110,125,99,0.10) 0 8px, rgba(110,125,99,0.05) 8px 16px),
    var(--linen);
  display: flex; align-items: center; justify-content: center;
  color: var(--moss); font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; letter-spacing: 0.04em;
}