/* ==========================================================================
   CLOZSY - GLOBAL COMPONENT SYSTEM
   Every value here references a token from variables.css. No literal colours,
   font sizes, radii or spacing values below this line.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--clz-bg);
  color: var(--clz-text);
  font-family: var(--clz-font-body);
  font-size: var(--clz-text-base);
  font-weight: var(--clz-fw-regular);
  line-height: var(--clz-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--clz-accent);
  color: var(--clz-on-accent);
}

/* Single global focus treatment. Keyboard only, never on mouse click. */
:focus-visible {
  outline: 2px solid var(--clz-accent);
  outline-offset: 2px;
  border-radius: var(--clz-radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--clz-border);
  margin: var(--clz-space-6) 0;
}

img, svg, video { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5,
.clz-h1, .clz-h2, .clz-h3, .clz-h4, .clz-h5 {
  font-family: var(--clz-font-heading);
  color: var(--clz-text);
  letter-spacing: var(--clz-ls-tight);
  margin: 0 0 var(--clz-space-4);
  text-wrap: balance;
}

h1, .clz-h1 { font-size: var(--clz-text-h1); font-weight: var(--clz-fw-bold); line-height: var(--clz-lh-tight); }
h2, .clz-h2 { font-size: var(--clz-text-h2); font-weight: var(--clz-fw-semibold); line-height: var(--clz-lh-tight); }
h3, .clz-h3 { font-size: var(--clz-text-h3); font-weight: var(--clz-fw-semibold); line-height: var(--clz-lh-snug); }
h4, .clz-h4 { font-size: var(--clz-text-h4); font-weight: var(--clz-fw-semibold); line-height: var(--clz-lh-snug); }
h5, .clz-h5 { font-size: var(--clz-text-h5); font-weight: var(--clz-fw-semibold); line-height: var(--clz-lh-snug); letter-spacing: var(--clz-ls-normal); }

/* H6 is the eyebrow / overline in this system, not a small heading. */
h6, .clz-eyebrow {
  font-family: var(--clz-font-body);
  font-size: var(--clz-text-h6);
  font-weight: var(--clz-fw-semibold);
  line-height: var(--clz-lh-snug);
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
  color: var(--clz-text-secondary);
  margin: 0 0 var(--clz-space-3);
}

p { margin: 0 0 var(--clz-space-4); }
p:last-child { margin-bottom: 0; }

.clz-lead      { font-size: var(--clz-text-lg); color: var(--clz-text-secondary); }
.clz-small,
small          { font-size: var(--clz-text-sm); }
.clz-muted     { color: var(--clz-text-muted); }
.clz-secondary { color: var(--clz-text-secondary); }

.clz-label {
  display: inline-block;
  font-size: var(--clz-text-sm);
  font-weight: var(--clz-fw-medium);
  color: var(--clz-text-secondary);
  margin-bottom: var(--clz-space-2);
}

.clz-price {
  font-family: var(--clz-font-heading);
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-tight);
  color: var(--clz-text);
}

blockquote {
  margin: var(--clz-space-6) 0;
  padding-left: var(--clz-space-5);
  border-left: 2px solid var(--clz-accent);
  color: var(--clz-text-secondary);
  font-size: var(--clz-text-lg);
}

code, kbd, pre {
  background: var(--clz-surface);
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-sm);
  color: var(--clz-text-secondary);
}
code, kbd { padding: 0.1em 0.4em; font-size: var(--clz-text-sm); }
pre { padding: var(--clz-space-4); overflow-x: auto; }

/* --------------------------------------------------------------------------
   3. LINKS
   -------------------------------------------------------------------------- */
a {
  color: var(--clz-accent);
  text-decoration: none;
  transition: color var(--clz-transition);
}
a:hover { color: var(--clz-accent-hover); }

/* Inline prose links get an underline that grows on hover. */
.clz-link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--clz-transition);
}
.clz-link-underline:hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.clz-container {
  width: 100%;
  max-width: var(--clz-width-content);
  margin-inline: auto;
  padding-inline: var(--clz-container-x);
}
.clz-container--narrow { max-width: var(--clz-width-narrow); }
.clz-container--wide   { max-width: var(--clz-width-wide); }

.clz-section { padding-block: var(--clz-section-y); }

.clz-grid { display: grid; gap: var(--clz-grid-gap); }
.clz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .clz-grid--3, .clz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .clz-grid--2, .clz-grid--3 { grid-template-columns: minmax(0, 1fr); }
  /* Product grids stay two-up on mobile: one-up wastes the viewport. */
  .clz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.clz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--clz-space-2);
  font-family: var(--clz-font-body);
  font-size: var(--clz-text-sm);
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-wide);
  line-height: 1;
  padding: var(--clz-space-4) var(--clz-space-6);
  border: 1px solid transparent;
  border-radius: var(--clz-radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--clz-transition),
              border-color var(--clz-transition),
              color var(--clz-transition),
              transform var(--clz-duration-fast) var(--clz-ease);
}
.clz-btn:active { transform: translateY(1px); }
.clz-btn[disabled], .clz-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.clz-btn--primary {
  background: var(--clz-accent);
  border-color: var(--clz-accent);
  color: var(--clz-on-accent);
}
.clz-btn--primary:hover {
  background: var(--clz-accent-hover);
  border-color: var(--clz-accent-hover);
  color: var(--clz-on-accent);
}

.clz-btn--secondary {
  background: transparent;
  border-color: var(--clz-border-strong);
  color: var(--clz-text);
}
.clz-btn--secondary:hover {
  background: var(--clz-surface-hover);
  border-color: var(--clz-accent);
  color: var(--clz-text);
}

.clz-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--clz-text-secondary);
  padding-inline: var(--clz-space-3);
}
.clz-btn--ghost:hover { color: var(--clz-text); background: var(--clz-surface-hover); }

.clz-btn--sm    { padding: var(--clz-space-3) var(--clz-space-4); font-size: var(--clz-text-xs); }
.clz-btn--lg    { padding: var(--clz-space-5) var(--clz-space-7); font-size: var(--clz-text-base); }
.clz-btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   6. SURFACES / CARDS
   -------------------------------------------------------------------------- */
.clz-card {
  background: var(--clz-surface);
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-md);
  padding: var(--clz-space-5);
  transition: border-color var(--clz-transition), background-color var(--clz-transition);
}
.clz-card--elevated { background: var(--clz-elevated); box-shadow: var(--clz-shadow-md); }
.clz-card--interactive { cursor: pointer; }
.clz-card--interactive:hover {
  border-color: var(--clz-border-strong);
  background: var(--clz-elevated);
}

/* --------------------------------------------------------------------------
   7. FORMS
   -------------------------------------------------------------------------- */
.clz-field { margin-bottom: var(--clz-space-5); }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea, .clz-input {
  width: 100%;
  background: var(--clz-surface);
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-sm);
  color: var(--clz-text);
  font-family: var(--clz-font-body);
  font-size: var(--clz-text-base);
  line-height: var(--clz-lh-snug);
  padding: var(--clz-space-3) var(--clz-space-4);
  transition: border-color var(--clz-transition),
              background-color var(--clz-transition),
              box-shadow var(--clz-transition);
}

input::placeholder, textarea::placeholder { color: var(--clz-text-muted); }

input:focus, select:focus, textarea:focus, .clz-input:focus {
  background: var(--clz-elevated);
  border-color: var(--clz-accent);
  box-shadow: var(--clz-ring);
  outline: none;
}

textarea { min-height: 8rem; resize: vertical; }

/* Native select arrow replaced with an inline SVG chevron: no icon library,
   no JavaScript, and it inherits the text colour token. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--clz-space-8);
  background-image: var(--clz-icon-chevron);
  background-repeat: no-repeat;
  background-position: right var(--clz-space-4) center;
  background-size: 12px 8px;
}

input[type="checkbox"], input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--clz-accent);
  vertical-align: middle;
}

.clz-field__error { color: var(--clz-error); font-size: var(--clz-text-sm); margin-top: var(--clz-space-2); }
.clz-field__hint  { color: var(--clz-text-muted); font-size: var(--clz-text-sm); margin-top: var(--clz-space-2); }

/* --------------------------------------------------------------------------
   8. BADGES
   -------------------------------------------------------------------------- */
.clz-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--clz-space-1);
  font-size: var(--clz-text-xs);
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
  padding: var(--clz-space-1) var(--clz-space-3);
  border: 1px solid var(--clz-border-strong);
  border-radius: var(--clz-radius-full);
  color: var(--clz-text-secondary);
  background: var(--clz-surface);
}
.clz-badge--accent  { color: var(--clz-accent);  border-color: var(--clz-accent);  background: var(--clz-accent-soft); }
.clz-badge--success { color: var(--clz-success); border-color: var(--clz-success); background: transparent; }
.clz-badge--warning { color: var(--clz-warning); border-color: var(--clz-warning); background: transparent; }
.clz-badge--error   { color: var(--clz-error);   border-color: var(--clz-error);   background: transparent; }

/* --------------------------------------------------------------------------
   9. BREADCRUMBS
   -------------------------------------------------------------------------- */
.clz-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clz-space-2);
  font-size: var(--clz-text-sm);
  color: var(--clz-text-muted);
}
.clz-breadcrumb a { color: var(--clz-text-secondary); }
.clz-breadcrumb a:hover { color: var(--clz-accent); }
.clz-breadcrumb__sep { color: var(--clz-text-muted); }

/* --------------------------------------------------------------------------
   10. ACCORDION - native <details>, zero JavaScript
   -------------------------------------------------------------------------- */
.clz-accordion { border-top: 1px solid var(--clz-border); }
.clz-accordion__item { border-bottom: 1px solid var(--clz-border); }

.clz-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clz-space-4);
  padding: var(--clz-space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--clz-font-heading);
  font-size: var(--clz-text-h5);
  font-weight: var(--clz-fw-semibold);
  color: var(--clz-text);
  transition: color var(--clz-transition);
}
.clz-accordion__summary::-webkit-details-marker { display: none; }
.clz-accordion__summary:hover { color: var(--clz-accent); }

.clz-accordion__summary::after {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--clz-transition);
}
.clz-accordion__item[open] > .clz-accordion__summary::after { transform: rotate(-135deg); }

.clz-accordion__panel {
  padding-bottom: var(--clz-space-5);
  color: var(--clz-text-secondary);
}

/* --------------------------------------------------------------------------
   11. MODAL - CSS-driven via [hidden]; JS only toggles the attribute
   -------------------------------------------------------------------------- */
.clz-modal {
  position: fixed;
  inset: 0;
  z-index: var(--clz-z-modal);
  display: grid;
  place-items: center;
  padding: var(--clz-space-4);
  background: var(--clz-overlay);
}
.clz-modal[hidden] { display: none; }

.clz-modal__dialog {
  width: 100%;
  max-width: 32rem;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--clz-elevated);
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-lg);
  box-shadow: var(--clz-shadow-lg);
  padding: var(--clz-space-6);
}

/* --------------------------------------------------------------------------
   12. TOASTS
   -------------------------------------------------------------------------- */
.clz-toasts {
  position: fixed;
  right: var(--clz-space-5);
  bottom: var(--clz-space-5);
  z-index: var(--clz-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--clz-space-3);
  max-width: min(24rem, calc(100vw - var(--clz-space-8)));
}
.clz-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--clz-space-3);
  background: var(--clz-elevated);
  border: 1px solid var(--clz-border);
  border-left: 3px solid var(--clz-accent);
  border-radius: var(--clz-radius-md);
  box-shadow: var(--clz-shadow-lg);
  padding: var(--clz-space-4);
  font-size: var(--clz-text-sm);
  color: var(--clz-text);
}
.clz-toast--success { border-left-color: var(--clz-success); }
.clz-toast--warning { border-left-color: var(--clz-warning); }
.clz-toast--error   { border-left-color: var(--clz-error); }

/* --------------------------------------------------------------------------
   13. TABLES
   -------------------------------------------------------------------------- */
table, .clz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--clz-text-sm);
}
th, td {
  text-align: left;
  padding: var(--clz-space-4);
  border-bottom: 1px solid var(--clz-border);
}
th {
  font-family: var(--clz-font-body);
  font-size: var(--clz-text-xs);
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
  color: var(--clz-text-muted);
}
td { color: var(--clz-text-secondary); }
tbody tr { transition: background-color var(--clz-transition); }
tbody tr:hover { background: var(--clz-surface); }

/* --------------------------------------------------------------------------
   14. PAGINATION
   -------------------------------------------------------------------------- */
.clz-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--clz-space-2);
  margin-top: var(--clz-space-7);
}
.clz-pagination a,
.clz-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--clz-space-2);
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-sm);
  font-size: var(--clz-text-sm);
  font-weight: var(--clz-fw-medium);
  color: var(--clz-text-secondary);
  transition: border-color var(--clz-transition), color var(--clz-transition), background-color var(--clz-transition);
}
.clz-pagination a:hover {
  border-color: var(--clz-border-strong);
  background: var(--clz-surface-hover);
  color: var(--clz-text);
}
.clz-pagination .current {
  background: var(--clz-accent);
  border-color: var(--clz-accent);
  color: var(--clz-on-accent);
}

/* --------------------------------------------------------------------------
   15. UTILITIES - deliberately minimal
   -------------------------------------------------------------------------- */
.clz-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.clz-stack > * + * { margin-top: var(--clz-space-4); }
.clz-divider { height: 1px; background: var(--clz-border); border: 0; }