/* components.css: composable, token-only component classes (prefix c-). No hard-coded colours or radii.
   Existing page classes (.feature-card, .pill, .btn…) are the legacy equivalents; new work should use these. See /DESIGN.md. */
/* section */
.c-section{padding-block:var(--s-8)}.c-section--tight{padding-block:var(--s-6)}
.c-section__head{display:grid;gap:var(--s-3);margin-bottom:var(--s-5);max-width:72ch}
/* card ×3: base, lead (accent edge), media (clipped media slot) */
.c-card{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-lg);background:var(--bg-raised);color:var(--fg);box-shadow:var(--shadow-1),var(--border)}
.c-card--quiet{background:var(--bg-sunken);box-shadow:none}
.c-card--lead{box-shadow:var(--shadow-1),var(--border),inset 0 3px 0 var(--accent)}
.c-card--media{padding:0;overflow:hidden}.c-card--media>.c-card__body{padding:var(--s-5)}
.c-card__foot{margin-top:auto;display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-sm);color:var(--fg-2)}
@media (max-width:640px){.c-card{padding:var(--s-4) var(--s-4) var(--s-5)}}
/* button: dark pill with an accent chip (dark mode), accent button (light) */
.c-btn{display:inline-flex;align-items:center;gap:var(--s-3);min-height:44px;padding:0 var(--s-5) 0 var(--s-2);border:0;border-radius:var(--r);background:var(--fg);color:var(--bg-page);font:var(--w-medium) var(--t-md)/1 var(--font);text-decoration:none;cursor:pointer;transition:transform var(--d-base) var(--ease)}
.c-btn__chip{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent)}
[data-mode="dark"] .c-btn{background:var(--pill,var(--bg-sunken));color:var(--fg)}
.c-btn--ghost{background:transparent;color:var(--fg);box-shadow:var(--border-strong);padding:0 var(--s-4)}
[data-mode="dark"] .c-btn--ghost{background:transparent}
.c-btn--accent{background:var(--accent);color:var(--on-accent);padding:0 var(--s-5)}
.c-btn:focus-visible,.c-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (hover:hover){.c-btn:hover{transform:translateY(-1px)}}
/* pill (label), chip (interactive filter), tag (status) */
.c-pill{display:inline-flex;align-items:center;gap:var(--s-2);height:24px;padding:0 var(--s-3) 0 var(--s-2);border-radius:var(--r-sm);background:var(--bg-sunken);color:var(--fg-2);font-size:var(--t-xs);font-weight:var(--w-medium)}
.c-pill__dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--accent)}
.c-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:transparent;color:var(--fg-2);box-shadow:var(--border-strong);font:var(--w-medium) var(--t-sm)/1 var(--font);cursor:pointer}
.c-chip[aria-pressed="true"],.c-chip[aria-selected="true"]{background:var(--fg);color:var(--bg-page);box-shadow:none}
.c-tag{display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-size:var(--t-xs);font-weight:var(--w-semibold)}
.c-tag--pixel{font-family:var(--pixel);font-weight:var(--w-regular);letter-spacing:.04em}
/* sticky bar: solid, sits under the header */
.c-sticky{position:sticky;top:var(--hh,62px);z-index:40;background:var(--chrome);box-shadow:0 1px 0 var(--line);padding-block:var(--s-2)}
/* figure / plate */
.c-plate{margin:0;padding:6px;border-radius:var(--r-lg);background:var(--bg-raised);box-shadow:var(--shadow-1),var(--border)}
.c-plate img{display:block;width:100%;height:auto;border-radius:calc(var(--r-lg) - 6px)}
.c-plate figcaption{padding:var(--s-2) var(--s-2) var(--s-1);font-size:var(--t-sm);color:var(--fg-muted)}
/* tabs */
.c-tabs{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* c-btn--accent fix: keep the accent fill in dark mode (dark .c-btn rule was winning on specificity) */
[data-mode="dark"] .c-btn--accent{background:var(--accent);color:var(--on-accent)}