@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* ── NexID Dark Neumorphism ── */
    --background: 220 16% 88%;      /* #E0E5EC — cinza claro base */
    --foreground: 240 15% 15%;      /* texto escuro no fundo claro */

    --card: 240 12% 17%;            /* #2d2d3a — grafite escuro */
    --card-foreground: 220 20% 90%; /* texto claro no card */

    --popover: 240 12% 19%;
    --popover-foreground: 220 20% 90%;

    /* Azul Sereno — destaque primário */
    --primary: 213 80% 58%;         /* #3A9DEA */
    --primary-foreground: 0 0% 100%;

    --secondary: 220 14% 82%;
    --secondary-foreground: 240 10% 20%;

    --muted: 220 12% 80%;
    --muted-foreground: 220 10% 44%;

    --accent: 170 55% 42%;          /* Teal */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 72% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 14% 75%;
    --input: 220 14% 80%;
    --ring: 213 80% 58%;

    --chart-1: 213 80% 58%;
    --chart-2: 170 55% 42%;
    --chart-3: 35 85% 55%;
    --chart-4: 200 70% 50%;
    --chart-5: 340 65% 55%;
    --radius: 0.75rem;

    /* ── Módulo Comunidade — fontes ── */
    --font-inter: 'Inter', sans-serif;
    --font-space: 'Space Grotesk', sans-serif;

    /* Sidebar — grafite mais escuro */
    --sidebar-background: 240 13% 13%;   /* #1e1e2e */
    --sidebar-foreground: 220 20% 88%;
    --sidebar-primary: 213 80% 58%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 12% 20%;
    --sidebar-accent-foreground: 220 20% 90%;
    --sidebar-border: 240 10% 22%;
    --sidebar-ring: 213 80% 58%;

    /* ── Paleta Perito Autônomo (azul-marinho + dourado) ── */
    --navy-900: 214 73% 12%;
    --navy-800: 215 73% 16%;
    --navy-700: 216 67% 19%;
    --navy-600: 218 59% 17%;
    --gold: 46 65% 52%;
    --gold-light: 48 89% 60%;
    --gold-deep: 43 89% 38%;
    --cream: 53 95% 85%;
    --cream-deep: 49 80% 80%;
    --font-heading: 'Cinzel', ui-serif, Georgia, serif;
    --font-body: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Cinzel', ui-serif, Georgia, serif;
    --font-script: 'Great Vibes', cursive;
    --font-mono: 'JetBrains Mono', monospace;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* ── Neumorphism — fundo claro (#E0E5EC) ── */
.neu-raised {
  box-shadow: 6px 6px 14px #b8c0cc, -6px -6px 14px #ffffff;
}
.neu-raised:hover {
  box-shadow: 8px 8px 18px #b0b9c6, -8px -8px 18px #ffffff;
}
.neu-pressed {
  box-shadow: inset 5px 5px 10px #b8c0cc, inset -5px -5px 10px #ffffff;
}
.neu-soft {
  box-shadow: 4px 4px 8px #b8c0cc, -4px -4px 8px #ffffff;
}

/* ── Dark card shadow — grafite escuro ── */
.neu-card {
  box-shadow:
    10px 10px 24px rgba(0, 0, 0, 0.35),
    -4px -4px 12px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ── Botão com inset ao pressionar ── */
.btn-serenity {
  background: hsl(213 80% 58%);
  color: #fff;
  box-shadow: 6px 6px 14px #b8c0cc, -6px -6px 14px #ffffff;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.btn-serenity:hover {
  box-shadow: 8px 8px 18px #b0b9c6, -8px -8px 18px #ffffff;
}
.btn-serenity:active,
.btn-serenity.pressed {
  box-shadow: inset 4px 4px 10px rgba(0,0,0,0.25), inset -2px -2px 6px rgba(255,255,255,0.1);
  transform: scale(0.97);
}

/* ── Neumorphic tactile button (elevated → sinks on active) ── */
.neu-press {
  transition: box-shadow 0.12s ease, transform 0.1s ease, filter 0.15s ease, background-color 0.15s ease;
  box-shadow: var(--neu-shadow, 0 8px 22px rgba(0,0,0,0.4));
}
.neu-press:hover { filter: brightness(1.06); }
.neu-press:active {
  transform: scale(0.98);
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.5), inset -1px -1px 4px rgba(255,255,255,0.12);
}

/* ── Neumorphic carved input (concave inset, glows on focus) ── */
.neu-input {
  background: #121214;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.65), inset -2px -2px 6px rgba(255,255,255,0.04);
  transition: box-shadow 0.15s ease;
}
.neu-input:focus {
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.65), inset -2px -2px 6px rgba(255,255,255,0.04), 0 0 0 2px var(--neu-ring, #00d4ff);
}

/* ── AuthCard field — borda fina elegante; foco realça apenas a cor da borda (sem ring) ── */
.auth-input {
  background: #121214;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.65), inset -2px -2px 6px rgba(255,255,255,0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.auth-input:focus {
  border-color: var(--neu-ring, hsl(var(--primary)));
  box-shadow: inset 3px 3px 8px rgba(0,0,0,0.65), inset -2px -2px 6px rgba(255,255,255,0.04);
}

/* Bounce arrow for landing page scroll indicator */
@keyframes bounce-arrow {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* NexPass cyan pulse animation */
@keyframes nexpass-pulse {
  0%, 100% { text-shadow: 0 0 8px #39ead580; box-shadow: 0 0 0 rgba(57,234,213,0); }
  50% { text-shadow: 0 0 18px #39ead5cc; box-shadow: 0 0 12px #39ead525; }
}

/* ── Módulo Comunidade — utility aliases (flat/no-op p/ compat) ── */
.neo-raised    { /* flat */ }
.neo-raised-sm { /* flat */ }
.neo-inset     { /* flat */ }
.neo-inset-sm  { /* flat */ }
.neo-button    { transition: all 0.15s ease; }
.neo-button:active { transform: scale(0.97); }
.neo-fab        { box-shadow: 0 4px 16px hsl(var(--instance-primary) / 0.25); transition: all 0.15s ease; }
.neo-fab:active { transform: scale(0.95); }
.glow-primary  { /* flat */ }

/* Scrollbar invisível (comunidade) */
.scrollbar-none { scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* Fade-in leve (comunidade) */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fade-in 0.3s ease; }

/* ════════════════════════════════════════════════════════
   ARTE APROVADA — Perito Autônomo (azul-marinho + dourado)
   ════════════════════════════════════════════════════════ */
@keyframes gold-shift {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* Barra dourada texturizada — divisor usado em todo o site */
.gold-bar {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0 2px,
      rgba(0, 0, 0, 0.07) 2px 4px
    ),
    linear-gradient(
      90deg,
      #8f6a14 0%,
      #f4d03f 12%,
      #d4af37 26%,
      #a9791a 38%,
      #f4d03f 52%,
      #d4af37 66%,
      #8f6a14 78%,
      #f4d03f 90%,
      #b8860b 100%
    );
  background-size: 100% 100%, 200% 100%;
  animation: gold-shift 22s linear infinite;
}

/* Faixa azul limpa, delimitada por fios dourados */
.panel-blue {
  background-color: hsl(var(--navy-700));
  border-top: 1px solid hsl(var(--gold) / 0.2);
  border-bottom: 1px solid hsl(var(--gold) / 0.2);
}

.shell {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: hsl(var(--gold));
}

.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-image: linear-gradient(
    135deg,
    hsl(var(--gold-light)),
    hsl(var(--gold)),
    hsl(var(--gold-deep))
  );
  color: hsl(var(--navy-900));
  padding: 0.9rem 1.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 14px 34px -16px hsl(var(--gold) / 0.7);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease, filter 0.35s ease;
}

.btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 20px 40px -18px hsl(var(--gold) / 0.85);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid hsl(var(--gold) / 0.55);
  color: hsl(var(--gold));
  padding: 0.9rem 1.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background-color 0.35s ease, border-color 0.35s ease,
    color 0.35s ease;
}

.btn-outline:hover {
  background-color: hsl(var(--gold) / 0.12);
  border-color: hsl(var(--gold));
}

.cream-panel {
  background-color: hsl(var(--cream));
  color: hsl(var(--navy-900));
  border: 1px solid hsl(var(--gold-deep) / 0.55);
}

.rise {
  animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ════════════════════════════════════════════════════════
   ARTE APROVADA — Modelo Artista / Portfólio (Markinhos Custom)
   Tema escuro + acento neon-limão, fontes Space Grotesk/Inter/JetBrains Mono.
   Escopo local — sobrepõe os tokens do app apenas dentro do portal.
   ════════════════════════════════════════════════════════ */
.artista-portal-scope {
  --background: 0 0% 4%;
  --foreground: 0 0% 95%;
  --card: 240 3% 9%;
  --card-foreground: 0 0% 95%;
  --popover: 240 3% 9%;
  --popover-foreground: 0 0% 95%;
  --primary: 72 100% 50%;
  --primary-foreground: 0 0% 4%;
  --secondary: 240 3% 12%;
  --secondary-foreground: 0 0% 95%;
  --muted: 240 3% 15%;
  --muted-foreground: 240 5% 65%;
  --accent: 72 100% 50%;
  --accent-foreground: 0 0% 4%;
  --border: 240 3% 18%;
  --input: 240 3% 18%;
  --ring: 72 100% 50%;
  --radius: 0.5rem;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  background: hsl(0 0% 4%);
  color: hsl(0 0% 95%);
  font-family: 'Inter', sans-serif;
}

.artista-portal-scope .btn-click-purple:active {
  background-color: #7C3AED !important;
  color: #ffffff !important;
}

.artista-portal-scope ::selection {
  background: hsl(72 100% 50% / 0.3);
  color: hsl(0 0% 95%);
}

@keyframes artista-neon-border {
  0%, 100% { border-color: rgba(80,180,255,0.7); box-shadow: 0 2px 18px rgba(80,180,255,0.3); }
  50% { border-color: rgba(204,255,0,0.7); box-shadow: 0 2px 18px rgba(204,255,0,0.3); }
}
@keyframes artista-neon-border-footer {
  0%, 100% { border-color: rgba(80,180,255,0.7); box-shadow: 0 -2px 18px rgba(80,180,255,0.3); }
  50% { border-color: rgba(204,255,0,0.7); box-shadow: 0 -2px 18px rgba(204,255,0,0.3); }
}