/* ========================================
   VARIABLES CSS - PALETA DEPEX
   Archivo: src/css/variables.css
   Descripcion: Definicion centralizada de colores, tipografia y espaciados
========================================= */

/* ============================================
   VARIABLES.CSS - Sistema de variables
   Versión: 1.0
   ============================================ */

:root {
  /* ===== COLORES PRINCIPALES ===== */
  --color-ebano: #1b1b1b; /* Color negro principal */
  --color-terrosa: #2b261d; /* Color marrón */
  --color-blanco: #ffffff; /* Color blanco */
  --color-crema: #fff6e5; /* Color crema */
  --color-igneo: #ffbc37; /* Color ígneo */
  --color-ambar: #f88410; /* Color ámbar, usado para acentos */
  --color-cream-light: #fbfaf8; /* Color crema claro */
  --color-green: #7cab07; /* Color verde */

  /* ===== TIPOGRAFÍA ===== */
  --font-primary:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Fuente principal */
  --font-weight-normal: 400; /* Peso normal de la fuente */
  --font-weight-medium: 500; /* Peso medio de la fuente */
  --font-weight-semibold: 600; /* Peso seminegrita de la fuente */
  --font-weight-bold: 700; /* Peso negrita de la fuente */

  /* ===== ESCALA TIPOGRÁFICA ===== */
  --base-size: 16; /* Tu base de diseño suele ser 16px */
  
  --font-size-10: 0.625rem; /* Tamaño de fuente pequeño */
  --font-size-12: 0.75rem; /* Tamaño de fuente más pequeño */
  --font-size-14: 0.875rem; /* Tamaño de fuente mediano */
  --font-size-16: 1rem; /* Tamaño de fuente base */
  --font-size-18: 1.125rem; /* Tamaño de fuente ligeramente más grande */
  --font-size-20: 1.25rem; /* Tamaño de fuente grande */
  --font-size-24: 1.5rem; /* Tamaño de fuente muy grande */
  --font-size-28: 1.75rem; /* Tamaño de fuente más grande */
  --font-size-30: 1.875rem; /* Tamaño de fuente extra grande */
  --font-size-34: 2.125rem; /* Tamaño de fuente aún más grande */
  --font-size-38: 2.375rem; /* Tamaño de fuente para títulos grandes */
  --font-size-42: 2.625rem; /* Tamaño de fuente para títulos más grandes */
  --font-size-48: 3rem; /* Tamaño de fuente para encabezados */
  --font-size-52: 3.25rem; /* Tamaño de fuente para encabezados grandes */
  --font-size-58: 3.5rem; /* Tamaño de fuente para encabezados muy grandes */
  --font-size-68: 4.25rem; /* Tamaño de fuente para encabezados destacados */
  --font-size-72: 4.5rem; /* Tamaño de fuente para encabezados destacados */
  --font-size-78: 4.75rem; /* Tamaño de fuente para encabezados destacados */
  --font-size-88: 5rem; /* Tamaño de fuente para encabezados máximos */
  --font-size-96: 5.25rem; /* Tamaño de fuente para encabezados máximos */
  --font-size-112: 5.5rem; /* Tamaño de fuente para encabezados máximos */

  /* ===== VARIABLES SEMÁNTICAS ===== */
  --font-size-hero-title: var(
    --font-size-68
  ); /* Tamaño de fuente para el título principal del héroe */
  --font-size-hero-subtitle: var(
    --font-size-38
  ); /* Tamaño de fuente para el subtítulo del héroe */
  --font-size-section-title: var(
    --font-size-48
  ); /* Tamaño de fuente para títulos de sección */
  --font-size-card-title: var(
    --font-size-24
  ); /* Tamaño de fuente para títulos de tarjetas */

  /* ===== LINE HEIGHT ===== */
  --line-height-base: 1.5; /* Altura de línea base */
  --line-height-relaxed: 1.7; /* Altura de línea relajada */
  --line-height-tight: 1.2; /* Altura de línea ajustada */

  /* ===== ESPACIADOS ===== */
  /*--spacing-xs: 0.5rem;*/
  --spacing-8px: 0.5rem;
  /*--spacing-sm: 1rem;*/
  --spacing-16px: 1rem;
  /*--spacing-md: 1.5rem;*/
  --spacing-24px: 1.5rem;
  /*--spacing-lg: 2rem;*/
  --spacing-32px: 2rem;
  /*--spacing-xl: 3rem; */
  --spacing-48px: 3rem;
  /*--spacing-xxl: 3.5rem;*/
  --spacing-56px: 3.5rem;
  /*--spacing-xxxl: 4rem;*/
  --spacing-64px: 4rem;
  /*--spacing-yl: 5rem;*/
  --spacing-80px: 5rem;
  /*--spacing-yyl: 6rem;*/
  --spacing-96px: 6rem;
  /*--spacing-yyyl: 7rem;*/
  --spacing-112px: 7rem;
  /*--spacing-zl: 8rem;*/
  --spacing-128px: 8rem;
  /*--spacing-zzl: 9rem;*/
  --spacing-144px: 9rem;
  /*--spacing-zzzl: 10rem;*/
  --spacing-160px: 10rem;

  /* ===== BREAKPOINTS ===== */
  --breakpoint-mobile: 480px; /* Punto de ruptura para móviles */
  --breakpoint-tablet: 768px; /* Punto de ruptura para tabletas */
  --breakpoint-desktop: 1024px; /* Punto de ruptura para escritorio */
  --breakpoint-large: 1400px; /* Punto de ruptura para pantallas grandes */

  /* ===== SOMBRAS ===== */
  --shadow-sm: 0 2px 4px rgba(27, 27, 27, 0.08); /* Sombra pequeña */
  --shadow-md: 0 4px 6px rgba(27, 27, 27, 0.1); /* Sombra mediana */
  --shadow-lg: 0 8px 16px rgba(27, 27, 27, 0.12); /* Sombra grande */

  /* ===== TRANSICIONES ===== */
  --transition-fast: 0.2s ease; /* Transición rápida */
  --transition-normal: 0.3s ease; /* Transición normal */
  --transition-slow: 0.5s ease; /* Transición lenta */

  /* ===== Z-INDEX ===== */
  --z-nav: 1000; /* Z-index para navegación */
  --z-overlay: 900; /* Z-index para overlays */
  --z-modal: 1100; /* Z-index para modales */
  --z-backtop: 999; /* Z-index para botón de volver arriba */

  /* ===== VARIABLES ESPECÍFICAS DE TARJETAS ===== */
  --card-border-radius-12px: 12px; /* Radio de borde para tarjetas */
  --card-border-radius-8px: 8px; /* Radio de borde para tarjetas */
  --card-border-radius-16px: 16px; /* Radio de borde para tarjetas */
  --card-padding: var(--spacing-lg, 2rem); /* Padding para tarjetas */
  --card-padding-sm: var(
    --spacing-md,
    1.5rem
  ); /* Padding pequeño para tarjetas */
  --card-padding-lg: var(--spacing-xl, 3rem); /* Padding grande para tarjetas */
  --card-shadow: 0 2px 8px rgba(27, 27, 27, 0.04); /* Sombra para tarjetas */
  --card-shadow-hover: 0 12px 24px rgba(248, 132, 16, 0.15); /* Sombra al pasar el mouse */
  --card-border: 1px solid rgba(27, 27, 27, 0.08); /* Borde para tarjetas */
  --card-border-hover: 1px solid var(--color-ambar, #f88410); /* Borde al pasar el mouse */
  --card-transition: all var(--transition-normal, 0.3s ease); /* Transición para tarjetas */
}

/* ======TAMAÑOS DE FUENTE O TEXTO ========*/
/* ====== TAMAÑOS DE FUENTE (Escala Profesional) ====== */

/* Pequeños (Saltos de 2px) */
.text-10 { font-size: calc(10 / var(--base-size) * 1rem); }
.text-12 { font-size: calc(12 / var(--base-size) * 1rem); }
.text-14 { font-size: calc(14 / var(--base-size) * 1rem); }

/* Base y Destacados (Saltos de 4px) */
.text-16 { font-size: calc(16 / var(--base-size) * 1rem); } /* Tamaño estándar */
.text-20 { font-size: calc(20 / var(--base-size) * 1rem); }
.text-24 { font-size: calc(24 / var(--base-size) * 1rem); }

/* Títulos (Saltos de 8px) */
.text-32 { font-size: calc(32 / var(--base-size) * 1rem); }
.text-40 { font-size: calc(40 / var(--base-size) * 1rem); }
.text-48 { font-size: calc(48 / var(--base-size) * 1rem); }
.text-56 { font-size: calc(56 / var(--base-size) * 1rem); }

/* Grandes Impactos (Saltos de 16px) */
.text-64 { font-size: calc(64 / var(--base-size) * 1rem); }
.text-80 { font-size: calc(80 / var(--base-size) * 1rem); }
.text-96 { font-size: calc(96 / var(--base-size) * 1rem); }

/* ===== UTILIDADES DE TEXTO ===== */

/* ===== TIPOGRAFÍA COLOR ===== */
.text-ebano { color: var(--color-ebano); }
.text-ambar { color: var(--color-ambar); }
.text-igneo { color: var(--color-igneo); }
.text-terrosa { color: var(--color-terrosa); }
.text-blanco { color: var(--color-blanco); }
.text-crema { color: var(--color-crema); }
.text-green { color: var(--color-green); }
.text-muted { color: rgba(27, 27, 27, 0.75); }
.text-muted-light { color: rgba(255, 255, 255, 0.75); }

/* ===== TIPOGRAFÍA ANCHO Y COLOR ===== */
.fw-normal { font-weight: var(--font-weight-normal); }
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-bold { font-weight: var(--font-weight-bold); }
.ambar-wn { font-weight: var(--font-weight-normal); color: var(--color-ambar); }
.ambar-ws { font-weight: var(--font-weight-semibold); color: var(--color-ambar); }
.ambar-wb { font-weight: var(--font-weight-bold); color: var(--color-ambar); }

/* ===== TIPOGRAFÍA ALINEACION ===== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ===== TIPOGRAFÍA FORMATOS ESTILOS ===== */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.line-through { text-decoration: line-through; }

/* ===== TIPOGRAFÍA FORMATOS ===== */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ===== TIPOGRAFÍA INTERLINEADO ===== */
.tracking-tight { letter-spacing: -0.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.02em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }

.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-base); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* ===== TIPOGRAFÍA TAMANO ===== */
.text-xs { font-size: var(--font-size-14); }
.text-sm { font-size: var(--font-size-16); }
.text-md { font-size: var(--font-size-18); }
.text-lg { font-size: var(--font-size-20); }
.text-xl { font-size: var(--font-size-24); }
.text-2xl { font-size: var(--font-size-30); }
.text-3xl { font-size: var(--font-size-38); }
.text-4xl { font-size: var(--font-size-48); }
.text-5xl { font-size: var(--font-size-68); }
  
  /* ====== CAPAS O NIVELES DE POSICION EN EL EJE Z =======*/
  .layer-0 {  position: relative;  z-index: 0;}
  .layer-10 {  position: relative;  z-index: 10;}
  .layer-20 {  position: relative;  z-index: 20;}

 /* ===== COLORES PRINCIPALES ===== */
  .color-ebano { color: var(--color-ebano); }
  .color-terrosa { color: var(--color-terrosa); }
  .color-blanco { color: var(--color-blanco); }
  .color-crema { color: var(--color-crema); }
  .color-igneo { color: var(--color-igneo); }
  .color-ambar { color: var(--color-ambar); }
  .color-cream-light { color: var(--color-cream-light); }
  .color-green { color: var(--color-green); }

  /* ===== TIPOGRAFÍA ===== */
  .font-primary { font-family: var(--font-primary); }
  .font-weight-normal { font-weight: var(--font-weight-normal); }
  .font-weight-medium { font-weight: var(--font-weight-medium); }
  .font-weight-semibold { font-weight: var(--font-weight-semibold); }
  .font-weight-bold { font-weight: var(--font-weight-bold); }

/* ========================================== 
          DISTANCIAS DEL MARGIN
  ========================================== */ 

/* ====== MARGIN RESET ======== */
.m-0 {margin: 0;}

/* ====== MARGIN TOP ======== */ 
.mt-8 {margin-top: var(--spacing-8px);}
.mt-16 {margin-top: var(--spacing-16px);}
.mt-24 {  margin-top: var(--spacing-24px);}
.mt-32 {  margin-top: var(--spacing-32px);}
.mt-48 {  margin-top: var(--spacing-48px);}
.mt-56 {  margin-top: var(--spacing-56px);}
.mt-64 {  margin-top: var(--spacing-64px);}
.mt-80 {  margin-top: var(--spacing-80px);}
.mt-96 {  margin-top: var(--spacing-96px);}
.mt-112 {  margin-top: var(--spacing-112px);}
.mt-128 {  margin-top: var(--spacing-128px);}
.mt-144 {  margin-top: var(--spacing-144px);}

/* ====== MARGIN BOTTOM ======== */ 
.mb-8 {  margin-bottom: var(--spacing-8px);}
.mb-16 {  margin-bottom: var(--spacing-16px);}
.mb-24 {  margin-bottom: var(--spacing-24px);}
.mb-32 {  margin-bottom: var(--spacing-32px);}
.mb-48 {  margin-bottom: var(--spacing-48px);}
.mb-56 {  margin-bottom: var(--spacing-56px);}
.mb-64 {  margin-bottom: var(--spacing-64px);}
.mb-80 {  margin-bottom: var(--spacing-80px);}
.mb-96 {  margin-bottom: var(--spacing-96px);}
.mb-112 {  margin-bottom: var(--spacing-112px);}
.mb-128 {  margin-bottom: var(--spacing-128px);}
.mb-144 {  margin-bottom: var(--spacing-144px);}

/* ====== MARGIN LEFT ======== */
.ml-xs {  margin-left: var(--spacing-8px);}
.ml-sm {  margin-left: var(--spacing-16px);}
.ml-md {  margin-left: var(--spacing-24px);}
.ml-lg {  margin-left: var(--spacing-32px);}
.ml-xl {  margin-left: var(--spacing-48px);}

/* ====== DISTANCIAS DEL PADDING ======== */ 
.p-0 {  padding: 0;}
.p-sm {  padding: var(--spacing-16px);}
.p-md {  padding: var(--spacing-24px);}
.p-lg {  padding: var(--spacing-32px);}
.p-xl {  padding: var(--spacing-48px);}

/* ====== COMPORTAMIENTO DEL DISPLAY ======== */
.d-none {  display: none;}
.d-flex {  display: flex;}
.d-grid {  display: grid;}
.d-block {  display: block;}
.d-inline {  display: inline;}
.d-inline-flex {  display: inline-flex;}

/* ====== FLEXBOX ======== */
.flex-1 {  flex: 1;}
.flex-row {  flex-direction: row;}
.flex-column {  flex-direction: column;}
.flex-wrap {  flex-wrap: wrap;}
.flex-nowrap {  flex-wrap: nowrap;}

/* ====== JUSTIFY CONTENT ======== */
.justify-start {  justify-content: flex-start;}
.justify-end {  justify-content: flex-end;}
.justify-center {  justify-content: center;}
.justify-between {  justify-content: space-between;}
.justify-around {  justify-content: space-around;}
.items-start {  align-items: flex-start;}

/* ====== ALIGN ITEMS ======== */
.items-end {  align-items: flex-end;}
.items-center {  align-items: center;}
.items-stretch {  align-items: stretch;}

/* ====== ALIGN CONTENT ======== */
.gap-xs {  gap: var(--spacing-8px);}
.gap-sm {  gap: var(--spacing-16px);}
.gap-md {  gap: var(--spacing-24px);}
.gap-lg {  gap: var(--spacing-32px);}
.gap-xl {  gap: var(--spacing-48px);}

/* ====== BORDER RADIUS ======== */
.rounded-sm {  border-radius: 4px;}
.rounded-md {  border-radius: 8px;}
.rounded-lg {  border-radius: 12px;}
.rounded-xl {  border-radius: 16px;}
.rounded-full {  border-radius: 50%;}

/* ====== BORDER ======== */
.border {  border: 1px solid rgba(27, 27, 27, 0.08);}
.border-2 {  border: 2px solid rgba(27, 27, 27, 0.08);}

/* ====== SHADOWS SOMBRAS======== */
.shadow-none {  box-shadow: none;}
.shadow-sm {  box-shadow: var(--shadow-sm);}
.shadow-md {  box-shadow: var(--shadow-md);}
.shadow-lg {  box-shadow: var(--shadow-lg);}

/* ====== TRANSITIONS ======== */
.object-cover {  object-fit: cover;}
.object-contain {  object-fit: contain;}
.object-fill {  object-fit: fill;}
.object-none {  object-fit: none;}
.object-scale-down {  object-fit: scale-down;}

/* ====== IMAGE ======== */
.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ====== DIMENSIONES ======== */
.w-full {width: 100%;}
.w-auto {  width: auto;}
.h-full {  height: 100%;}
.h-auto {  height: auto;}

.min-w-full {  min-width: 100%;}
.max-w-full {  max-width: 100%;}

.min-h-screen {  min-height: 100vh;}
.max-h-screen {  max-height: 100vh;}

/* ====== POSICIONAMIENTO ======== */
.p-static {  position: static;}
.p-relative {  position: relative;}
.p-absolute {  position: absolute;}
.p-fixed {  position: fixed;}
.p-sticky {  position: sticky;}

/* ====== OVERFLOW ======== */
.overflow-hidden {  overflow: hidden;}
.overflow-auto {  overflow: auto;}
.overflow-x-auto {  overflow-x: auto;}
.overflow-y-auto {  overflow-y: auto;}

/* ====== FORMA DEL CURSOR ======== */
.cursor-pointer {  cursor: pointer;}
.cursor-default {  cursor: default;}
.cursor-not-allowed {  cursor: not-allowed;}
.cursor-text {  cursor: text;}
.cursor-wait {  cursor: wait;}

.ambar-wb { font-weight: var(--font-weight-bold); color: var(--color-ambar); }