/*
 * md3-layer.css — Material Design 3 Accessibility & Token Layer
 * Neoronio / Neoronio · aplicado sobre o tema dark existente
 */

/* ── MD3 Shape Scale ──────────────────────────────────────────────────────── */
:root {
  --md-shape-xs:   4px;
  --md-shape-sm:   8px;
  --md-shape-md:   12px;
  --md-shape-lg:   16px;
  --md-shape-xl:   28px;
  --md-shape-full: 999px;

  /* MD3 State layers (dark theme) */
  --md-state-hover:   rgba(255,255,255,.08);
  --md-state-pressed: rgba(255,255,255,.12);
  --md-state-focus:   rgba(255,31,142,.14);

  /* MD3 Elevation — dark theme shadows */
  --md-elev-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px 1px rgba(0,0,0,.2);
  --md-elev-2: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px 2px rgba(0,0,0,.2);
  --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.4);

  /* Touch target mínimo MD3: 48dp */
  --md-touch-target: 48px;
}

/* ── MD3 Focus Visible ────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid #ff1f8e;
  outline-offset: 3px;
  border-radius: var(--md-shape-sm);
}
/* Remove outline padrão feio em favor do focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── MD3 Touch Targets ───────────────────────────────────────────────────── */
/* Aplica apenas em controles interativos fora do nav desktop */
.chip,
.rec-card,
.study-card,
.nav-link:not(.global-nav .nav-link) {
  min-height: var(--md-touch-target);
}
/* Nav burger e mobile-close precisam de 48px apenas em mobile */
@media (max-width: 768px) {
  .nav-burger,
  .nav-mobile-close,
  .nav-link { min-height: var(--md-touch-target); }
}

/* State layers removidos — os hovers já estão definidos em cada página */

/* ── MD3 Contraste melhorado ─────────────────────────────────────────────── */
/* Sobrescreve --muted em todos os contextos para ratio ≥ 4.5:1 */
:root {
  --muted: #9494b0;      /* era #6e6e8a — agora ~5.8:1 no fundo escuro */
  --border: rgba(255,255,255,.13); /* era .08 — bordas mais visíveis */
}

/* ── MD3 Typography improvements ─────────────────────────────────────────── */
/* MD3 aplica letter-spacing adequado para legibilidade */
h1, h2, h3 { letter-spacing: -0.02em; }
p, li, label { letter-spacing: 0.01em; }
small, .caption { letter-spacing: 0.03em; }

/* ── MD3 prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── MD3 Ripple host ─────────────────────────────────────────────────────── */
/* @material/web ripple requires position:relative + overflow:hidden
   NÃO aplicar em .nav-link desktop (quebra o flex do nav) */
.chip,
button.search-btn,
button.modal-back-btn,
.rec-card,
.card,
.study-card {
  position: relative;
  overflow: hidden;
}

/* ── MD3 Scrollbar (dark theme) ──────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,31,142,.3) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,31,142,.3);
  border-radius: var(--md-shape-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,31,142,.55); }