/* ============================================================
   3 SONS CABINETS — Component styles (buttons, fields, cards, chips)
   Depends on colors_and_type.css
   ============================================================ */

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--font-body);
  font-weight:var(--w-bold);
  font-size:var(--step-0);
  letter-spacing:.01em;
  border:none;
  border-radius:var(--r-pill);
  padding:13px 26px;
  display:inline-flex;align-items:center;gap:9px;
  cursor:pointer;
  text-decoration:none;
  transition:transform var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}

.btn--primary{background:var(--brand-green);color:#fff;box-shadow:var(--shadow-brand);}
.btn--primary:hover{background:var(--primary-deep);transform:translateY(-1px);box-shadow:0 16px 32px rgba(139,69,19,.32);}
.btn--primary:active{transform:scale(.97);box-shadow:var(--shadow-sm);}

.btn--secondary{background:var(--brass);color:#fff;box-shadow:0 8px 20px rgba(176,106,40,.30);}
.btn--secondary:hover{background:var(--brass-deep);transform:translateY(-1px);}

.btn--dark{background:var(--ink-banner);color:#fff;}
.btn--dark:hover{background:#000;transform:translateY(-1px);}

.btn--outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong);}
.btn--outline:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);}

.btn--ghost{background:transparent;color:var(--brand-blue-deep);padding-left:8px;padding-right:8px;}
.btn--ghost:hover{color:var(--ink);}

.btn--sm{font-size:var(--step--1);padding:9px 18px;}
.btn--lg{font-size:var(--step-1);padding:16px 34px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;}

/* ---------- FIELDS ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.field > label{font-family:var(--font-body);font-weight:var(--w-semibold);font-size:var(--step--1);color:var(--ink);}
.input,.textarea,.select{
  font-family:var(--font-body);
  font-size:var(--step-0);
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-md);
  padding:12px 14px;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  outline:none;
  width:100%;box-sizing:border-box;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3);}
.input:focus,.textarea:focus,.select:focus{
  border-color:var(--brand-blue);
  box-shadow:0 0 0 4px var(--brand-blue-soft);
}
.textarea{resize:vertical;min-height:96px;}

/* ---------- CARDS ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.card__body{padding:var(--s-5);}

/* ---------- CHIPS / BADGES ---------- */
.chip{
  font-family:var(--font-body);font-weight:var(--w-semibold);
  font-size:var(--step--1);letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:var(--r-pill);
}
.chip--green{background:var(--brand-green-soft);color:var(--brand-green-deep);}
.chip--blue{background:var(--brand-blue-soft);color:var(--brand-blue-deep);}
.chip--ink{background:#EEE9E0;color:var(--ink-2);}
.chip--outline{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink-2);}
.chip--gg{background:var(--gold-soft);color:#7A551C;box-shadow:none;}

.badge{
  font-family:var(--font-body);font-weight:var(--w-bold);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-xs);
}
.badge--green{background:var(--brand-green);color:#fff;}
.badge--blue{background:var(--brand-blue);color:#fff;}