/* Smith Bros shared layout tokens — proposed /lifestyle/tokens.css (Remmy). Load BEFORE each app's style.css. */
:root{
  /* spacing: 4-based, 8 steps. Use ONLY these. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --gutter:clamp(16px,5vw,32px);              /* page side padding: 20px @390, 32px desktop */
  --measure:640px;                             /* reading/app column */
  --measure-wide:1040px;                       /* galleries, 2-col desktop */
  /* type: 6 sizes, 3 weights */
  --step--1:.8125rem;  /* 13px meta, eyebrow */
  --step-0:1rem;       /* 16-17px body, row label */
  --step-1:1.25rem;    /* 20px section title */
  --step-2:1.75rem;    /* 28px page title */
  --step-3:clamp(2.5rem,10vw,3.5rem);  /* screen focal number/title */
  --step-4:clamp(3rem,12vw,4.5rem);    /* hero number (Money, Trips total) */
  --w-regular:400; --w-bold:700; --w-heavy:800;
  --lh-tight:1.1; --lh-body:1.5;
  /* color: neutrals + state only */
  --bg:#0b0c0e; --surface:#121416; --line:#23262a; --ink:#e7e9ea; --ink-2:#b8bec6; --ink-3:#8b929a;
  --accent:#1d9bf0;          /* links/selected */
  --ok:#00ba7c; --warn:#f5a524; --bad:#f4212e;   /* state ONLY */
  --radius:14px; --tap:44px;
  --focus-ring:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent);   /* shared focus ring (box-shadow) */
}
/* flow: vertical rhythm by the parent, not per-component margins */
.flow > * + *{margin-block-start:var(--flow-space,var(--space-5))}
.flow-tight{--flow-space:var(--space-2)} .flow-section{--flow-space:var(--space-6)} .flow-loose{--flow-space:var(--space-7)}
.wrap{width:min(100% - 2*var(--gutter),var(--measure));margin-inline:auto}
.wrap-wide{width:min(100% - 2*var(--gutter),var(--measure-wide));margin-inline:auto}
/* hierarchy without boxes */
.eyebrow{font-size:var(--step--1);font-weight:var(--w-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding-block:var(--space-3);border-bottom:1px solid var(--line)}
.meta{font-size:var(--step--1);color:var(--ink-3)}
/* compact app bar replaces .spread-header + .date-block + .binding + .washi */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:56px;padding-inline:var(--gutter)}
.appbar .back{color:var(--ink-3);text-decoration:none;font-size:var(--step--1)}
.appbar .title{font-size:var(--step-0);font-weight:var(--w-heavy)}

/* Content-first layout (Kevin Powell): no device breakpoints. Wrapper caps at ~1200px with fluid padding;
   auto-fit grid puts blocks side by side when there is room, one column on phones. */
:root{--wrapper-max:1200px;--wrapper-pad:clamp(16px,4vw,48px);--grid-min:22rem}
.wrapper{width:min(100% - 2*var(--wrapper-pad),var(--wrapper-max));margin-inline:auto}
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--grid-min)),1fr));gap:var(--space-5);align-items:start;align-content:start}
.auto-grid>.span-all{grid-column:1/-1}
.auto-grid :is(p,li,label){max-width:65ch}
.auto-grid[hidden]{display:none!important}
/* auto-flow: flex-wrap sibling of auto-grid for mixed full-width + peer blocks (full-span items don't defeat auto-fit collapse) */
.auto-flow{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:flex-start;align-content:flex-start}
.auto-flow>*{flex:1 1 var(--grid-min);min-width:0}
.auto-flow>.span-all{flex-basis:100%}
.auto-flow :is(p,li,label){max-width:65ch}
.auto-flow[hidden]{display:none!important}