/* Tycoon Picks — Component Library
   Every class here is production-ready. Copy 1:1 to the Tailwind layer.
   ==================================================================== */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Noise grain overlay (site-wide) ---------- */
.tp-grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

/* ---------- Type scale ---------- */
.t-display-2xl { font-family: var(--ff-display); font-size: clamp(80px, 10vw, 130px); line-height: 0.9;  letter-spacing: -0.02em; font-weight: 400; }
.t-display-xl  { font-family: var(--ff-display); font-size: clamp(64px, 8vw,  104px); line-height: 0.92; letter-spacing: -0.02em; font-weight: 400; }
.t-display     { font-family: var(--ff-display); font-size: clamp(48px, 6.5vw, 80px);  line-height: 0.95; letter-spacing: -0.02em; font-weight: 400; }
.t-heading     { font-family: var(--ff-display); font-size: clamp(40px, 5vw,  56px);   line-height: 1.0;  letter-spacing: -0.01em; font-weight: 400; }
.t-subheading  { font-family: var(--ff-ui);      font-size: 20px; line-height: 1.25; letter-spacing: 0.04em; font-weight: 600; text-transform: uppercase; }
.t-body-lg     { font-family: var(--ff-body);    font-size: 18px; line-height: 1.6;  font-weight: 400; }
.t-body        { font-family: var(--ff-body);    font-size: 16px; line-height: 1.65; font-weight: 400; }
.t-body-sm     { font-family: var(--ff-body);    font-size: 14px; line-height: 1.6;  font-weight: 400; }
.t-caption     { font-family: var(--ff-body);    font-size: 13px; line-height: 1.5;  font-weight: 500; color: var(--muted); }
.t-micro       { font-family: var(--ff-body);    font-size: 11px; line-height: 1.4;  font-weight: 500; color: var(--fine); letter-spacing: 0.04em; }

/* ---------- Eyebrow label (signature detail) ---------- */
.eyebrow {
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow--txt   { color: var(--txt); }

/* ---------- Nav label ---------- */
.nav-label {
  font-family: var(--ff-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--txt);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 36px;
  border-radius: var(--r-sm);
  font-family: var(--ff-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-spring),
              box-shadow var(--dur-micro) var(--ease-spring),
              background-color var(--dur-micro) var(--ease-spring),
              border-color var(--dur-micro) var(--ease-spring);
  user-select: none;
  white-space: nowrap;
}

.btn-gold {
  background: var(--gold-grad);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #07070F;
  box-shadow: var(--sh-gold);
}
.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-gold-hv);
  background-position: 100% 50%;
}
.btn-gold:active { transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--txt);
  border-color: var(--g-35);
  font-weight: 600;
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(201,162,39,0.07);
  border-color: var(--g-60);
}

.btn-danger {
  background: transparent;
  color: var(--err-soft);
  border-color: rgba(239,68,68,0.35);
  font-weight: 600;
}
.btn-danger:hover {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.6);
  transform: translateY(-2px);
}

.btn[disabled], .btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-sm { padding: 10px 20px; font-size: 12px; }
.btn-lg { padding: 19px 44px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--s1);
  border: 1px solid var(--g-15);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  box-shadow: var(--sh-card);
  transition: transform var(--dur-micro) var(--ease-spring),
              border-color var(--dur-micro) var(--ease-spring),
              box-shadow var(--dur-micro) var(--ease-spring);
}
.card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--g-35);
  box-shadow: var(--sh-card-hv);
}

.card-gold {
  position: relative;
  background: linear-gradient(145deg, #14120A 0%, #1C1608 50%, #111119 100%);
  border: 1px solid var(--g-40);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  box-shadow:
    inset 0 1px 0 rgba(201,162,39,0.15),
    var(--sh-card);
}

.card-violet {
  background: var(--s1);
  border: 1px solid rgba(123,63,228,0.35);
  border-radius: var(--r-md);
  padding: var(--sp-8);
  box-shadow: var(--sh-card), 0 0 40px rgba(123,63,228,0.08);
}

/* ---------- Inputs ---------- */
.input, .textarea {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--g-15);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--txt);
  transition: border-color var(--dur-micro) var(--ease-smooth),
              background var(--dur-micro) var(--ease-smooth);
  outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--fine); }
.input:focus, .textarea:focus {
  border-color: var(--gold);
  background: #1D1D2B;
}
.input.is-error, .textarea.is-error { border-color: var(--err); }

.label {
  display: block;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ---------- Badges & pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--s2);
  border: 1px solid var(--g-15);
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--txt);
}
.badge--gold {
  background: rgba(201,162,39,0.08);
  border-color: var(--g-35);
  color: var(--gold-l);
}
.badge--ok   { background: rgba(34,197,94,0.08);  border-color: rgba(34,197,94,0.35);  color: var(--ok); }
.badge--err  { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.35);  color: var(--err-soft); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--s2);
  border: 1px solid var(--g-15);
  border-radius: var(--r-lg);
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt);
}
.pill--gold {
  background: var(--gold-grad);
  color: #07070F;
  border-color: transparent;
}

/* ---------- Divider ---------- */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-25), transparent);
  border: 0;
}
.hairline--solid { background: var(--g-15); }

/* ---------- Gold text effect ---------- */
.text-gold {
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}