/* ============================================================
   SŌLATI DESIGN SYSTEM — components.css
   Class component đọc token từ tokens.css. KHÔNG hard-code màu/cỡ.
   GĐ 2: atoms (button, link, badge, chip, input, field, switch, …)
   ============================================================ */

/* ===================== BUTTON ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-body);font-size:var(--t-sm);font-weight:var(--fw-med);
  line-height:1;letter-spacing:.01em;
  padding:13px 26px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.btn i{font-size:1.25em}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}

/* variants */
.btn--primary{background:var(--c-n-900);color:var(--c-n-0);box-shadow:var(--sh-2)}
.btn--primary:hover{box-shadow:var(--sh-3)}
/* dùng accent-strong cho nền có chữ trắng → đạt WCAG AA (5.6:1); accent thường để trang trí */
.btn--accent{background:var(--c-accent-strong);color:var(--c-n-0);box-shadow:var(--sh-2)}
.btn--accent:hover{background:#6B5333;box-shadow:var(--sh-3)}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--c-n-300)}
.btn--secondary:hover{border-color:var(--text);background:var(--surface)}
.btn--ghost{background:transparent;color:var(--text-soft)}
.btn--ghost:hover{background:var(--c-n-200)}
.btn--danger{background:var(--c-error);color:var(--c-n-0);box-shadow:var(--sh-2)}
.btn--glass{
  color:var(--text);background:var(--glass-1-fill);
  -webkit-backdrop-filter:blur(var(--glass-1-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-1-blur)) saturate(160%);
  border-color:var(--glass-edge);border-top-color:var(--glass-edge-top);
  box-shadow:var(--sh-1),var(--glass-bevel-top),var(--glass-bevel-bot);
}
.btn--glass:hover{box-shadow:var(--sh-2),var(--glass-bevel-top),var(--glass-bevel-bot)}

/* sizes */
.btn--sm{padding:9px 18px;font-size:var(--t-xs)}
.btn--lg{padding:16px 32px;font-size:var(--t-base)}
.btn--block{display:flex;width:100%}

/* icon button */
.btn-icon{
  width:40px;height:40px;padding:0;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--text-soft);box-shadow:var(--sh-1);
  border:1px solid transparent;cursor:pointer;font-size:17px;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-icon:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-icon--dark{background:var(--c-n-900);color:var(--c-n-0)}
.btn-icon--sm{width:32px;height:32px;font-size:15px}

/* ===================== LINK ===================== */
.link{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-out);
}
.link:hover{border-color:currentColor}
.link--arrow{display:inline-flex;align-items:center;gap:6px;transition:gap var(--dur-fast) var(--ease-out)}
.link--arrow:hover{gap:11px;border-color:transparent}
.link--muted{color:var(--text-soft)}

/* ===================== BADGE ===================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-micro);font-weight:var(--fw-med);letter-spacing:.04em;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--c-n-200);color:var(--text-soft);
}
.badge--accent{background:var(--c-accent-soft);color:var(--c-accent-strong)}
.badge--success{background:var(--c-success-bg);color:var(--c-success)}
.badge--error{background:var(--c-error-bg);color:var(--c-error)}
.badge--warning{background:var(--c-warning-bg);color:var(--c-warning)}
.badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ===================== CHIP ===================== */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--t-xs);font-weight:var(--fw-med);color:var(--text);
  padding:9px 16px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--sh-1);border:1px solid transparent;
  cursor:pointer;user-select:none;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chip i{color:var(--accent)}
.chip:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip--active{background:var(--c-n-900);color:var(--c-n-0)}
.chip--active i{color:var(--c-n-0)}

/* ===================== DIVIDER ===================== */
.divider{height:1px;background:var(--line);border:0;width:100%}

/* ===================== SPINNER ===================== */
.spinner{
  width:18px;height:18px;border:2px solid var(--c-n-300);border-top-color:var(--accent);
  border-radius:50%;display:inline-block;animation:ds-spin .7s linear infinite;
}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ===================== INPUT / FIELD ===================== */
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:var(--t-xs);font-weight:var(--fw-med);color:var(--text-soft)}
.input,.textarea,.select{
  font-family:var(--font-body);font-size:var(--t-sm);color:var(--text);
  background:var(--surface);border:1px solid var(--c-n-300);border-radius:var(--r-md);
  padding:12px 16px;width:100%;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(154,123,79,.16);
}
.input:disabled,.textarea:disabled,.select:disabled{background:var(--c-n-100);opacity:.7;cursor:not-allowed}
.textarea{resize:vertical;min-height:96px;line-height:var(--lh-normal)}
.field--error .input,.field--error .textarea{border-color:var(--c-error)}
.field--error .input:focus{box-shadow:0 0 0 3px rgba(168,69,59,.16)}
.field__help{font-size:var(--t-2xs);color:var(--text-muted)}
.field__error{font-size:var(--t-2xs);color:var(--c-error);display:flex;align-items:center;gap:5px}

/* search pill (input dạng viên + nút) */
.search{
  display:flex;align-items:center;gap:var(--sp-2);
  background:var(--surface);border-radius:var(--r-pill);
  padding:6px 6px 6px 18px;box-shadow:var(--sh-1);
}
.search > i{color:var(--text-muted);font-size:18px;flex-shrink:0}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:var(--t-sm);color:var(--text)}
.search input::placeholder{color:var(--text-muted)}

/* ===================== SWITCH (toggle) ===================== */
.switch{position:relative;display:inline-flex;width:48px;height:28px;flex-shrink:0}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch__track{position:absolute;inset:0;background:var(--c-n-300);border-radius:var(--r-pill);transition:background var(--dur-fast) var(--ease-out)}
.switch__track::before{
  content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;
  background:var(--c-n-0);border-radius:50%;box-shadow:var(--sh-1);
  transition:transform var(--dur-base) var(--ease-spring);
}
.switch input:checked + .switch__track{background:var(--accent)}
.switch input:checked + .switch__track::before{transform:translateX(20px)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--accent);outline-offset:2px}

/* ===================== CHECKBOX / RADIO ===================== */
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--t-sm)}
.check input{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;flex-shrink:0;
  border:1px solid var(--c-n-400);background:var(--surface);
  border-radius:6px;display:grid;place-content:center;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check input[type="radio"]{border-radius:50%}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";width:10px;height:6px;border-left:2px solid var(--c-n-0);border-bottom:2px solid var(--c-n-0);transform:rotate(-45deg) translate(0,-1px)}
.check input[type="radio"]:checked::after{width:8px;height:8px;border:0;border-radius:50%;background:var(--c-n-0);transform:none}
.check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===================== CARD (sản phẩm) ===================== */
.card{
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  border:1px solid transparent;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.card__media{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,var(--c-n-50),var(--c-n-200));display:flex;align-items:center;justify-content:center;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:14px}
.card__media .badge{position:absolute;top:12px;left:12px}
.card__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:4px;flex:1}
.card__eyebrow{font-size:var(--t-micro);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--accent);font-weight:var(--fw-med)}
.card__title{font-size:var(--t-sm);font-weight:var(--fw-med);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.card__sku{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--text-muted)}
.card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:var(--sp-2)}
.card__price{font-size:var(--t-xs);font-weight:var(--fw-med)}
.card__go{font-size:var(--t-2xs);color:var(--text-soft);display:inline-flex;align-items:center;gap:6px;transition:gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
.card:hover .card__go{gap:11px;color:var(--accent)}
/* B · viền + nhấn giá */
.card--framed{box-shadow:none;border-color:var(--line)}
.card--framed:hover{box-shadow:var(--sh-2);border-color:transparent}
.card--framed .card__price{font-size:var(--t-base);font-weight:var(--fw-semi)}
/* C · ngang gọn */
.card--row{flex-direction:row;align-items:stretch}
.card--row .card__media{width:118px;flex-shrink:0;aspect-ratio:auto}
.card--row .card__title{min-height:0;-webkit-line-clamp:2}

/* ===================== TABS / SEGMENTED ===================== */
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.tabs__btn{padding:8px 18px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:var(--fw-med);color:var(--text-soft);border:0;background:transparent;cursor:pointer;transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
.tabs__btn--active{background:var(--c-n-900);color:var(--c-n-0)}
.tabs__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===================== BREADCRUMB ===================== */
.crumb{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--text-muted);font-weight:var(--fw-light);flex-wrap:wrap}
.crumb a{color:var(--text-muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb i{font-size:12px}

/* ===================== PAGINATION ===================== */
.pagination{display:flex;gap:6px;align-items:center}
.pagination a,.pagination span{min-width:38px;height:38px;padding:0 10px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-sm);color:var(--text-soft);background:var(--surface);box-shadow:var(--sh-1);text-decoration:none;transition:transform var(--dur-fast) var(--ease-out)}
.pagination a:hover{transform:translateY(-2px)}
.pagination .is-active{background:var(--c-n-900);color:var(--c-n-0)}
.pagination .is-disabled{opacity:.4;pointer-events:none}

/* ===================== TOAST ===================== */
.toast{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-3);font-size:var(--t-sm);color:var(--text)}
.toast > i{font-size:18px;color:var(--accent);flex-shrink:0}
.toast--success > i{color:var(--c-success)}
.toast--error > i{color:var(--c-error)}

/* ===================== ALERT / BANNER ===================== */
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-md);font-size:var(--t-sm);background:var(--c-accent-soft);color:var(--c-accent-strong)}
.alert > i{font-size:18px;flex-shrink:0;margin-top:1px}
.alert--success{background:var(--c-success-bg);color:var(--c-success)}
.alert--error{background:var(--c-error-bg);color:var(--c-error)}
.alert--warning{background:var(--c-warning-bg);color:var(--c-warning)}

/* ===================== ACCORDION (FAQ) — dùng <details>/<summary> ===================== */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;cursor:pointer;font-size:var(--t-base);font-weight:var(--fw-med);color:var(--text)}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{color:var(--accent);transition:transform var(--dur-fast) var(--ease-out)}
.acc details[open] summary i{transform:rotate(180deg)}
.acc__body{padding:0 0 18px;font-size:var(--t-sm);color:var(--text-soft);font-weight:var(--fw-light);max-width:60ch}

/* ===================== TABLE (thông số) ===================== */
.table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.table td,.table th{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{font-weight:var(--fw-med)}
.table td:first-child{color:var(--text-muted);font-weight:var(--fw-light);width:42%}

/* ===================== MODAL / DIALOG ===================== */
.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-4);max-width:440px;width:100%;padding:var(--sp-6)}
.modal__title{font-size:var(--t-h3);font-weight:var(--fw-med)}
.modal__body{font-size:var(--t-sm);color:var(--text-soft);font-weight:var(--fw-light);margin-top:8px;line-height:var(--lh-normal)}
.modal__foot{display:flex;justify-content:flex-end;gap:10px;margin-top:var(--sp-5);flex-wrap:wrap}
.scrim{background:rgba(34,32,28,.45);display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}

/* ===================== EMPTY STATE ===================== */
.empty{text-align:center;padding:var(--sp-8) 0;color:var(--text-muted);font-weight:var(--fw-light)}
.empty > i{font-size:42px;color:var(--c-n-300)}
.empty p{margin-top:10px}

/* ===================== CARD GRID (lưới responsive) ===================== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-4);
}
@media(max-width:1020px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:880px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.card-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}}

@media (prefers-reduced-motion: reduce){
  .btn,.btn-icon,.chip,.switch__track::before,.link--arrow,.card,.card__go,.pagination a{transition:none}
  .spinner{animation-duration:1.4s}
}