/* LandingCopy — Design System v8.0 */

/* ============================================================
   CSS VARIABLES — TEMAS CLARO/OSCURO
   ============================================================ */

:root {
  /* Colores — tema claro */
  --color-bg:           #f8fafc;
  --color-bg-elevated:  #ffffff;
  --color-bg-subtle:    #f1f5f9;
  --color-border:       #e2e8f0;
  --color-text:         #0f172a;
  --color-text-muted:   #64748b;
  --color-text-subtle:  #94a3b8;
  --color-primary:      #2563eb;
  --color-primary-hover:#1d4ed8;
  --color-primary-light:#dbeafe;
  --color-success:      #059669;
  --color-success-light:#d1fae5;
  --color-warning:      #d97706;
  --color-warning-light:#fef3c7;
  --color-danger:       #dc2626;
  --color-danger-light: #fef2f2;
  --color-info:         #0284c7;
  --color-info-light:   #e0f2fe;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);

  /* Radios */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* Tipografía */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Espaciado base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Transición global */
  --transition: 150ms ease;
}

[data-theme="dark"] {
  --color-bg:           #0f172a;
  --color-bg-elevated:  #1e293b;
  --color-bg-subtle:    #172033;
  --color-border:       #334155;
  --color-text:         #f1f5f9;
  --color-text-muted:   #94a3b8;
  --color-text-subtle:  #64748b;
  --color-primary:      #3b82f6;
  --color-primary-hover:#60a5fa;
  --color-primary-light:#1e3a5f;
  --color-success:      #34d399;
  --color-success-light:#064e3b;
  --color-warning:      #fbbf24;
  --color-warning-light:#78350f;
  --color-danger:       #f87171;
  --color-danger-light: #7f1d1d;
  --color-info:         #38bdf8;
  --color-info-light:   #0c4a6e;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.2);
  --shadow-md:  0 4px 6px rgba(0,0,0,.25);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.3);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

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

body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img { max-width: 100%; height: auto; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-center { text-align: center; }
.text-right { text-align: right; }

.font-mono { font-family: var(--font-mono); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.inline-form { display: inline; }