@import "tailwindcss";

@theme {
  /* Paleta Brutal Tech (Estilo Hermes/Nous) */
  --color-nd-black: #000000;
  --color-nd-surface: #0a0a0a;
  --color-nd-surface-raised: #141414;
  --color-nd-accent: #ffffff; /* Contraste absoluto */
  --color-nd-electric: #3b82f6; /* Azul eléctrico solo para micro-interacciones */
  --color-nd-border: #262626; /* Gris oscuro para el grid */
  --color-nd-text-display: #ffffff;
  --color-nd-text-primary: #d4d4d4;
  --color-nd-text-secondary: #737373;

  /* Tipografía */
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Space Mono", monospace;
}

@layer components {
  .nd-label {
    @apply font-mono text-[11px] uppercase tracking-[0.15em] text-nd-text-secondary;
  }

  .nd-btn-primary {
    @apply bg-white text-black border border-white px-6 py-3 font-display font-bold text-sm uppercase tracking-wider hover:bg-transparent hover:text-white transition-colors duration-200;
  }

  .nd-btn-secondary {
    @apply bg-transparent text-white border border-nd-border px-6 py-3 font-display font-bold text-sm uppercase tracking-wider hover:border-white transition-colors duration-200;
  }

  /* Grid brutalista de fondo */
  .tech-grid {
    background-image: 
      linear-gradient(to right, var(--color-nd-border) 1px, transparent 1px),
      linear-gradient(to bottom, var(--color-nd-border) 1px, transparent 1px);
    background-size: 64px 64px;
  }
}