/* ═══════════════════════════════════════════════════════════════
   StarPic UI 3.0 — "Candy Brutal"
   Neobrutalismo claro: cores chapadas, contorno ink, sombra dura.
   Tokens compartilhados por TODAS as páginas (app, landing, login,
   admin, client). Cada página mantém só o CSS específico dela.
   ─────────────────────────────────────────────────────────────────
   Tematização por tenant: o app.js sobrescreve --primary em runtime
   (branding.primaryColor). Tudo que é "cor da campanha" deve usar
   --primary; o resto (ink, paper, doodles) é fixo da marca StarPic.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* fixos da marca */
  --ink:        #18140b;                 /* contorno + texto */
  --paper:      #fdf8ee;                 /* creme das superfícies */
  --paper-2:    #ffffff;
  --muted:      #756c58;                 /* texto secundário sobre creme */
  --bg:         #c9f24e;                 /* lima — palco/poster */

  /* paleta candy */
  --lime:       #c9f24e;
  --violet:     #8b5cf6;
  --violet-soft:#e3d6ff;
  --pink:       #ff5ca8;
  --pink-soft:  #ffd6ea;
  --blue:       #4f8ef7;
  --blue-soft:  #d4e4ff;
  --gold:       #ffc700;
  --green:      #3ecf6e;
  --green-soft: #d2f5dd;
  --red:        #ff5a4e;
  --red-soft:   #ffddda;
  --amber-soft: #ffefc2;

  /* tematizável por tenant (app.js → branding.primaryColor) */
  --primary:    #ffc700;

  /* texto sobre superfícies candy (CTA dourado, chips coloridos) —
     fica escuro nos DOIS temas, senão perde contraste no noturno */
  --ink-on-color: #18140b;

  /* construção */
  --bw:         2.5px;                   /* espessura do contorno */
  --shadow-sm:  3px 3px 0 var(--ink);
  --shadow:     4px 4px 0 var(--ink);
  --shadow-lg:  7px 7px 0 var(--ink);
  --radius:     16px;
  --radius-sm:  12px;
  --radius-lg:  22px;

  /* tipografia */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-head:    "Space Grotesk", "Inter", sans-serif;
  --font-display: "Archivo Black", "Space Grotesk", sans-serif;

  /* compat: páginas antigas referenciam --border em inline styles */
  --border: rgba(24, 20, 11, 0.18);
}

/* ── Tema noturno (por tenant: branding.theme === "night") ───── */
/* A tinta inverte (contornos/sombras viram creme), o papel escurece
   e os pastéis viram tintas profundas. As cores candy não mudam. */
:root[data-theme="night"] {
  --ink:        #f5efe2;
  --paper:      #1b1626;
  --paper-2:    #251e33;
  --muted:      #aaa0c2;
  --bg:         #0f0c16;
  --violet-soft:#3a2b63;
  --pink-soft:  #5c2342;
  --blue-soft:  #1f3a66;
  --green-soft: #1f4d32;
  --amber-soft: #56430f;
  --red-soft:   #5c241f;
  --border:     rgba(245, 239, 226, 0.18);
}

/* ── utilitários compartilhados ─────────────────────────────── */

/* ícone do sprite /icons.svg — herda a cor do texto (claro e noturno) */
.icn {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.25em;
  flex-shrink: 0;
}

/* grade de pontos sutil (textura de papel das refs) */
.u-dots {
  background-image: radial-gradient(rgba(24, 20, 11, 0.10) 1.1px, transparent 1.1px);
  background-size: 16px 16px;
}

/* bloco neobrutal genérico */
.u-card {
  background: var(--paper-2);
  border: var(--bw) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* marca-texto sob palavras-chave (estilo ref "Random NFT Packs") */
.u-marker {
  background: linear-gradient(transparent 58%, var(--primary) 58%, var(--primary) 92%, transparent 92%);
  padding: 0 2px;
}

/* scrollbar discreta para o tema claro */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 99px; border: 2.5px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}