/* =============================================================
   ADAGELY — Components layer
   Reusable UI primitives. Requires colors_and_type.css first.
   Prefix: .adg-*  ·  Mobile-first, works in light + night.
   ============================================================= */

/* ---------- Buttons ------------------------------------- */
.adg-btn{
  --_bg: var(--primary);
  --_fg: var(--primary-text);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-sans);font-weight:500;font-size:var(--step-0);
  line-height:1;letter-spacing:.01em;white-space:nowrap;
  padding:.85em 1.5em;border-radius:var(--r-sm);
  background:var(--_bg);color:var(--_fg);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.adg-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.adg-btn:active{ transform:translateY(0) scale(.99); box-shadow:var(--shadow-xs); }
.adg-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--focus-ring); }

.adg-btn--gold{ --_bg:var(--gold-500); --_fg:#221A09; }
.adg-btn--gold:hover{ --_bg:var(--gold-400); }

.adg-btn--ghost{
  --_bg:transparent; --_fg:var(--text);
  border-color:var(--border-strong); box-shadow:none;
}
.adg-btn--ghost:hover{ --_bg:color-mix(in oklch, var(--text) 5%, transparent); box-shadow:none; }

.adg-btn--quiet{ --_bg:transparent; --_fg:var(--accent-text); box-shadow:none; padding-inline:.4em; }
.adg-btn--quiet:hover{ transform:none; box-shadow:none; text-decoration:underline; text-underline-offset:4px; }

.adg-btn--sm{ font-size:var(--step--1); padding:.6em 1.05em; }
.adg-btn--lg{ font-size:var(--step-1); padding:.85em 1.7em; }
.adg-btn--block{ display:flex;width:100%; }
.adg-btn--pill{ border-radius:var(--r-pill); }

/* ---------- Inputs -------------------------------------- */
.adg-field{ display:flex;flex-direction:column;gap:.45em; }
.adg-field > .adg-label{ color:var(--text-muted); }
.adg-input,.adg-textarea{
  font-family:var(--font-sans);font-size:var(--step-0);color:var(--text);
  background:var(--bg-elevated);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:.75em .9em;width:100%;box-sizing:border-box;
  box-shadow:var(--shadow-inset);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.adg-input::placeholder,.adg-textarea::placeholder{ color:var(--text-faint); }
.adg-input:focus,.adg-textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--focus-ring);
}
.adg-search{ position:relative;display:flex;align-items:center; }
.adg-search .adg-input{ padding-left:2.5em; }
.adg-search > i{ position:absolute;left:.85em;color:var(--text-faint);font-size:1.1em; }

/* ---------- Chips / badges ------------------------------ */
.adg-chip{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-sans);font-size:var(--step--1);font-weight:500;
  padding:.4em .85em;border-radius:var(--r-pill);
  background:var(--bg-elevated);color:var(--text-body);
  border:1px solid var(--border-strong);cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.adg-chip:hover{ border-color:var(--accent); color:var(--text); }
.adg-chip--active{ background:var(--ink-900);color:var(--text-on-ink);border-color:var(--ink-900); }
[data-theme="dark"] .adg-chip--active{ background:var(--gold-500);color:#221A09;border-color:var(--gold-500); }

.adg-badge{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.3em .6em;border-radius:var(--r-xs);
  background:var(--gold-100);color:var(--gold-800);
}
.adg-badge--ink{ background:var(--ink-900);color:var(--gold-300); }

/* ---------- Card ---------------------------------------- */
.adg-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:var(--sp-5);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.adg-card--hover:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }

/* Quote card — the signature component */
.adg-quotecard{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:var(--sp-6) var(--sp-5) var(--sp-5);
  overflow:hidden;
}
.adg-quotecard::before{
  content:"\201C";position:absolute;top:.05em;left:.18em;
  font-family:var(--font-display);font-weight:600;font-size:96px;
  color:var(--accent);opacity:.18;line-height:1;pointer-events:none;
}
.adg-quotecard__text{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:var(--step-2);line-height:1.24;color:var(--text);
  text-wrap:balance;position:relative;
}
.adg-quotecard__by{
  display:flex;align-items:center;gap:.6em;margin-top:var(--sp-4);
}
.adg-quotecard__by::before{ content:"";width:22px;height:1px;background:var(--accent); }
.adg-quotecard__by span{ font-family:var(--font-sans);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted); }

/* ---------- Hairline divider ---------------------------- */
.adg-rule{ height:1px;background:var(--line);border:0;margin:var(--sp-5) 0; }
.adg-rule--gold{ height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent); }

/* ---------- Theme toggle pill --------------------------- */
.adg-toggle{
  display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-pill);
  padding:3px;background:var(--bg-sunken);gap:2px;
}
.adg-toggle button{
  font-family:var(--font-sans);font-size:var(--step--1);font-weight:500;
  border:0;background:transparent;color:var(--text-muted);
  padding:.4em .9em;border-radius:var(--r-pill);cursor:pointer;display:flex;align-items:center;gap:.4em;
  transition:all var(--dur) var(--ease);
}
.adg-toggle button[aria-pressed="true"]{ background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs); }