/* SIMMER — design tokens.
   Direction: "kitchen ledger" — enamel + butcher paper + pine green + copper.
   Warm, tactile, hand-kept. Deliberately not the industrial grey of SILO. */

:root {
  /* surfaces */
  --paper:        #F4EFE4;   /* butcher paper — page ground */
  --paper-2:      #FBF8F1;   /* card face */
  --enamel:       #FFFFFF;   /* enamel white — inputs, modals */
  --shade:        #E8E0D0;   /* hairline / inset */
  --shade-2:      #D6CBB5;

  /* ink */
  --ink:          #22251E;
  --ink-2:        #55594D;
  --ink-3:        #8A8D80;

  /* brand */
  --pine:         #2F5D50;   /* primary — cabinet green */
  --pine-dk:      #234639;
  --pine-lt:      #E3EDE8;
  --copper:       #B4652F;   /* accent — pot copper */
  --copper-lt:    #F6E8DC;

  /* freshness scale (used everywhere: chips, rails, dots) */
  --fresh:        #3F7D5B;
  --fresh-bg:     #E4F0E8;
  --soon:         #C89A2B;
  --soon-bg:      #FAF0D6;
  --urgent:       #C2571F;
  --urgent-bg:    #FBE6D9;
  --expired:      #9E2B2B;
  --expired-bg:   #F7DEDE;

  /* type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* geometry */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --gap:  16px;
  --rail: 300px;   /* the "what can I make" side rail */
  --bar:  58px;    /* top bar height */

  --shadow-1: 0 1px 2px rgba(34,37,30,.07), 0 2px 8px rgba(34,37,30,.05);
  --shadow-2: 0 4px 14px rgba(34,37,30,.11), 0 12px 34px rgba(34,37,30,.09);
  --shadow-in: inset 0 1px 2px rgba(34,37,30,.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* faint linen tooth on the page ground — reads as paper, not flat grey */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg,   rgba(140,125,95,.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(140,125,95,.035) 0 1px, transparent 1px 3px);
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; }

a { color: var(--pine); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }

/* small-caps section eyebrow, used across every panel */
.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--shade-2); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }