/* ============================================================================
   teoria-cores-contraste-acessibilidade/app.css
   Styles for the live WCAG contrast checker only. Scoped under .cc; inherits
   the "BPSO Lab 2026" tokens from blog.css. Loaded by the post page.
   Works in both dark (default) and [data-theme="light"].
   ========================================================================== */

.cc {
  --cc-pass: #22c55e;
  --cc-fail: #ef4444;
  --cc-pass-bg: color-mix(in srgb, #22c55e 14%, transparent);
  --cc-fail-bg: color-mix(in srgb, #ef4444 14%, transparent);

  display: grid;
  gap: 1.4rem;
}

/* --------------------------------------------------------------- Live preview */
.cc__preview {
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  padding: clamp(1.1rem, 4vw, 1.8rem) clamp(1rem, 4vw, 1.6rem);
  display: grid;
  gap: .85rem;
  /* colors are set inline by app.js (background + color) */
  transition: background .12s linear, color .12s linear;
}
.cc__preview-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: 0;
}
.cc__preview-row .cc__sz {
  opacity: .65;
  font-size: .72rem;
  font-family: var(--font-head, system-ui);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.cc__sample { margin: 0; line-height: 1.35; }
.cc__sample--lg { font-size: 1.65rem; font-weight: 700; }
.cc__sample--md { font-size: 1.18rem; font-weight: 600; }
.cc__sample--sm { font-size: .98rem; font-weight: 400; }
.cc__sample--xs { font-size: .82rem; font-weight: 400; }

/* --------------------------------------------------------------- Ratio panel */
.cc__verdict {
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-columns: auto 1fr;
}
.cc__ratio {
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: .9rem 1.2rem;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  min-width: 120px;
}
.cc__ratio-num {
  font-family: var(--font-head, system-ui);
  font-weight: 800;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.cc__ratio-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Badge grid: AA / AAA × normal / large. */
.cc__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.cc__badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .86rem;
  min-width: 0;
}
.cc__badge-ico {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: 0 0 auto;
  font-size: 1rem;
  color: #fff;
}
.cc__badge-text {
  display: grid;
  line-height: 1.2;
  min-width: 0;
}
.cc__badge-grade { font-family: var(--font-head, system-ui); font-weight: 700; }
.cc__badge-kind { font-size: .74rem; color: var(--text-muted); }

.cc__badge.is-pass {
  border-color: color-mix(in srgb, var(--cc-pass) 55%, var(--border));
  background: var(--cc-pass-bg);
}
.cc__badge.is-pass .cc__badge-ico { background: var(--cc-pass); }
.cc__badge.is-fail {
  border-color: color-mix(in srgb, var(--cc-fail) 45%, var(--border));
  background: var(--cc-fail-bg);
}
.cc__badge.is-fail .cc__badge-ico { background: var(--cc-fail); }

/* --------------------------------------------------------------- Color fields */
.cc__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.cc__field {
  display: grid;
  gap: .55rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  padding: .9rem;
  min-width: 0;
}
.cc__field-label {
  font-family: var(--font-head, system-ui);
  font-weight: 700;
  font-size: .82rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.cc__field-lum {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cc__pick-row { display: flex; align-items: center; gap: .6rem; min-width: 0; }

/* Native color input, restyled into a tidy swatch. */
.cc__swatch {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: none;
  cursor: pointer;
}
.cc__swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.cc__swatch::-webkit-color-swatch { border: none; border-radius: 7px; }
.cc__swatch::-moz-color-swatch { border: none; border-radius: 7px; }

.cc__hex {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-main);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .55rem .7rem;
}
.cc__hex:focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 1px;
}
.cc__hex[aria-invalid="true"] {
  border-color: var(--cc-fail);
}

/* HSL sliders inside each field. */
.cc__sliders { display: grid; gap: .5rem; }
.cc__slider {
  display: grid;
  grid-template-columns: 1.4rem 1fr 2.6rem;
  align-items: center;
  gap: .5rem;
  font-size: .76rem;
  color: var(--text-muted);
}
.cc__slider-key {
  font-family: var(--font-head, system-ui);
  font-weight: 700;
  color: var(--text-main);
}
.cc__slider-val { text-align: right; font-variant-numeric: tabular-nums; }
.cc__range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: var(--track, var(--surface));
  border: 1px solid var(--border);
  cursor: pointer;
  outline-offset: 4px;
}
.cc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand-blue);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.cc__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand-blue);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.cc__range::-moz-range-track { background: transparent; }

/* --------------------------------------------------------------- Action row */
.cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.cc__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  min-width: 0;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2);
  color: var(--text-main);
  font-family: var(--font-head, system-ui);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s, color .15s;
}
.cc__btn i { font-size: 1.1rem; line-height: 1; }
.cc__btn:hover {
  border-color: color-mix(in srgb, var(--brand-blue) 60%, var(--border));
  transform: translateY(-1px);
}
.cc__btn:active { transform: translateY(0); }
.cc__btn--primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  box-shadow: 0 8px 22px -10px var(--brand-glow);
}
.cc__btn--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.cc__btn--primary[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Live, polite status line for screen readers + copy feedback. */
.cc__status {
  font-size: .82rem;
  color: var(--text-muted);
  min-height: 1.1em;
  margin: 0;
}
.cc__status.is-ok { color: var(--cc-pass); font-weight: 600; }

/* --------------------------------------------------------------- Light theme */
/* The fields/badges already read tokens, but nudge a couple of accents so the
   pass/fail tints stay legible on the lighter surfaces. */
[data-theme="light"] .cc {
  --cc-pass-bg: color-mix(in srgb, #22c55e 16%, #fff);
  --cc-fail-bg: color-mix(in srgb, #ef4444 13%, #fff);
}
[data-theme="light"] .cc__badge-kind,
[data-theme="light"] .cc__field-lum,
[data-theme="light"] .cc__slider { color: var(--text-muted); }

/* --------------------------------------------------------------- Responsive */
@media (max-width: 600px) {
  .cc__verdict { grid-template-columns: 1fr; }
  .cc__ratio { min-width: 0; }
  .cc__fields { grid-template-columns: 1fr; }
  .cc__actions .cc__btn { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .cc__badges { grid-template-columns: 1fr; }
  .cc__sample--lg { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cc__btn, .cc__preview { transition: none; }
}