/* =============================================================
   COMPONENT PRIMITIVES (Buttons, Cards, Badges, Alerts, Forms)
   All color + spacing via tokens; no raw hex.
   ============================================================= */

/* BUTTONS */
.btn{ --btn-padding-x:1.15rem; --btn-padding-y:.9rem; --btn-radius:.75rem; --btn-fg:var(--action-primary-fg); font-family:var(--font-primary); font-weight:600; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:.55rem; padding:var(--btn-padding-y) var(--btn-padding-x); border-radius:var(--btn-radius); font-size:1rem; line-height:1.1; cursor:pointer; position:relative; text-decoration:none; user-select:none; border:1px solid transparent; transition:background .35s,box-shadow .35s,color .35s,border-color .35s; }
.btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
.btn--primary{ background:var(--action-primary-bg); color:var(--action-primary-fg); box-shadow:var(--shadow-elev-2); border-color:transparent; }
.btn--primary:hover{ background:var(--action-primary-bg-hover); }
.btn--primary:active{ transform:translateY(1px); box-shadow:var(--shadow-elev-1); }
.btn--secondary{ background:var(--color-bg-hover); color:var(--color-text-primary); border-color:var(--color-border-subtle); }
.btn--secondary:hover{ background:var(--color-bg-pop); }
.btn--secondary:active{ background:var(--color-bg-pop); transform:translateY(1px); }
.btn--ghost{ background:transparent; color:var(--color-text-secondary); }
.btn--ghost:hover{ color:var(--color-text-primary); background:var(--color-bg-hover); }
.btn--outline{ background:transparent; color:var(--color-text-primary); border-color:var(--color-border-strong); }
.btn--outline:hover{ background:var(--color-bg-hover); }
.btn--danger{ background:var(--red-400); color:var(--color-text-on-brand); }
.btn--danger:hover{ background:var(--red-500); }
.btn--danger:active{ background:var(--red-600); }
.btn--gold{ background:var(--grad-gold); color:var(--color-text-on-brand); }
.btn--gold:hover{ filter:brightness(1.08); }
.btn--sm{ --btn-padding-y:.55rem; --btn-padding-x:.85rem; font-size:.85rem; }
.btn--lg{ --btn-padding-y:1.05rem; --btn-padding-x:1.65rem; font-size:1.1rem; }

/* CARDS */
.card{ background:var(--color-bg-raised); border:1px solid var(--color-border-subtle); border-radius:.9rem; padding:var(--space-6); box-shadow:var(--shadow-elev-1); position:relative; transition:background .35s,border-color .35s,box-shadow .35s; }
.card:hover{ background:var(--color-bg-pop); }
.card--interactive{ cursor:pointer; }
.card--interactive:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }

/* BADGES */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; letter-spacing:.05em; font-weight:600; text-transform:uppercase; padding:.35rem .55rem; border-radius:.5rem; line-height:1; border:1px solid transparent; }
.badge--blue{ background:rgba(46,128,246,0.12); color:var(--brand-blue-300); border-color:rgba(46,128,246,0.4); }
.badge--gold{ background:rgba(233,172,34,0.14); color:var(--gold-300); border-color:rgba(233,172,34,0.45); }
.badge--success{ background:rgba(37,201,153,0.16); color:var(--green-300); border-color:rgba(37,201,153,0.45); }
.badge--danger{ background:rgba(225,63,63,0.16); color:var(--red-300); border-color:rgba(225,63,63,0.45); }
.badge--neutral{ background:var(--color-bg-hover); color:var(--color-text-secondary); border-color:var(--color-border-subtle); }

/* ALERTS */
.alert{ border:1px solid; border-radius:.85rem; padding:var(--space-5) var(--space-6); display:flex; gap:var(--space-4); align-items:flex-start; position:relative; }
.alert__icon{ line-height:0; font-size:1.15rem; opacity:.9; }
.alert__content{ flex:1; }
.alert__title{ font-size:.95rem; font-weight:600; margin:0 0 .35rem; letter-spacing:.01em; }
.alert__desc{ font-size:.85rem; line-height:1.4; margin:0; }
.alert--info{ background:rgba(39,185,227,0.12); border-color:rgba(39,185,227,0.4); color:var(--cyan-300); }
.alert--success{ background:rgba(37,201,153,0.12); border-color:rgba(37,201,153,0.45); color:var(--green-300); }
.alert--warning{ background:rgba(228,137,30,0.14); border-color:rgba(228,137,30,0.45); color:var(--amber-300); }
.alert--danger{ background:rgba(225,63,63,0.14); border-color:rgba(225,63,63,0.45); color:var(--red-300); }

/* FORM FIELDS */
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-secondary); }
.field input[type=text],
.field input[type=email],
.field input[type=number],
.field select, .field textarea{ background:var(--color-bg-inset); border:1px solid var(--color-border-subtle); color:var(--color-text-primary); border-radius:.65rem; padding:.75rem .9rem; font:inherit; line-height:1.3; transition:border-color .3s, background .3s, box-shadow .3s; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:none; border-color:var(--color-border-accent); box-shadow:0 0 0 2px rgba(46,128,246,0.25); }
.field__hint{ font-size:.7rem; color:var(--color-text-muted); line-height:1.3; }
.field__error{ font-size:.7rem; color:var(--red-300); font-weight:600; }
.field--error input,
.field--error select,
.field--error textarea{ border-color:var(--red-400); }

/* FOCUS RING UTILITY */
.focus-ring{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .btn, .card, .alert{ transition:none !important; }
}

/* LIGHT THEME ADJUSTMENTS (optional nuance) */
[data-theme="light"] .badge--neutral{ background:var(--color-bg-hover); color:var(--color-text-secondary); }

/* End components.css */