/* ============================================
   Ordanai — Sistema de diseño
   Variables CSS para aplicar en todo el sitio
   ============================================ */

:root {
  /* === PALETA PRINCIPAL === */
  --ordanai-green:        #1DB954;  /* Verde Ordanai — CTA, acentos, iconografía */
  --ordanai-green-deep:   #0A8A3C;  /* Verde profundo — hover, gradientes */
  --ordanai-green-soft:   #E8F8EE;  /* Verde muy suave — fondos sutiles */
  --ordanai-black:        #0D1117;  /* Negro Ordanai — headers, fondos oscuros */
  --ordanai-white:        #FFFFFF;  /* Blanco puro */

  /* === NEUTROS === */
  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-800:  #1F2937;
  --gray-900:  #111827;

  /* === SEMÁNTICOS === */
  --color-text-primary:    var(--ordanai-black);
  --color-text-secondary:  var(--gray-600);
  --color-text-muted:      var(--gray-400);
  --color-text-inverse:    var(--ordanai-white);

  --color-bg-primary:      var(--ordanai-white);
  --color-bg-secondary:    var(--gray-50);
  --color-bg-dark:         var(--ordanai-black);
  --color-bg-brand:        var(--ordanai-green);

  --color-border:          var(--gray-200);
  --color-border-dark:     var(--gray-300);

  --color-accent:          var(--ordanai-green);
  --color-accent-hover:    var(--ordanai-green-deep);

  /* === TIPOGRAFÍA === */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue',
               Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

  /* Escalas tipográficas */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.5rem;    /* 56px */

  /* Pesos */
  --font-thin:     200;
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* === ESPACIADO === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* === BORDER RADIUS === */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* === SOMBRAS (usar con moderación, estilo minimalista) === */
  --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 17, 23, 0.06);
  --shadow-lg: 0 12px 32px rgba(13, 17, 23, 0.08);

  /* === TRANSICIONES === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Estilos base recomendados
   ============================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-thin);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); font-weight: var(--font-light); }

/* Botón primario */
.btn-primary {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--ordanai-green);
  color: var(--ordanai-black);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base);
}
.btn-primary:hover { background: var(--ordanai-green-deep); color: var(--ordanai-white); }

/* Botón secundario */
.btn-secondary {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-dark);
  cursor: pointer;
  transition: all var(--transition-base);
}
.btn-secondary:hover { border-color: var(--ordanai-green); color: var(--ordanai-green); }

/* Link de texto */
.link {
  color: var(--ordanai-green-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.link:hover { border-color: var(--ordanai-green); }