/* ============================================================
   components.css — Chris Warrick Design System
   ------------------------------------------------------------
   In the React design system, every component injects its own
   CSS at runtime (a <style data-cw="..."> tag). When you drop
   React and render with Jinja, that injection never happens —
   so this file is the extracted, consolidated equivalent.

   Load order in <head>:
     1. styles.css      (tokens: fonts, colors, type, spacing, base)
     2. components.css  (this file — the cw-* component classes)
     3. site.css        (page layout: hero, sections, work list, etc.)

   Class APIs match the React props 1:1 — see templates/_macros.html.
   ============================================================ */

/* ---------------- Button (cw-btn) ---------------- */
.cw-btn{
  --_bg: var(--primary); --_fg: var(--text-on-primary); --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  font-family:var(--font-sans); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-tight); line-height:1;
  border:var(--border-base) solid var(--_bd); border-radius:var(--radius-md);
  background:var(--_bg); color:var(--_fg); cursor:pointer; white-space:nowrap;
  text-decoration:none; transition:transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cw-btn:hover{ text-decoration:none; }
.cw-btn:active{ transform:translateY(1px); }
.cw-btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.cw-btn[disabled],.cw-btn[aria-disabled="true"]{ opacity:0.45; cursor:not-allowed; transform:none; }
.cw-btn--sm{ font-size:var(--text-sm); padding:0.45rem 0.85rem; }
.cw-btn--md{ font-size:var(--text-base); padding:0.6rem 1.15rem; }
.cw-btn--lg{ font-size:var(--text-md); padding:0.8rem 1.5rem; }
.cw-btn--primary{ --_bg:var(--primary); --_fg:var(--text-on-primary); box-shadow:var(--shadow-sm); }
.cw-btn--primary:hover{ --_bg:var(--primary-hover); box-shadow:var(--shadow-md); }
.cw-btn--accent{ --_bg:var(--accent); --_fg:var(--text-on-accent); box-shadow:var(--shadow-sm); }
.cw-btn--accent:hover{ --_bg:var(--accent-hover); box-shadow:var(--shadow-md); }
.cw-btn--secondary{ --_bg:transparent; --_fg:var(--text); --_bd:var(--border-strong); }
.cw-btn--secondary:hover{ --_bg:var(--surface-2); --_bd:var(--primary); --_fg:var(--primary); }
.cw-btn--ghost{ --_bg:transparent; --_fg:var(--text-secondary); --_bd:transparent; }
.cw-btn--ghost:hover{ --_bg:var(--surface-2); --_fg:var(--text); }
.cw-btn--gold{ --_bg:var(--gold); --_fg:#1a1305; box-shadow:var(--shadow-sm); }
.cw-btn--gold:hover{ filter:brightness(1.05); box-shadow:var(--shadow-md); }
.cw-btn__icon{ display:inline-flex; width:1.1em; height:1.1em; }
.cw-btn__icon svg{ width:100%; height:100%; }
.cw-btn--block{ width:100%; }

/* ---------------- Badge (cw-badge) ---------------- */
.cw-badge{
  display:inline-flex; align-items:center; gap:0.4em;
  font-family:var(--font-mono); font-weight:var(--fw-medium);
  font-size:var(--text-2xs); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; line-height:1;
  padding:0.34em 0.62em; border-radius:var(--radius-sm);
  border:var(--border-thin) solid transparent; white-space:nowrap;
}
.cw-badge--solid{ font-family:var(--font-sans); text-transform:none; letter-spacing:var(--tracking-normal); font-size:var(--text-xs); }
.cw-badge__dot{ width:0.5em; height:0.5em; border-radius:50%; background:currentColor; }
.cw-badge--neutral{ color:var(--text-secondary); background:var(--surface-2); border-color:var(--border); }
.cw-badge--blue{ color:var(--primary); background:var(--primary-soft); border-color:color-mix(in oklch,var(--primary) 22%,transparent); }
.cw-badge--teal{ color:var(--accent-hover); background:var(--accent-soft); border-color:color-mix(in oklch,var(--accent) 24%,transparent); }
.cw-badge--gold{ color:var(--gold-700); background:var(--gold-soft); border-color:color-mix(in oklch,var(--gold) 30%,transparent); }
.cw-badge--success{ color:var(--success-500); background:var(--success-bg); border-color:color-mix(in oklch,var(--success-500) 24%,transparent); }
.cw-badge--outline{ color:var(--text-secondary); background:transparent; border-color:var(--border-strong); }
[data-theme="dark"] .cw-badge--gold,.theme-dark .cw-badge--gold{ color:var(--gold-400); }

/* ---------------- Kicker (cw-kicker-c) ---------------- */
.cw-kicker-c{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-mono); font-weight:var(--fw-medium);
  font-size:var(--text-xs); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--accent); line-height:1;
}
.cw-kicker-c--muted{ color:var(--text-muted); }
.cw-kicker-c--gold{ color:var(--gold); }
.cw-kicker-c__rule{ width:1.75rem; height:var(--border-base); background:currentColor; display:inline-block; flex:none; }
.cw-kicker-c__idx{ opacity:0.6; }

/* ---------------- Stat (cw-stat) ---------------- */
.cw-stat{ display:flex; flex-direction:column; gap:0.15rem; }
.cw-stat__value{
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--text-3xl); line-height:1; letter-spacing:var(--tracking-tight);
  color:var(--text); font-feature-settings:'tnum' 1; display:flex; align-items:baseline; gap:0.08em;
}
.cw-stat__affix{ font-size:0.55em; font-weight:var(--fw-semibold); color:var(--accent); }
.cw-stat__label{
  font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-muted);
}
.cw-stat--accent .cw-stat__value{ color:var(--primary); }
.cw-stat--gold .cw-stat__affix{ color:var(--gold); }

/* ---------------- Card (cw-card) ---------------- */
.cw-card{
  position:relative; background:var(--surface); color:var(--text);
  border:var(--border-thin) solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-5);
  transition:transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.cw-card--flat{ box-shadow:none; }
.cw-card--raised{ box-shadow:var(--shadow-md); }
.cw-card--sunken{ background:var(--surface-sunken); box-shadow:none; }
.cw-card--interactive{ cursor:pointer; }
.cw-card--interactive:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); }
.cw-card--interactive:active{ transform:translateY(-1px); }
.cw-card--ticked::before{
  content:""; position:absolute; top:-1px; left:-1px; width:18px; height:18px;
  border-top:var(--border-thick) solid var(--accent);
  border-left:var(--border-thick) solid var(--accent);
  border-top-left-radius:var(--radius-lg);
}
.cw-card__media{ margin:calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; }
.cw-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------- Monogram / wordmark (cw-id) ---------------- */
.cw-id{ display:inline-flex; align-items:center; gap:0.7rem; font-family:var(--font-display); color:var(--text); }
.cw-id__mark{
  position:relative; display:inline-grid; place-items:center; flex:none;
  background:var(--navy-800); color:#fff; border-radius:var(--radius-md);
  font-weight:var(--fw-bold); letter-spacing:-0.04em; line-height:1; overflow:hidden;
}
.cw-id__mark::after{
  content:""; position:absolute; left:18%; right:18%; bottom:15%;
  height:0.11em; background:var(--teal-500); border-radius:2px;
}
.cw-id__mark--circle{ border-radius:var(--radius-pill); }
.cw-id__mark--circle::after{ left:30%; right:30%; bottom:18%; }
.cw-id__mark--ring{ background:transparent; color:var(--text); border:var(--border-thick) solid var(--navy-700); }
[data-theme="dark"] .cw-id__mark--ring,.theme-dark .cw-id__mark--ring{ border-color:var(--blue-400); }
.cw-id__mark--light{ background:#fff; color:var(--navy-800); box-shadow:var(--shadow-sm); }
.cw-id__mark--gold::after{ background:var(--gold-500); }
.cw-id__glyph{ position:relative; z-index:1; transform:translateY(-0.02em); }
.cw-id__text{ display:flex; flex-direction:column; gap:0.1rem; }
.cw-id__name{ font-family:var(--font-display); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-tight); line-height:1; color:var(--text); }
.cw-id__role{ font-family:var(--font-mono); font-size:0.62em; font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-muted); }

/* ---------------- Avatar (cw-avatar) ---------------- */
.cw-avatar{ position:relative; display:inline-grid; place-items:center; flex:none;
  border-radius:var(--radius-pill); overflow:hidden; background:var(--navy-700); color:#fff;
  font-family:var(--font-display); font-weight:var(--fw-semibold); line-height:1; }
.cw-avatar--square{ border-radius:var(--radius-lg); }
.cw-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.cw-avatar--ring{ box-shadow:0 0 0 var(--border-thick) var(--surface), 0 0 0 calc(var(--border-thick) + 2px) var(--accent); }
.cw-avatar__status{ position:absolute; right:6%; bottom:6%; width:28%; height:28%;
  border-radius:50%; background:var(--success-500); box-shadow:0 0 0 2px var(--surface); }
