/* =============================================================================
   tokens.css — Sistema de diseño Cuida Tu Techo (basado en MASCATE v1.0)
   =============================================================================
   Este archivo contiene TODAS las variables CSS del sistema.
   NUNCA usar hex directo en componentes — siempre referenciar var(--token).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   RESET BASE (debe cargarse antes que cualquier otro CSS)
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   TOKENS GLOBALES — variables CSS
   --------------------------------------------------------------------------- */
:root {

  /* === SUPERFICIES — escala de profundidad de 5 niveles ================ */
  --surface:         #f7f5ff;  /* fondo de página (body background) */
  --surface-low:     #ffffff;  /* tarjetas, cards, sidebar */
  --surface-mid:     #f0ecff;  /* inputs, tabs inactivos, chips */
  --surface-high:    #e8e2ff;  /* hover de elementos, activos suaves */
  --surface-highest: #d9d0ff;  /* selecciones, destacados máximos */

  /* === COLOR PRIMARIO — Gold (CTAs, acciones principales) =============== */
  --primary:           #e8a800;
  --primary-dark:      #b07e00;
  --primary-container: #fff8e1;
  --on-primary:        #1a0e00;  /* texto sobre gold — nunca blanco */

  --primary-dim:  rgba(232,168,0,0.12);
  --primary-a20:  rgba(232,168,0,0.20);
  --primary-a28:  rgba(232,168,0,0.28);

  /* === COLOR SECUNDARIO — Teal (positividad, confirmación, naturaleza) == */
  --secondary:           #2a7f62;
  --secondary-dark:      #1f6049;
  --secondary-container: #e0f5ee;

  --secondary-dim:  rgba(42,127,98,0.10);
  --secondary-a12:  rgba(42,127,98,0.12);
  --secondary-a22:  rgba(42,127,98,0.22);

  /* === COLOR ACENTO — Pink (alertas suaves, énfasis emocional) ========= */
  --pink:      #ff6b9e;
  --pink-dark: #d94d80;

  --pink-dim:  rgba(255,107,158,0.12);
  --pink-a10:  rgba(255,107,158,0.10);
  --pink-a20:  rgba(255,107,158,0.20);

  /* === COLOR ESTRUCTURAL — Violet (navegación, labels, marca) ========== */
  --violet:       #7c5cbf;
  --violet-light: #ada3ff;
  --violet-dim:   rgba(124,92,191,0.10);
  --violet-a22:   rgba(124,92,191,0.22);

  /* === COLOR TERCIARIO — Slate (texto UI secundario, baja jerarquía) === */
  --tertiary:           #4a4560;
  --tertiary-container: #eeecf7;
  --tertiary-dim:       rgba(74,69,96,0.08);

  /* === TEXTO — jerarquía completa ====================================== */
  --on-surface:   #1a0e36;  /* títulos principales, h1, valores grandes */
  --on-bg:        #2d2650;  /* cuerpo de texto, párrafos, tablas */
  --on-bg-muted:  #7a7098;  /* texto secundario, placeholders, subtítulos */

  /* === ESTADO DE ERROR ================================================= */
  --error:           #d63b1a;
  --error-container: #ffeee9;
  --error-dim:       rgba(214,59,26,0.10);

  /* === BORDES — siempre 1.5px solid ==================================== */
  --outline-variant: rgba(93,49,132,0.12);
  --outline-gold:    rgba(232,168,0,0.30);
  --outline-teal:    rgba(42,127,98,0.22);
  --outline-purple:  rgba(124,92,191,0.22);

  /* === SOMBRAS ========================================================= */
  --shadow-surface:    rgba(93,49,132,0.08);   /* suave — cards */
  --shadow-surface-lg: rgba(93,49,132,0.18);   /* prominente — modal */

  /* === BARRAS DE SISTEMA =============================================== */
  --black-bar:    rgba(30,18,50,0.95);
  --black-topbar: rgba(255,255,255,0.95);
  --black-toast:  rgba(30,18,50,0.92);
  --black-panel:  rgba(255,255,255,0.85);

  /* === RADIOS DE BORDE — sólo estos 4 son válidos ====================== */
  --radius-sm: 8px;    /* botones pequeños, inputs, chips */
  --radius-md: 14px;   /* inputs principales, botones estándar */
  --radius-lg: 20px;   /* cards, panels, stat cards */
  --radius-xl: 28px;   /* card principal, modales */

  /* === TIPOGRAFÍAS — sistema de dos familias ============================ */
  --font-display: 'Epilogue', system-ui, -apple-system, sans-serif;
  --font-body:    'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  /* === ESCALA TIPOGRÁFICA ============================================== */
  --text-xs:   0.75rem;   /* 12px — labels uppercase, tags */
  --text-sm:   0.875rem;  /* 14px — texto pequeño, hints */
  --text-base: 1rem;      /* 16px — cuerpo */
  --text-lg:   1.125rem;  /* 18px — destacado en cuerpo */
  --text-xl:   1.25rem;   /* 20px — subtítulos */
  --text-2xl:  1.5rem;    /* 24px — h3 */
  --text-3xl:  1.875rem;  /* 30px — h2 */
  --text-4xl:  2.25rem;   /* 36px — h1 */
  --text-5xl:  3rem;      /* 48px — hero móvil */
  --text-6xl:  3.75rem;   /* 60px — hero desktop */

  /* === ESPACIADO — escala estándar ===================================== */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* === LAYOUT — anchos máximos ========================================= */
  --max-w-prose:   65ch;
  --max-w-content: 1200px;
  --max-w-narrow:  900px;

  /* === TRANSICIONES ==================================================== */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
}

/* ---------------------------------------------------------------------------
   BODY — aplica el fondo de superficie con texturas decorativas
   --------------------------------------------------------------------------- */
body {
  background: var(--surface);
  color: var(--on-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Texturas decorativas sutiles sobre el body (manual 5.1) */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Ruido fractal sutil */
body::before {
  opacity: 0.025;
  background-image:
    radial-gradient(circle at 25% 25%, var(--violet) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, var(--pink) 1px, transparent 1px);
  background-size: 60px 60px, 80px 80px;
}

/* Patrón orgánico teal sutil */
body::after {
  opacity: 0.022;
  background-image:
    linear-gradient(135deg, var(--secondary) 25%, transparent 25%),
    linear-gradient(-135deg, var(--secondary) 25%, transparent 25%);
  background-size: 120px 120px;
}

/* El contenido debe quedar por encima de las texturas */
body > * {
  position: relative;
  z-index: 1;
}