/**
 * Design System — Tienda Mágica (Fase 1)
 * Source of Truth: design-system/tienda-magica/MASTER.md (MASTER v2)
 * Feature: 001-design-system-css-global
 *
 * Contenido:
 *   1. Design Tokens (:root) — FR-001, FR-002, FR-003
 *   2. Tipografía global       — FR-008, FR-009
 *   3. Botones base            — FR-010
 *   4. Accesibilidad           — FR-011, FR-012
 *
 * REGLA: Ningún valor de color, tipografía o espaciado puede estar hardcodeado
 * fuera del bloque :root. Usar siempre var(--token).
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS — :root
   T003: 14 color tokens (FR-001), 2 typography tokens (FR-002), 6 spacing tokens (FR-003)
   Valores exactos según contracts/tokens.css
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color Tokens (FR-001: 14 variables) ─────────────────────────────────── */
  --color-primary:      #7C3AED;  /* Violeta — color de marca, nav activo, badges */
  --color-primary-dark: #5B21B6;  /* Hover sobre primary */
  --color-cta:          #F97316;  /* Naranja — botones de compra, urgencia */
  --color-cta-dark:     #EA580C;  /* Hover sobre CTA */
  --color-accent:       #EC4899;  /* Rosa — badges "Nuevo", "Oferta", destacados */
  --color-bg:           #FFFFFF;  /* Fondo limpio */
  --color-surface:      #F8F5FF;  /* Secciones alternas (tinte violeta) */
  --color-surface-2:    #FFF7ED;  /* Secciones de oferta/promo (tinte naranja) */
  --color-text:         #1E1B4B;  /* Texto principal */
  --color-text-muted:   #64748B;  /* Subtítulos, metadata, precios tachados */
  --color-border:       #E8E0FA;  /* Bordes de cards */
  --color-success:      #059669;  /* Confirmación, stock disponible (backgrounds/icons) */
  --color-success-dark: #047857;  /* WCAG AA text on white — 4.54:1 (T030 §V) */
  --color-dark:         #1E1B4B;  /* Headings sobre fondo claro */
  --color-light:        #FFFFFF;  /* Texto sobre fondo oscuro/primario */

  /* ── Typography Tokens (FR-002) ──────────────────────────────────────────── */
  --font-heading: 'Rubik', sans-serif;
  --font-body:    'Nunito Sans', sans-serif;

  /* ── Spacing Tokens (FR-003: 6 variables, sistema 8px) ───────────────────── */
  --space-xs:  8px;   /* Gaps inline */
  --space-sm:  16px;  /* Padding interno de cards */
  --space-md:  24px;  /* Gap entre cards */
  --space-lg:  40px;  /* Separación intra-sección */
  --space-xl:  64px;  /* Padding de sección .tv-section */
  --space-2xl: 96px;  /* Padding de hero */

  /* ── Derived Color Tokens ──────────────────────────────────────────────── */
  --color-gold:         #FBBF24;  /* Hero emphasis, precios destacados */

  /* ── Layout Tokens ───────────────────────────────────────────────────────── */
  --nav-height:   64px;   /* Sticky header height */
  --radius-card:  16px;   /* Card border-radius */
  --radius-input:  8px;   /* Form input border-radius */

  /* ── Shadow Tokens (FR-001, T001 — feature 002) ──────────────────────────── */
  --shadow-card:       0 4px 16px rgba(124,58,237,0.06);   /* ProductCard resting */
  --shadow-card-hover: 0 12px 32px rgba(124,58,237,0.12);  /* ProductCard elevated */
  --shadow-focus:      0 0 0 3px rgba(124,58,237,0.12);    /* Focus ring — inner pages inputs */

  /* ── Overlay / Alpha Tokens — 009-inner-pages-design ─────────────────────── */
  --color-light-alpha-20: rgba(255,255,255,0.20);  /* Chip background on gradient hero */
  --color-light-alpha-88: rgba(255,255,255,0.88);  /* Subtitle text on gradient hero */
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. TIPOGRAFÍA GLOBAL
   T007: body + h1-h6 con fuentes de marca y escala de data-model.md (FR-008, FR-009)
   ───────────────────────────────────────────────────────────────────────────── */

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* overflow-x en el main para no romper position:sticky del header */
#magica-homepage {
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-dark);
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

h4,
h5,
h6 {
  font-size: 1rem;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. BOTONES BASE
   T008: .btn-cta  — acción principal naranja (FR-010)
   T009: .btn-primary — secundario violeta (FR-010)
   T010: .btn-ghost — fantasma/terciario (FR-010)
   ───────────────────────────────────────────────────────────────────────────── */

/* Estilos base compartidos por todos los botones del design system */
.btn-cta,
.btn-primary,
.btn-ghost {
  display: inline-block;
  border-radius: 999px;
  padding: 0.9rem 1.8rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}

/* T008: .btn-cta — CTA naranja (Single CTA Rule: máximo uno por sección) */
.btn-cta {
  background: var(--color-cta);
  color: var(--color-light);
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.btn-cta:hover {
  background: var(--color-cta-dark);
  transform: translateY(-2px);
  color: var(--color-light);
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* T009: .btn-primary — botón violeta secundario */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-light);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  color: var(--color-light);
}

/* T010: .btn-ghost — botón fantasma/terciario */
.btn-ghost {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-ghost:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. ACCESIBILIDAD
   T011: Focus ring WCAG 2.1 AA (FR-011) + prefers-reduced-motion (FR-012)
   ───────────────────────────────────────────────────────────────────────────── */

/* Focus ring visible en navegación por teclado — WCAG 2.1 AA */
*:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Reducción de movimiento para usuarios con sensibilidad al movimiento */
@media (prefers-reduced-motion: reduce) {
  * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}