/*
Theme Name: NATA Industrial & Streetwear
Theme URI: https://nata.mx
Author: Nata
Author URI: https://nata.mx
Description: Tema FSE (Full Site Editing) a medida para nata.mx. Estética Industrial Brutalista combinada con Streetwear Mixed-Media (stickers táctiles, intervenciones de pintura, fichas técnicas tipo receipt y cuadrículas de taller). Optimizado para Raspberry Pi y Cloudflare.
Version: 1.5.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: MIT
Text Domain: nata-industrial
*/



















/* Importación de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@700;800&display=swap');

/* Importación de Hojas de Estilo Modulares */
@import url('assets/css/theme.css');
@import url('assets/css/stickers.css');
@import url('assets/css/brush-strokes.css');
@import url('assets/css/receipt.css');

/* Variables y Estilos Base Globales */
:root {
  --color-bg: #0a0b0e;
  --color-surface: #131418;
  --color-surface-hover: #1c1e24;
  --color-border: #262930;
  --color-border-subtle: #1e2026;
  
  --color-text-main: #f3f4f6;
  --color-text-muted: #8b929e;
  --color-text-dim: #5a606c;
  
  /* Acentos de Alta Energía */
  --color-paint-red: #ff1e27;
  --color-paint-red-glow: rgba(255, 30, 39, 0.25);
  --color-tape-yellow: #ffe500;
  --color-tape-yellow-dark: #ccb700;
  --color-blueprint: #00d4ff;
  
  /* Fuentes */
  --font-display: 'Syne', 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', monospace;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* Retículas y Bordes */
  --grid-line-color: rgba(255, 255, 255, 0.06);
  --border-width: 1px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  background-image: 
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
}

/* Selección de texto con estilo rotulador */
::selection {
  background-color: var(--color-paint-red);
  color: #ffffff;
}