/* ============================================================
   RESET.CSS — Reset global + variables CSS (:root)
   Noctis Systems
   ============================================================ */

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

:root {
  /* ── Paleta de color ── */
  --ink:           #08070d;
  --ink-violet:    #11101a;
  --panel:         rgba(17, 16, 26, 0.72);
  --text:          #f4f1ff;
  --text-secondary:#b8b2cc;
  --violet:        #7c3aed;
  --violet-light:  #a78bfa;
  --silver:        #d8d3e8;
  --border:        rgba(167, 139, 250, 0.22);
  --glow:          rgba(124, 58, 237, 0.35);
  --glow-strong:   rgba(124, 58, 237, 0.55);

  /* ── Tipografía ── */
  --font-display: 'Sora', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Fira Code', monospace;

  /* ── Escala tipográfica fluida ── */
  --text-xs:   clamp(0.65rem, 1.2vw, 0.75rem);
  --text-sm:   clamp(0.8rem,  1.5vw, 0.9rem);
  --text-base: clamp(0.95rem, 1.8vw, 1.05rem);
  --text-lg:   clamp(1.05rem, 2vw, 1.2rem);
  --text-xl:   clamp(1.2rem,  2.5vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,  3vw, 2rem);
  --text-3xl:  clamp(1.9rem,  4vw, 2.8rem);
  --text-4xl:  clamp(2.4rem,  5.5vw, 3.8rem);
  --text-hero: clamp(3rem,    7vw, 5.2rem);

  /* ── Espaciado ── */
  --space-xs:  0.4rem;
  --space-sm:  0.8rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 7rem;

  /* ── Radios ── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ── Sombras ── */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.5), 0 0 24px var(--glow), 0 0 0 1px rgba(167,139,250,0.4);
  --shadow-glow:  0 0 40px var(--glow);

  /* ── Transiciones ── */
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0.1, 0.9, 0.3);
  --duration: 0.4s;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background-color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  letter-spacing: -0.035em;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

em {
  font-style: italic;
  color: var(--violet-light);
}

strong {
  font-weight: 600;
  color: var(--text);
}

p {
  color: var(--text-secondary);
  line-height: 1.75;
}

a {
  color: var(--violet-light);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}

a:hover { color: var(--text); }

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button { cursor: pointer; border: none; background: none; }

::selection {
  background: var(--violet);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--violet-light);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Accesibilidad — visually hidden */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 3px; }