/* =====================================================================
 * polish.css · ILUMINA 2.0 / Atlas LightGov
 * Camada de refinamento por cima do tokens.css.
 * Cobre: focus-visible WCAG AAA, reduced-motion, scrollbar, selection,
 * tap highlight, microinterações, skip-link, smooth scroll.
 * ===================================================================== */

/* ============ FOCUS RINGS — WCAG 2.2 AAA ============ */
:root{
  --polish-ring: 3px;
  --polish-ring-offset: 2px;
  --polish-ring-color: #015386;          /* CEB blue */
  --polish-ring-color-on-dark: #38bdf8;
}
[data-theme="dark"]{
  --polish-ring-color: #38bdf8;
  --polish-ring-color-on-dark: #015386;
}

*:focus{ outline: none; }
*:focus-visible{
  outline: var(--polish-ring) solid var(--polish-ring-color) !important;
  outline-offset: var(--polish-ring-offset) !important;
  border-radius: 4px;
  transition: outline-offset .12s ease;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  z-index: 2;
  position: relative;
}

/* Skip link — invisível até receber foco. Combina translate + opacity + clip. */
.skip-link{
  position: fixed !important;
  top: 8px; left: 8px;
  background: var(--polish-ring-color);
  color: #fff !important;
  padding: .9em 1.4em;
  z-index: 9999;
  font: 600 14px/1.2 'IBM Plex Sans', system-ui, sans-serif;
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(-200%);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* ============ REDUCED-MOTION (WCAG 2.3.3) ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ SCROLLBAR ============ */
*{ scrollbar-width: thin; scrollbar-color: rgba(127,127,127,.35) transparent; }
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: rgba(127,127,127,.30);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(127,127,127,.55); background-clip: padding-box; }

/* ============ SELECTION ============ */
::selection{
  background: rgba(1,83,134,.25);
  color: inherit;
  text-shadow: none;
}
[data-theme="dark"] ::selection{ background: rgba(56,189,248,.28); }

/* ============ TAP HIGHLIGHT (mobile) ============ */
html{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
button, a, [role="button"]{
  -webkit-tap-highlight-color: rgba(232,123,20,.18); /* CEB orange */
}

/* ============ MICROINTERAÇÕES PADRÃO ============ */
button:not(:disabled), a, [role="button"]{
  transition:
    transform .14s cubic-bezier(.34,1.56,.64,1),
    box-shadow .18s ease,
    background-color .14s ease,
    color .14s ease,
    border-color .14s ease,
    opacity .14s ease;
}
button:not(:disabled):active, a:active, [role="button"]:active{
  transform: scale(.97);
}

/* Lift suave em cards interativos (.card, [data-card], button.card) */
.card, [data-interactive-card]{
  transition:
    transform .22s cubic-bezier(.4,0,.2,1),
    box-shadow .22s cubic-bezier(.4,0,.2,1);
}
.card:hover, [data-interactive-card]:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.18);
}

/* ============ IMG / SVG DEFAULTS ============ */
img, svg{ display: block; max-width: 100%; }
img{ height: auto; }

/* ============ SMOOTH SCROLL ============ */
html{ scroll-behavior: smooth; scroll-padding-top: 64px; }

/* ============ ANIMATED UNDERLINE pra links inline ============ */
.u-link, .underline-link{
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .22s cubic-bezier(.4,0,.2,1);
}
.u-link:hover, .underline-link:hover{ background-size: 100% 1px; }

/* ============ TOUCH TARGETS — 44x44 mínimo (Apple HIG / WCAG 2.5.5) ============ */
@media (pointer: coarse){
  button, a, [role="button"], input[type="checkbox"], input[type="radio"]{
    min-height: 44px;
    min-width: 44px;
  }
  button.compact, a.compact{ min-height: 32px; min-width: 32px; }
}

/* ============ EMPTY STATES (utility) ============ */
.empty-state{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 1.5rem; text-align: center; gap: .75rem;
  color: var(--text-2, #525252);
}
.empty-state svg{ width: 56px; height: 56px; opacity: .42; }
.empty-state h3{ margin: 0; font: 600 1.05rem 'IBM Plex Sans', system-ui, sans-serif; color: var(--text-1, #161616); }
.empty-state p{ margin: 0; font-size: .9rem; max-width: 28em; line-height: 1.5; }

/* ============ LOADING SKELETON ============ */
.skeleton{
  background:
    linear-gradient(90deg, transparent 0, rgba(127,127,127,.18) 50%, transparent 100%),
    rgba(127,127,127,.08);
  background-size: 200% 100%, 100% 100%;
  animation: skel-shimmer 1.4s linear infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@keyframes skel-shimmer{
  0%{ background-position: -200% 0, 0 0; }
  100%{ background-position: 200% 0, 0 0; }
}

/* ============ FORM CONTROLS (a11y) ============ */
input:invalid:not(:focus):not(:placeholder-shown){
  border-color: #da1e28;
  box-shadow: 0 0 0 1px #da1e28 inset;
}
input:valid:not(:placeholder-shown):not(:focus){
  /* sem ruído visual — só estado limpo */
}
[disabled], [aria-disabled="true"]{ cursor: not-allowed; opacity: .55; }

/* ============ SMOOTH THEME TRANSITION ============ */
/* Animação suave nas mudanças de cor quando user troca tema */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after{
  transition: background-color .35s cubic-bezier(.4,0,.2,1),
              color .35s cubic-bezier(.4,0,.2,1),
              border-color .35s cubic-bezier(.4,0,.2,1),
              box-shadow .35s cubic-bezier(.4,0,.2,1) !important;
}

/* ============ TABLE ROW HOVER (universal) ============ */
table tbody tr{
  transition: background-color .15s ease;
}
table tbody tr:hover:not(.selected){
  background: var(--surface-2, rgba(15,98,254,.04));
  cursor: pointer;
}
/* sticky header pattern */
table thead th{ position: sticky; top: 0; z-index: 2; background: var(--surface, #fff); }
[data-theme="dark"] table thead th{ background: var(--surface, #161618); }

/* ============ MAP LOADING SKELETON ============ */
.map-loading{
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(15,98,254,.04) 0%,
      rgba(15,98,254,.08) 50%,
      rgba(15,98,254,.04) 100%);
  background-size: 400% 400%;
  animation: map-shimmer 3s ease-in-out infinite;
}
[data-theme="dark"] .map-loading{
  background:
    linear-gradient(135deg,
      rgba(69,137,255,.04) 0%,
      rgba(69,137,255,.10) 50%,
      rgba(69,137,255,.04) 100%);
  background-size: 400% 400%;
}
@keyframes map-shimmer{
  0%{ background-position: 0 0; }
  50%{ background-position: 100% 100%; }
  100%{ background-position: 0 0; }
}

/* ============ HEADLINE REFINEMENT ============ */
h1, h2, h3, .h1, .h2, .h3{
  letter-spacing: -0.018em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, .h1{ letter-spacing: -0.025em; }

/* ============ INPUT FOCUS — premium feedback ============ */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible{
  box-shadow: 0 0 0 4px rgba(1,83,134,.15);
}

/* ============ PRIMARY BUTTON GLOW (taste-skill MOTION 6) ============ */
.btn.primary, button.primary,
[class*="btn"]:where([class*="primary"]){
  position: relative;
}
.btn.primary::after, button.primary::after{
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 currentColor;
  opacity: 0;
  transition: opacity .25s ease, box-shadow .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.btn.primary:hover::after, button.primary:hover::after{
  box-shadow: 0 0 24px 4px currentColor;
  opacity: .25;
}

/* ============ CARD GLOW BORDER (left accent on hover) ============ */
[data-card], .card, .proto-card{
  position: relative;
}

/* ============ TEXT BALANCE for headings (Chrome 114+) ============ */
h1, h2, h3, .h1, .h2, .h3, .balance{ text-wrap: balance; }
p, .lead, blockquote{ text-wrap: pretty; }

/* ============ SAFE AREA (iOS notch) ============ */
@supports (padding: max(0px)){
  body{
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ============ PRINT ============ */
@media print{
  *{ background: transparent !important; color: #000 !important; box-shadow: none !important; }
  a::after{ content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  nav, .no-print, [data-no-print]{ display: none !important; }
}