/* Reusable component base styles for mc2i */
@import url('./tokens.css');

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 24px; border-radius: 9999px;
  font: 700 14px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn.sm { height: 36px; padding: 0 18px; font-size: 12px; }
.btn.lg { height: 52px; padding: 0 32px; font-size: 16px; }
.btn .material-icons-outlined { font-size: 18px; }

/* filled variants */
.btn--primary  { background: var(--primary-5);   color: #fff; }
.btn--primary:hover  { background: var(--primary-6); }
.btn--primary:active { background: var(--primary-7); }

.btn--secondary { background: var(--secondary-5); color: #fff; }
.btn--secondary:hover  { background: var(--secondary-6); }
.btn--secondary:active { background: var(--secondary-7); }

/* outlined */
.btn--outline { background: transparent; color: var(--primary-5); border: 2px solid var(--primary-5); height: 40px; }
.btn--outline:hover { background: var(--primary-0); }
.btn--outline.secondary { color: var(--secondary-5); border-color: var(--secondary-5); }
.btn--outline.secondary:hover { background: var(--secondary-0); }

/* text */
.btn--text { background: transparent; color: var(--primary-5); }
.btn--text:hover { background: var(--primary-0); }
.btn--text.secondary { color: var(--secondary-5); }
.btn--text.secondary:hover { background: var(--secondary-0); }

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn.disabled { opacity: .4; cursor: not-allowed; }

/* icon-button */
.icon-btn { width: 40px; height: 40px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--neutral-7); cursor: pointer; transition: background .15s ease; }
.icon-btn:hover { background: var(--neutral-1); }
.icon-btn .material-icons-outlined { font-size: 22px; }

/* floating action button */
.fab { width: 56px; height: 56px; border-radius: 9999px; background: var(--primary-5); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  box-shadow: var(--elevation-3); }
.fab:hover { background: var(--primary-6); box-shadow: var(--elevation-4); }
.fab .material-icons-outlined { font-size: 24px; }

/* ---------- INPUTS ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: 700 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.input {
  height: 48px; padding: 0 16px; border-radius: 9999px;
  border: 1px solid var(--neutral-3); background: #fff;
  font: 400 14px/1 var(--font-sans); color: var(--text-default);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover { border-color: var(--neutral-5); }
.input:focus { outline: none; border-color: var(--primary-5); box-shadow: 0 0 0 3px var(--primary-0); }
.input.error { border-color: var(--error-5); }
.input.error:focus { box-shadow: 0 0 0 3px var(--error-0); }
.input[disabled] { background: var(--neutral-1); color: var(--text-disabled); }
.field .help { font: 400 12px/1.4 var(--font-sans); color: var(--text-secondary); }
.field.error .help { color: var(--text-error); }

.textarea { min-height: 96px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--neutral-3);
  font: 400 14px/1.5 var(--font-sans); color: var(--text-default); resize: vertical; }
.textarea:focus { outline: none; border-color: var(--primary-5); box-shadow: 0 0 0 3px var(--primary-0); }

/* ---------- SELECTION ---------- */
.checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.checkbox input { appearance: none; width: 20px; height: 20px; border: 2px solid var(--neutral-4);
  border-radius: 4px; background: #fff; cursor: pointer; position: relative; margin: 0;
  transition: background .15s, border-color .15s; }
.checkbox input:checked { background: var(--primary-5); border-color: var(--primary-5); }
.checkbox input:checked::after { content: '✓'; color: #fff; font-size: 14px; font-weight: 900; position: absolute; top: -2px; left: 3px; }
.checkbox input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-0); }

.radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.radio input { appearance: none; width: 20px; height: 20px; border: 2px solid var(--neutral-4);
  border-radius: 50%; background: #fff; cursor: pointer; position: relative; margin: 0;
  transition: border-color .15s; }
.radio input:checked { border-color: var(--primary-5); }
.radio input:checked::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--primary-5);
  position: absolute; top: 3px; left: 3px; }

.switch { position: relative; width: 44px; height: 24px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--neutral-3); border-radius: 9999px; transition: background .2s; cursor: pointer; }
.switch .track::before { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .track { background: var(--primary-5); }
.switch input:checked + .track::before { transform: translateX(20px); }

/* ---------- CHIPS / TAGS ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 9999px;
  background: var(--neutral-1); color: var(--neutral-8); font: 700 12px/1 var(--font-sans); letter-spacing: .06em; }
.chip--primary   { background: var(--primary-0);   color: var(--primary-7); }
.chip--secondary { background: var(--secondary-0); color: var(--secondary-7); }
.chip--success   { background: var(--success-0);   color: var(--success-7); }
.chip--warning   { background: var(--warning-0);   color: var(--warning-7); }
.chip--error     { background: var(--error-0);     color: var(--error-7); }
.chip--info      { background: var(--info-0);      color: var(--info-7); }

/* ---------- CARDS ---------- */
.surface-card { background: #fff; border: 1px solid #EBEBEB; border-radius: 16px; box-shadow: 0 2px 3px rgba(0,0,0,.03); }
.surface-card.padded { padding: 24px; }
.surface-hero { background: #fff; border-radius: 24px; padding: 48px 64px; box-shadow: var(--elevation-2); }

/* ---------- BADGES / ALERTS ---------- */
.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; font-size: 14px; }
.alert .material-icons-outlined { flex-shrink: 0; }
.alert--info    { background: var(--info-0);    border-color: #CFC2E8; color: var(--info-7); }
.alert--success { background: var(--success-0); border-color: #A8E0A8; color: var(--success-7); }
.alert--warning { background: var(--warning-0); border-color: #EBCF85; color: var(--warning-7); }
.alert--error   { background: var(--error-0);   border-color: #F0A696; color: var(--error-7); }

/* ---------- LINKS ---------- */
a.link { color: var(--primary-5); text-decoration: none; font-weight: 700; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
a.link:hover { color: var(--primary-6); border-bottom-color: currentColor; }

/* ---------- TOOLTIP ---------- */
.tooltip { position: absolute; background: var(--neutral-8); color: #fff; padding: 6px 10px; font-size: 12px; border-radius: 6px; white-space: nowrap; box-shadow: var(--elevation-2); }
.tooltip::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--neutral-8); }

/* ---------- LOADER ---------- */
.loader { width: 32px; height: 32px; border: 3px solid var(--neutral-2); border-top-color: var(--primary-5);
  border-radius: 50%; animation: mc2iSpin 0.8s linear infinite; }
@keyframes mc2iSpin { to { transform: rotate(360deg); } }