/* =============================================================================
   UNIVERSO ANIMES — Design System · ua-tokens.css  (Fase 0)
   Camada de tokens + base de elementos, carregada DEPOIS do core do dooplay
   (front.style / colors.dark / front.mobile) para que os overrides de base
   vençam por ordem de cascata, sem !important.
   Regra de ouro do lime: #c2f730 é SEMPRE superfície/CTA com texto preto.
   Nunca texto fino, nunca cor de foco. Ver UA-DESIGN-SYSTEM.md.
   ============================================================================= */

:root{
  /* ---- Superfícies (dark ladder OLED-premium; substitui #000 chapado) ---- */
  --ua-bg-0:#07080A;        /* fundo de página */
  --ua-bg-1:#0C0E12;        /* base de seções */
  --ua-surface-1:#13161C;   /* cards */
  --ua-surface-2:#1A1E26;   /* card hover / inputs / linhas de lista */
  --ua-surface-3:#232936;   /* dropdowns, chips, elevados */
  --ua-glass:rgba(20,23,29,.55);
  --ua-glass-2:rgba(34,38,46,.60);
  --ua-border:rgba(255,255,255,.08);
  --ua-border-hi:rgba(255,255,255,.16);
  --ua-border-accent:rgba(194,247,48,.45);

  /* ---- Texto (todos ≥4.5:1 sobre bg-0) ---- */
  --ua-text:#F4F6F8;        /* primário ~17:1 (AAA) */
  --ua-text-2:#B6BDC7;      /* secundário ~9:1 (substitui branco@60% que reprovava) */
  --ua-text-3:#7E8693;      /* meta/terciário ~4.6:1 — só ≥14px ou bold */

  /* ---- Acento de marca: lime ---- */
  --ua-accent:#C2F730;
  --ua-accent-hover:#D4FF5A;
  --ua-accent-press:#A8DB1F;
  --ua-accent-soft:rgba(194,247,48,.14);
  --ua-accent-ink:#0A0B0E;        /* TEXTO sobre lime (preto) */
  --ua-accent-text:#D9FF6B;       /* única variante p/ texto-acento ≥14px bold sobre dark */

  /* ---- Estados semânticos (substituem o azul legado #408bea) ---- */
  --ua-ok:#4ADE80;    --ua-ok-soft:rgba(74,222,128,.14);
  --ua-warn:#FBBF24;  --ua-warn-soft:rgba(251,191,36,.14);
  --ua-danger:#F87171;--ua-danger-soft:rgba(248,113,113,.14);
  --ua-info:#5B8DEF;  --ua-info-soft:rgba(91,141,239,.14);

  /* ---- Foco: azul claro (visível inclusive sobre lime) ---- */
  --ua-focus-ring:#6CB6FF;

  /* ---- Gradientes premium-dark a partir do backdrop do título ---- */
  --ua-scrim-hero:linear-gradient(180deg,
    rgba(7,8,10,.15) 0%, rgba(7,8,10,0) 28%,
    rgba(7,8,10,.55) 62%, rgba(7,8,10,.96) 100%);
  --ua-scrim-hero-side:linear-gradient(90deg,
    rgba(7,8,10,.92) 0%, rgba(7,8,10,.55) 40%, rgba(7,8,10,0) 75%);
  --ua-scrim-card:linear-gradient(180deg,
    rgba(7,8,10,0) 38%, rgba(7,8,10,.88) 100%);
  --ua-scrim-radial:radial-gradient(135% 110% at 50% 22%,
    rgba(7,8,10,0) 0%, rgba(7,8,10,.55) 70%, rgba(7,8,10,.9) 100%);
  --ua-tint-accent:linear-gradient(180deg,rgba(194,247,48,.10) 0%,rgba(194,247,48,0) 30%);
  --ua-backdrop-blur:18px;
  --ua-backdrop-saturate:1.05;

  /* ---- Tipografia (Sora display + Inter texto) ---- */
  --ua-font-display:"Sora","Satoshi","General Sans",system-ui,sans-serif;
  --ua-font-text:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ua-fs-display:clamp(2rem,1.4rem + 3vw,3.25rem);  /* hero H1: 32→52px */
  --ua-fs-h1:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);   /* single H1: 26→36px */
  --ua-fs-h2:1.5rem;
  --ua-fs-h3:1.25rem;
  --ua-fs-lg:1.125rem;
  --ua-fs-base:1rem;
  --ua-fs-sm:.875rem;
  --ua-fs-xs:.75rem;
  --ua-fw-regular:400;--ua-fw-medium:500;--ua-fw-semibold:600;--ua-fw-bold:700;
  --ua-lh-tight:1.15;--ua-lh-snug:1.3;--ua-lh-normal:1.55;
  --ua-tracking-tight:-.02em;
  --ua-tracking-caps:.06em;

  /* ---- Spacing (escala 4px) ---- */
  --ua-sp-1:4px;--ua-sp-2:8px;--ua-sp-3:12px;--ua-sp-4:16px;
  --ua-sp-5:24px;--ua-sp-6:32px;--ua-sp-7:48px;--ua-sp-8:64px;
  --ua-container:1240px;
  --ua-header-h:70px;        /* altura travada do header → blinda CLS no scroll-aware */

  /* ---- Radius ---- */
  --ua-r-xs:6px;--ua-r-sm:10px;--ua-r-md:14px;--ua-r-lg:18px;--ua-r-xl:24px;--ua-r-pill:999px;

  /* ---- Elevation ---- */
  --ua-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --ua-shadow-2:0 4px 14px rgba(0,0,0,.45);
  --ua-shadow-3:0 12px 32px rgba(0,0,0,.55);
  --ua-shadow-accent:0 6px 24px rgba(194,247,48,.22);

  /* ---- Blur (glass) ---- */
  --ua-blur-sm:8px;--ua-blur-md:14px;--ua-blur-lg:22px;

  /* ---- Motion ---- */
  --ua-ease:cubic-bezier(.22,.61,.36,1);
  --ua-ease-out:cubic-bezier(.22,1,.36,1);
  --ua-dur-fast:.16s;--ua-dur:.24s;--ua-dur-slow:.42s;

  /* ---- Alvo de toque mínimo ---- */
  --ua-tap-min:44px;
}

/* =============================================================================
   BASE DE ELEMENTOS  (vence o core por ordem de carga)
   ============================================================================= */

/* `html body` (0,0,2) vence o <style> inline do customizer dooplay
   (`body{font-family:Montserrat;background:#000}`, 0,0,1) sem !important */
html body{
  font-family:var(--ua-font-text);
  font-size:15px;                 /* sobe de 14; passo medido (meta a11y: 16) */
  line-height:var(--ua-lh-normal);
  color:var(--ua-text-2);
  background:var(--ua-bg-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body #dt_contenedor{background-color:var(--ua-bg-0);}  /* (0,1,1) vence o inline #dt_contenedor (0,1,0) */

h1,h2,h3,h4,h5,h6,
.module .content header h1,
.module .content header h2,
.anime-title,
.data h1,.data h2,
.sheader h1,
.epih1{
  font-family:var(--ua-font-display);
  color:var(--ua-text);
  font-weight:var(--ua-fw-bold);
  letter-spacing:var(--ua-tracking-tight);
  line-height:var(--ua-lh-tight);
}

/* Links "nus" (prosa/conteúdo) — variante clara, nunca lime puro fino */
a{color:var(--ua-accent-text);}
a:hover{color:var(--ua-accent);}

/* Foco visível global (substitui qualquer outline:none herdado do dooplay) */
*:focus-visible{
  outline:3px solid var(--ua-focus-ring);
  outline-offset:2px;
  border-radius:var(--ua-r-xs);
}

::selection{background:var(--ua-accent);color:var(--ua-accent-ink);}

/* Skip-link acessível */
.ua-skip{
  position:fixed;top:8px;left:8px;z-index:10000;
  background:var(--ua-accent);color:var(--ua-accent-ink);
  padding:10px 16px;border-radius:var(--ua-r-pill);
  font:var(--ua-fw-semibold) var(--ua-fs-sm)/1 var(--ua-font-text);
  transform:translateY(-150%);transition:transform var(--ua-dur) var(--ua-ease);
}
.ua-skip:focus{transform:translateY(0);color:var(--ua-accent-ink);}

/* Utilitário só-leitor-de-tela */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Prosa de conteúdo (sinopses, descrições) — legibilidade a 16px */
.ua-prose{color:var(--ua-text-2);font-size:1.0667rem;line-height:1.65;max-width:70ch;}
.ua-prose strong{color:var(--ua-text);}

/* =============================================================================
   prefers-reduced-motion — regra mestre (depois de tudo)
   ============================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important;}
  .swiper-slide{transform:none!important;}
}
