/* ============================================================
   opedro. — Design System v1 · components.css
   Componentes do DS usados no portfolio. Regras que valem sempre:
   1. Azul é clicável.  2. O símbolo é a exceção.  3. Uma ação primária por tela.
   Foco único: 2px --primary com 2px de deslocamento.
   ============================================================ */

/* ---------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--on-surface);
  font: 400 var(--type-body)/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--primary-text); text-decoration: none; }
::selection { background: var(--primary-container); color: var(--on-primary-container); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Skip link */
.skip { position: absolute; left: -9999px; top: 16px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--radius-full);
  background: var(--secondary); color: var(--on-secondary); font: 600 14px/1 var(--font-sans); }
.skip:focus { left: 16px; }

/* ---------- Ícone — Material Symbols Rounded, peso 400, contorno por padrão */
.icon {
  font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; flex: none;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.icon--18 { font-size: 18px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; }
.icon--20 { font-size: 20px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; }
.icon--active { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ---------- Button — filled · tonal · outlined · text · elevated */
.btn {
  height: 40px; padding: 0 24px; border-radius: var(--radius-full); border: 0;
  font: 600 var(--type-label)/1 var(--font-sans); letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; white-space: nowrap; position: relative;
  transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.btn .icon { font-size: 18px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; }
.btn--sm { height: 32px; padding: 0 16px; font-size: 13px; }
.btn--lg { height: 48px; padding: 0 28px; font-size: 15px; }

.btn--filled { background: var(--primary); color: var(--on-primary); }
.btn--filled:hover { background: var(--primary-hover); }
.btn--filled:active { background: var(--primary-press); }

.btn--tonal { background: var(--primary-container); color: var(--on-primary-container); }
.btn--tonal:hover { box-shadow: inset 0 0 0 100px var(--hover); }
.btn--tonal:active { box-shadow: inset 0 0 0 100px var(--press); }

.btn--outlined { background: transparent; color: var(--primary-text); border: 1px solid var(--outline); }
.btn--outlined:hover { background: var(--hover); }
.btn--outlined:active { background: var(--press); }

.btn--text { background: transparent; color: var(--primary-text); padding: 0 12px; }
.btn--text:hover { background: var(--hover); }
.btn--text:active { background: var(--press); }

.btn--elevated { background: var(--surface-low); color: var(--primary-text); box-shadow: var(--e1); }
.btn--elevated:hover { box-shadow: var(--e2); }

/* alvo de toque 48px sem aumentar a caixa visual */
.btn--sm::before, .btn:not(.btn--lg)::before { content: ""; position: absolute; inset: -4px 0; }
.btn--sm::before { inset: -8px 0; }

/* ---------- Icon button */
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-full); border: 0; padding: 0;
  background: transparent; color: var(--on-surface-var);
  display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.icon-btn::before { content: ""; position: absolute; inset: -4px; }
.icon-btn:hover { background: var(--hover); }
.icon-btn:active { background: var(--press); }
.icon-btn--tonal { background: var(--primary-container); color: var(--on-primary-container); }
.icon-btn--tonal:hover { box-shadow: inset 0 0 0 100px var(--hover); background: var(--primary-container); }
.icon-btn--outlined { border: 1px solid var(--outline); }
.icon-btn--inverse { background: var(--secondary); color: var(--on-secondary); }
.icon-btn--inverse:hover { background: var(--secondary-hover); }

/* ---------- Tag — status estático, sem hover nem foco */
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 6px; border: 1px solid transparent; white-space: nowrap;
  font: 600 12px/1 var(--font-sans);
}
.tag .icon { font-size: 14px; }
.tag--success { background: var(--success-container); color: var(--on-success-container); border-color: var(--success-bd); }
.tag--warning { background: var(--warning-container); color: var(--on-warning-container); border-color: var(--warning-bd); }
.tag--error   { background: var(--error-container);   color: var(--on-error-container);   border-color: var(--error-bd); }
.tag--new     { background: var(--primary-container); color: var(--on-primary-container); }
.tag--draft   { background: var(--surface-mid); color: var(--on-surface-var); border-color: var(--outline-faint); }
.tag--ghost   { background: transparent; color: var(--on-surface-var); border-color: var(--outline-var); }

/* ---------- Card — outlined (padrão), elevated, filled */
.card {
  border: 1px solid var(--outline-faint); border-radius: var(--radius-card);
  background: var(--surface); padding: 20px;
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.card--lg { padding: 24px; }
.card--elevated { border-color: transparent; box-shadow: var(--e1); }
.card--filled { border-color: transparent; background: var(--surface-mid); }
.card h3 { margin: 0; font: 600 var(--type-title)/1.35 var(--font-sans); letter-spacing: -0.005em; }
.card p { margin: 0; font-size: var(--type-body-s); line-height: 1.6; color: var(--on-surface-var); }

/* card inteiro clicável: o <a> fica no título e estende a área */
.card--link { transition: box-shadow var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard); }
.card--link h3 a { color: inherit; text-decoration: none; }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.card--link h3 a:focus-visible { outline: none; }
.card--link:has(a:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.card--link.card--elevated:hover { box-shadow: var(--e2); }

/* ---------- Overline (rótulo em caixa alta) */
.overline {
  margin: 0; font: 600 var(--type-overline)/1.3 var(--font-sans);
  letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--on-surface-dim);
}

/* ---------- Dialog (usado no lightbox) */
.dialog {
  border: 0; padding: 0; background: transparent; color: var(--on-surface);
  max-width: min(1400px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
}
.dialog::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}