/* ============================================================
   D-Claude — Base
   Reset + body + fondo (dot grid + grain) + tipografía base.
   Requiere tokens.css cargado antes.
   ============================================================ */

/* === Import fonts (Google Fonts) === */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/* === Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* === Dot grid background (firma visual) === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(100,255,218,0.08), transparent 52%),
    radial-gradient(circle at 85% 78%, rgba(187,134,252,0.06), transparent 48%),
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* === Grain overlay (textura sutil) === */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
}

main, nav, footer, header { position: relative; z-index: 1; }

/* === Tipografía base === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; font-family: var(--mono); color: var(--muted); }

p { margin-bottom: var(--s-4); }
em { font-family: var(--serif); font-style: italic; }
strong { font-weight: 700; color: var(--text); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--ease);
}
a:hover { color: var(--text); }

code, pre, kbd, samp {
  font-family: var(--mono);
  font-size: 0.92em;
}
code {
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--text2);
}
pre {
  background: var(--bg3);
  padding: var(--s-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow-x: auto;
}
kbd {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  color: var(--text2);
  box-shadow: 0 1px 0 var(--border);
}

/* === Listas === */
ul, ol { padding-left: var(--s-5); margin-bottom: var(--s-4); }
li { margin-bottom: var(--s-2); }

/* === Tablas base === */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
}

/* === Forms básicos === */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
input, textarea, select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-3);
  outline: none;
  transition: border-color var(--ease);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}
input::placeholder { color: var(--muted); }

/* === Contenedor wrap === */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* === Utilitarias === */
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.sans { font-family: var(--sans); }

/* Accesibilidad: ocultar visualmente pero disponible para lectores de pantalla */
.visually-hidden,
.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;
}