/**
 * 00-variables.css — Design Tokens
 *
 * Decisión: Custom properties en :root para que JavaScript
 * pueda leerlas y para theming futuro (modo claro, etc).
 *
 * Decisión: Escala tipográfica con clamp() → responsive
 * automático sin media queries para cada tamaño.
 *
 * Convención de nombres:
 *   --ic-{categoría}-{variante}-{estado}
 */

:root {

  /* ── Paleta de color ──────────────────────────────────────────────────────── */
  --ic-black:          #000000;
  --ic-bg-deep:        #080808;    /* Fondo más oscuro — hero, footer */
  --ic-bg-dark:        #0e0e0e;    /* Fondo principal */
  --ic-bg-mid:         #161616;    /* Secciones alternas oscuras */
  --ic-bg-card:        #1a1a1a;    /* Cards, modales */
  --ic-bg-light:       #f8f6f3;    /* Secciones claras (problema, método, FAQ) */
  --ic-bg-cream:       #f2ede8;    /* Secciones claras variante cálida */

  --ic-accent:         #c8102e;    /* Rojo principal */
  --ic-accent-dark:    #a50d25;    /* Hover del rojo */
  --ic-accent-deep:    #7a0a1b;    /* Rojo más profundo */
  --ic-accent-glow:    rgba(200, 16, 46, 0.20);  /* Para sombras y glows */
  --ic-accent-subtle:  rgba(200, 16, 46, 0.08);  /* Fondos muy sutiles */

  /* Texto sobre fondos oscuros */
  --ic-text-primary:   #ffffff;
  --ic-text-secondary: rgba(255, 255, 255, 0.70);
  --ic-text-muted:     rgba(255, 255, 255, 0.40);
  --ic-text-divider:   rgba(255, 255, 255, 0.08);

  /* Texto sobre fondos claros */
  --ic-text-dark:      #0e0e0e;
  --ic-text-dark-2:    rgba(14, 14, 14, 0.70);
  --ic-text-dark-3:    rgba(14, 14, 14, 0.45);

  /* ── Tipografía ──────────────────────────────────────────────────────────── */
  --ic-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ic-font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Escala: clamp(mínimo, fluido, máximo) */
  /* Mínimo: móvil. Fluido: se adapta. Máximo: desktop. */
  --ic-text-display:  clamp(2.50rem, 6vw,  4.50rem);  /* 40px → 72px */
  --ic-text-h1:       clamp(2.00rem, 5vw,  3.50rem);  /* 32px → 56px */
  --ic-text-h2:       clamp(1.75rem, 4vw,  3.00rem);  /* 28px → 48px */
  --ic-text-h3:       clamp(1.25rem, 2.5vw, 2.00rem); /* 20px → 32px */
  --ic-text-h4:       clamp(1.10rem, 1.8vw, 1.50rem); /* 17.6px → 24px */
  --ic-text-body-lg:  clamp(1.05rem, 1.5vw, 1.25rem); /* 16.8px → 20px */
  --ic-text-body:     clamp(1.00rem, 1.3vw, 1.125rem);/* 16px → 18px */
  --ic-text-sm:       0.875rem;                        /* 14px — fijo */
  --ic-text-xs:       0.75rem;                         /* 12px — fijo */

  /* ── Espaciado ───────────────────────────────────────────────────────────── */
  /* Sistema de 8pt. Cada valor es múltiplo de 8. */
  --ic-space-1:   0.25rem;   /*  4px */
  --ic-space-2:   0.50rem;   /*  8px */
  --ic-space-3:   0.75rem;   /* 12px */
  --ic-space-4:   1.00rem;   /* 16px */
  --ic-space-5:   1.25rem;   /* 20px */
  --ic-space-6:   1.50rem;   /* 24px */
  --ic-space-8:   2.00rem;   /* 32px */
  --ic-space-10:  2.50rem;   /* 40px */
  --ic-space-12:  3.00rem;   /* 48px */
  --ic-space-16:  4.00rem;   /* 64px */
  --ic-space-20:  5.00rem;   /* 80px */
  --ic-space-24:  6.00rem;   /* 96px */
  --ic-space-32:  8.00rem;   /* 128px */

  /* Padding de sección: fluido */
  --ic-section-py: clamp(5rem, 10vw, 10rem); /* 80px → 160px */
  --ic-section-px: clamp(1.25rem, 5vw, 2.5rem);

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  --ic-container:       1200px;
  --ic-container-wide:  1400px;
  --ic-container-narrow: 800px;

  /* ── Bordes y radios ─────────────────────────────────────────────────────── */
  --ic-radius-sm:   4px;
  --ic-radius-md:   8px;
  --ic-radius-lg:   16px;
  --ic-radius-xl:   24px;
  --ic-radius-pill: 999px;

  --ic-border-dark: rgba(255, 255, 255, 0.08);
  --ic-border-light: rgba(14, 14, 14, 0.10);

  /* ── Sombras ─────────────────────────────────────────────────────────────── */
  --ic-shadow-sm:   0 1px 3px rgba(0,0,0,0.30);
  --ic-shadow-md:   0 4px 16px rgba(0,0,0,0.40);
  --ic-shadow-lg:   0 12px 40px rgba(0,0,0,0.50);
  --ic-shadow-xl:   0 24px 64px rgba(0,0,0,0.60);
  --ic-shadow-red:  0 8px 32px var(--ic-accent-glow);

  /* ── Transiciones ────────────────────────────────────────────────────────── */
  --ic-ease:         cubic-bezier(0.4, 0, 0.2, 1); /* Material ease */
  --ic-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ic-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ic-duration-fast:   150ms;
  --ic-duration-base:   250ms;
  --ic-duration-slow:   400ms;
  --ic-duration-slower: 600ms;

  /* ── Z-index ─────────────────────────────────────────────────────────────── */
  --ic-z-below:   -1;
  --ic-z-base:     0;
  --ic-z-raised:  10;
  --ic-z-header: 100;
  --ic-z-modal:  200;
  --ic-z-toast:  300;
}