/* Onine: earth, moss and pale green glass. Current owner palette, 2026-10-20.
   Role-pair contrast is checked by scripts/check-contrast.mjs; translucent
   composites and image backdrops also require rendered review. */

:root{
  --brand-earth:#66503E;--brand-green:#465D4B;
  --brand-earth-rgb:102,80,62;--brand-green-rgb:70,93,75;
  --paper:#F2EFE7;--surface:#FFFDF7;--surface-2:#E7E1D6;
  --ink:#3C382F;--ink-soft:#646052;--text-soft:var(--ink-soft);
  --accent:var(--brand-earth);--accent-hover:#594634;--accent-ink:var(--paper);--accent-on-dark:#CEDCC4;
  --link:var(--accent);--focus:var(--brand-green);
  --hair-tint:#DCE4D4;--skin-tint:#E5D9CA;
  --line:#D3D2C3;--line-strong:#707C69;
  --danger:#9C2A22;--danger-on-dark:#F4B5AC;
  --panel:#344538;--on-panel:#F4F1E9;--on-panel-soft:#C4CEBB;
  --glass:rgba(242,239,231,.92);--glass-border:rgba(70,93,75,.12);
  --shadow-float:0 8px 32px rgba(60,56,47,.06),0 1px 0 rgba(60,56,47,.04);
  --r-1:6px;--r-2:10px;--r-pill:999px;--r-tab:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI Variable Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
}
[data-surface="dark"]{
  color:var(--on-panel);background:var(--panel);
  --text-soft:var(--on-panel-soft);--focus:var(--accent-on-dark);--link:var(--accent-on-dark);--line-strong:#A8B69E;
}
body{background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans)}
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.03em;line-height:1.02;font-synthesis:none}
h1 em,h2 em{font:italic 400 1em var(--serif);letter-spacing:-.01em;font-synthesis:none}
.label,.caption,.size,.meta{font:11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums lining-nums;color:var(--text-soft)}
.money{font:16px/1.4 var(--mono);font-variant-numeric:tabular-nums lining-nums}
/* links: colour from the role token, underline rule separate and colourless */
a:not(.btn){color:var(--link)}
a:not(.btn):not(nav a):not(.card-title a):not(.directory a){text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
nav a:hover,nav a:focus-visible,.card-title a:hover,.card-title a:focus-visible,.directory a:hover,.directory a:focus-visible{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);min-height:44px}
[data-surface="dark"] .btn-primary{background:var(--on-panel);color:var(--panel)}
/* fields are light objects on every surface; everything inside them uses light tokens */
input,select,textarea{border:1px solid var(--line-strong);border-radius:var(--r-1);background:var(--surface);color:var(--ink);min-height:44px}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
::placeholder{color:var(--ink-soft);opacity:1}
.field-help{color:var(--ink-soft)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
[data-surface="dark"] input[type=checkbox],[data-surface="dark"] input[type=radio]{accent-color:var(--accent-on-dark)}
[aria-invalid="true"]{border:2px solid var(--danger)}            /* Brick on the field's own white, on every surface */
.error{color:var(--danger)}[data-surface="dark"] .error{color:var(--danger-on-dark)}   /* error text sits outside the field */
.pod,.drawer-backdrop{background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 0 0 1px var(--glass-border)}
.drawer{background:var(--surface)}
@supports not (backdrop-filter:blur(1px)){.pod,.drawer-backdrop{background:var(--paper)}}
.bag-count{background:var(--accent);color:var(--accent-ink);border-radius:var(--r-pill);font:11px/1 var(--mono);padding:4px 8px}
.card,.well,.ledger,.routine-col{border-radius:var(--r-2) var(--r-2) var(--r-2) var(--r-tab)}
[data-line="hair"]{background:var(--hair-tint)}[data-line="skin"]{background:var(--skin-tint)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:160ms!important;transform:none!important}}

/* ---- Extensions (not in §15.2): rhythm, durations, layout ---- */
:root{
  --r-tab-corner:var(--r-2) var(--r-2) var(--r-2) var(--r-tab);
  --dur-1:180ms;--dur-2:280ms;--dur-3:650ms;
  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:48px;--space-6:64px;--space-7:96px;--space-8:120px;
  --container:1440px;--gutter:20px;
  --measure:68ch;--measure-prose:70ch;
  --pod-height:60px;
  --shadow-vessel:rgba(60,56,47,.06);
  --hover-darken:brightness(.94);
}
@media (min-width:768px){:root{--gutter:40px}}