/* ============================================================================
   primitives.css — PLW PRIMITIVES (Foundation 02)
   Component styles. Every .c-* class reads ONLY contract tokens from tokens.css.
   Doc chrome is namespaced --doc-* so it never collides with the skin it shows.
   ============================================================================ */
:root {
  --doc-paper:#f3f0e9; --doc-card:#fbfaf6; --doc-ink:#1c1b18; --doc-faint:#8a857a;
  --doc-rule:#d9d3c6; --doc-rule-2:#c7c0b1;
  --doc-serif:"Newsreader",Georgia,serif; --doc-sans:"Inter",system-ui,sans-serif; --doc-mono:"JetBrains Mono",ui-monospace,monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--doc-paper); color:var(--doc-ink); font-family:var(--doc-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection { background:#1c1b18; color:#f3f0e9; }
code { font-family:var(--doc-mono); }

/* ---------------------------------------------------------------- shell ---- */
.top {
  position: sticky; top: 0; z-index: 30; background: rgba(243,240,233,.92);
  backdrop-filter: blur(8px); border-bottom: 2px solid var(--doc-ink);
}
.top__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 24px; }
.brandmark { display: flex; align-items: baseline; gap: 10px; margin-right: auto; white-space: nowrap; }
.brandmark b { font-family: var(--doc-serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.brandmark span { font-family: var(--doc-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--doc-faint); }
.switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.switch__grp { display: flex; align-items: center; gap: 6px; }
.switch__lbl { font-family: var(--doc-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--doc-faint); }
.sel { font-family: var(--doc-mono); font-size: 12px; color: var(--doc-ink); background: #fff; border: 1px solid var(--doc-rule-2); border-radius: 4px; padding: 6px 8px; cursor: pointer; }
.sel:focus-visible { outline: 2px solid var(--doc-ink); outline-offset: 1px; }
.swatch-in { width: 30px; height: 30px; border: 1px solid var(--doc-rule-2); border-radius: 5px; padding: 0; cursor: pointer; overflow: hidden; flex: none; }
.swatch-in::-webkit-color-swatch-wrapper { padding: 0; } .swatch-in::-webkit-color-swatch { border: 0; }
.vp { display: flex; gap: 4px; }
.vp button { font-family: var(--doc-mono); font-size: 10px; letter-spacing:.08em; text-transform: uppercase; color: var(--doc-faint); background: transparent; border: 1px solid var(--doc-rule-2); border-radius: 3px; padding: 6px 9px; cursor: pointer; }
.vp button[aria-pressed="true"] { color: var(--doc-ink); background: #fff; border-color: var(--doc-ink); }

.layout { display: grid; grid-template-columns: 1fr; max-width: 1320px; margin: 0 auto; }
@media (min-width: 860px) { .layout { grid-template-columns: 232px 1fr; } }

.nav { border-right: 1px solid var(--doc-rule); padding: 24px 16px; }
@media (min-width: 860px) { .nav { position: sticky; top: 62px; align-self: start; height: calc(100vh - 62px); overflow-y: auto; } }
.nav__group { font-family: var(--doc-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--doc-faint); margin: 18px 8px 8px; }
.nav__group:first-child { margin-top: 0; }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: #4a473f; text-decoration: none; padding: 8px 10px; border-radius: 5px; }
.nav a:hover { background: #efebe2; color: var(--doc-ink); }
.nav a.active { background: var(--doc-ink); color: var(--doc-card); }
.nav a small { font-family: var(--doc-mono); font-size: 9.5px; opacity: .6; }

.main { padding: 32px 24px 96px; min-width: 0; }
.cmp { display: none; }
.cmp.active { display: block; }

.cmp__head { margin-bottom: 6px; }
.cmp__eyebrow { font-family: var(--doc-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--doc-faint); margin: 0 0 8px; }
.cmp__title { font-family: var(--doc-serif); font-weight: 600; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.01em; margin: 0 0 10px; line-height: 1.04; }
.cmp__lede { font-size: 16px; color: #4a473f; max-width: 64ch; margin: 0 0 8px; }
.cmp__lede b { color: var(--doc-ink); }

.block { margin-top: 30px; }
.block__bar { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.block__num { font-family: var(--doc-mono); font-size: 11px; color: var(--doc-faint); }
.block__title { font-family: var(--doc-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--doc-ink); }

/* ---- the themed live stage that holds previews ---- */
.stage { border: 1px solid var(--doc-rule); border-radius: 8px; overflow: hidden; }
.stage__skinline { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #efebe2; border-bottom: 1px solid var(--doc-rule); font-family: var(--doc-mono); font-size: 10.5px; color: #4a473f; flex-wrap: wrap; }
.stage__skinline b { color: var(--doc-ink); }
.stagewrap { display: grid; place-items: start center; padding: 30px 22px; background: repeating-linear-gradient(45deg,#efece4,#efece4 10px,#ebe7df 10px,#ebe7df 20px); }
.surface {
  width: 100%; max-width: 100%; background: var(--color-bg); color: var(--color-fg);
  font-family: var(--font-body); padding: 28px 24px; overflow: hidden;
}
.stagewrap[data-vp="mobile"] .surface { max-width: 380px; }

.specimen { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; }
.specimen--col { flex-direction: column; align-items: flex-start; gap: 16px; }
.spc { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.spc__cap { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--mid { align-items: center; }

/* ============================================================================
   PRIMITIVE: BUTTON  (primary / secondary / ghost / destructive; sm / md / lg)
   ============================================================================ */
.c-btn {
  font-family: var(--font-body); font-weight: 600; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border-radius: var(--radius-md); border: var(--border-default) solid transparent;
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
  text-decoration: none; white-space: nowrap;
}
.c-btn:focus-visible { outline: var(--border-heavy) solid var(--color-ring); outline-offset: 2px; }
.c-btn[disabled], .c-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* sizes */
.c-btn--sm { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
.c-btn--md { font-size: var(--text-sm); padding: var(--space-3) var(--space-5); }
.c-btn--lg { font-size: var(--text-base); padding: var(--space-4) var(--space-6); }
/* variants */
.c-btn--primary { background: var(--color-accent); color: var(--color-accent-fg); border-color: color-mix(in srgb, var(--color-accent) 84%, #000); box-shadow: var(--shadow-md); }
.c-btn--primary:hover { filter: brightness(1.05); }
[data-shape="brutalist"] .c-btn--primary:hover { transform: translate(-1px,-1px); box-shadow: var(--shadow-lg); }
.c-btn--secondary { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-border); }
.c-btn--secondary:hover { background: color-mix(in srgb, var(--color-fg) 6%, var(--color-surface)); }
.c-btn--ghost { background: transparent; color: var(--color-fg); border-color: transparent; }
.c-btn--ghost:hover { background: color-mix(in srgb, var(--color-fg) 8%, transparent); }
.c-btn--destructive { background: var(--color-danger); color: #fff; border-color: color-mix(in srgb, var(--color-danger) 84%, #000); box-shadow: var(--shadow-md); }
.c-btn--destructive:hover { filter: brightness(1.06); }
.c-btn__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: currentColor; }

/* ============================================================================
   PRIMITIVE: LINK
   ============================================================================ */
.c-link { font-family: var(--font-body); color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: pointer; border-radius: 2px; }
[data-palette="yellow"] .c-link, [data-palette="champagne"] .c-link, [data-palette="navy"] .c-link, [data-palette="mustard"] .c-link, [data-palette="sage"] .c-link, [data-palette="coral"] .c-link, [data-palette="tangerine"] .c-link { color: color-mix(in srgb, var(--color-accent) 60%, var(--color-fg)); }
.c-link:hover { text-decoration-thickness: 2.5px; }
.c-link:focus-visible { outline: var(--border-default) solid var(--color-ring); outline-offset: 2px; }
.c-link--subtle { color: var(--color-fg); text-decoration-color: var(--color-border); }
.c-link--subtle:hover { text-decoration-color: var(--color-fg); }
.c-link--standalone { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.c-link--standalone::after { content: "\2192"; transition: transform .15s ease; }
.c-link--standalone:hover::after { transform: translateX(3px); }

/* ============================================================================
   PRIMITIVE: BADGE & TAG
   ============================================================================ */
.c-badge { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: var(--border-thin) solid transparent; white-space: nowrap; }
.c-badge--accent { background: var(--color-accent); color: var(--color-accent-fg); }
.c-badge--accent-soft { background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); color: color-mix(in srgb, var(--color-accent) 70%, var(--color-fg)); }
.c-badge--neutral { background: color-mix(in srgb, var(--color-fg) 8%, var(--color-bg)); color: var(--color-fg); }
.c-badge--success { background: color-mix(in srgb, var(--color-success) 16%, var(--color-bg)); color: color-mix(in srgb, var(--color-success) 72%, var(--color-fg)); }
.c-badge--warning { background: color-mix(in srgb, var(--color-warning) 18%, var(--color-bg)); color: color-mix(in srgb, var(--color-warning) 72%, var(--color-fg)); }
.c-badge--danger { background: color-mix(in srgb, var(--color-danger) 16%, var(--color-bg)); color: color-mix(in srgb, var(--color-danger) 72%, var(--color-fg)); }
.c-badge--outline { background: transparent; border-color: var(--color-border); color: var(--color-muted); }
.c-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }

.c-tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.c-tag button { all: unset; cursor: pointer; line-height: 0; color: var(--color-muted); font-size: 13px; }
.c-tag button:hover { color: var(--color-fg); }

/* ============================================================================
   PRIMITIVE: DIVIDER
   ============================================================================ */
.c-divider { border: 0; border-top: var(--border-thin) solid var(--color-border); margin: var(--space-5) 0; width: 100%; }
.c-divider--heavy { border-top-width: var(--border-default); }
.c-divider--label { display: flex; align-items: center; gap: var(--space-4); border: 0; color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; }
.c-divider--label::before, .c-divider--label::after { content: ""; flex: 1; border-top: var(--border-thin) solid var(--color-border); }
.c-divider-v { width: 0; align-self: stretch; border: 0; border-left: var(--border-thin) solid var(--color-border); margin: 0 var(--space-4); min-height: 28px; }

/* ============================================================================
   PRIMITIVE: INPUT / TEXTAREA / SELECT
   ============================================================================ */
.c-field { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 320px; }
.c-label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-fg); display: flex; align-items: center; gap: var(--space-2); }
.c-label .req { color: var(--color-danger); }
.c-input, .c-textarea, .c-select {
  width: 100%; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-fg);
  background: var(--color-surface); border: var(--border-default) solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.c-input::placeholder, .c-textarea::placeholder { color: var(--color-muted); }
.c-input:focus-visible, .c-textarea:focus-visible, .c-select:focus-visible { outline: var(--border-default) solid var(--color-ring); outline-offset: 1px; border-color: var(--color-ring); }
.c-textarea { resize: vertical; min-height: 92px; line-height: var(--leading-normal); }
.c-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--space-9); }
.c-field--error .c-input, .c-field--error .c-textarea, .c-field--error .c-select { border-color: var(--color-danger); }
.c-help { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); }
.c-help--error { color: var(--color-danger); font-weight: 600; }
.c-field[data-disabled] { opacity: .55; }

/* ============================================================================
   PRIMITIVE: CHECKBOX / RADIO
   ============================================================================ */
.c-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-fg); }
.c-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.c-check__box { flex: none; width: 20px; height: 20px; border: var(--border-default) solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm); display: grid; place-items: center; margin-top: 1px; }
.c-check__box--radio { border-radius: var(--radius-pill); }
.c-check__box svg { width: 12px; height: 12px; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.c-check__box .dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--color-accent-fg); opacity: 0; transform: scale(.4); transition: opacity .12s, transform .12s; }
.c-check input:checked + .c-check__box { background: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 80%, #000); }
.c-check input:checked + .c-check__box svg { opacity: 1; transform: none; color: var(--color-accent-fg); }
.c-check input:checked + .c-check__box .dot { opacity: 1; transform: none; }
.c-check input:focus-visible + .c-check__box { outline: var(--border-heavy) solid var(--color-ring); outline-offset: 2px; }
.c-check__txt { line-height: 1.35; }
.c-check__txt small { display: block; color: var(--color-muted); font-size: var(--text-xs); margin-top: 2px; }

/* file upload */
.c-file { display: flex; align-items: center; gap: var(--space-3); border: var(--border-default) dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--color-surface); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); max-width: 360px; }
.c-file__icon { width: 38px; height: 38px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); color: var(--color-accent); display: grid; place-items: center; flex: none; }
.c-file b { color: var(--color-fg); display: block; font-weight: 600; }

/* icon wrapper + focus ring demo */
.c-iconwrap { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); color: var(--color-accent); }
.c-iconwrap--solid { background: var(--color-accent); color: var(--color-accent-fg); }
.c-iconwrap--ghost { background: transparent; border: var(--border-default) solid var(--color-border); color: var(--color-fg); }
.c-iconwrap svg { width: 20px; height: 20px; }
.focusring-demo { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-fg); background: var(--color-surface); border: var(--border-default) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); cursor: pointer; }
.focusring-demo:focus-visible { outline: var(--border-heavy) solid var(--color-ring); outline-offset: 3px; }

/* ============================================================================
   DOC: a11y + token contract + code
   ============================================================================ */
.grid2 { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 14px; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.note { background: var(--doc-card); border: 1px solid var(--doc-rule); border-radius: 8px; padding: 20px 22px; }
.note h4 { font-family: var(--doc-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--doc-faint); margin: 0 0 12px; }
.note ul { margin: 0; padding-left: 18px; }
.note li { font-size: 14px; color: #3c3a34; margin-bottom: 8px; }
.note li b { color: var(--doc-ink); }
.kbd { font-family: var(--doc-mono); font-size: 11px; background: #efebe2; border: 1px solid var(--doc-rule-2); border-radius: 3px; padding: 1px 6px; }
.toks { display: flex; flex-wrap: wrap; gap: 7px; }
.tok { font-family: var(--doc-mono); font-size: 11px; color: #6b4f1e; background: #efe7d6; border: 1px solid #e0d4b8; border-radius: 4px; padding: 4px 9px; }

.code { position: relative; border: 1px solid var(--doc-rule); border-radius: 8px; overflow: hidden; background: #1b1a17; margin-top: 14px; }
.code pre { margin: 0; padding: 20px; overflow-x: auto; font-family: var(--doc-mono); font-size: 12.5px; line-height: 1.7; color: #e9e3d4; }
.code .c { color: #8f8a7a; font-style: italic; } .code .v { color: #c9a96e; } .code .s { color: #9ec99b; } .code .k { color: #d6a3c4; } .code .t { color: #7fb8d6; }
.copy { position: absolute; top: 12px; right: 12px; font-family: var(--doc-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #1b1a17; background: #c9a96e; border: 0; border-radius: 3px; padding: 7px 12px; cursor: pointer; }
.copy:hover { background: #d8bd86; }
.copy:focus-visible { outline: 2px solid #fff8e8; outline-offset: 2px; }