/**
 * KREATIF — Design System (Bauhaus)
 * Paleta: 6 colores | Mín. 3 en uso
 * Grid base: 8px | 60% neutros / 30% dominante / 10% acentos
 */

:root {
  /* === PALETA (asignada) === */
  --color-red:     #ee3129;   /* Primario: acciones */
  --color-yellow:  #f8bd07;   /* Acento */
  --color-blue:    #1087ce;   /* Acento */
  --color-green:   #2ea05e;   /* Acento */
  --color-navy:    #153f59;   /* Dominante: estructura */
  --color-orange:  #ef9011;   /* Acento */

  /* === ROLES === */
  /* Dominante — estructura (bordes, header, footer, bloques de soporte) */
  --color-dominant: var(--color-navy);
  /* Primario — acciones (botones CTA, enlaces, overlays) */
  --color-primary: var(--color-red);
  /* Acentos — elementos geométricos y secciones */
  --color-accent-1: var(--color-yellow);
  --color-accent-2: var(--color-blue);
  --color-accent-3: var(--color-green);
  --color-accent-4: var(--color-orange);

  /* Neutros (60%) */
  --color-black:   #1a1a1a;
  --color-white:   #fcfbf9;
  --bg-base:       #f6f5f2;
  --bg-alt:        #fcfbf9;
  --border-subtle: #e5e3df;
  --text-primary:   var(--color-black);
  --text-secondary: #3d3d3d;
  --text-muted:     #6b6b6b;

  /* Bordes (estructura = dominante) */
  --border-thin: 2px solid var(--color-dominant);

  /* === TIPOGRAFÍA === */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;

  --text-hero: clamp(2.5rem, 5vw, 4rem);
  --text-h1: clamp(2rem, 4vw, 3rem);
  --text-h2: clamp(1.5rem, 3vw, 2.25rem);
  --text-h3: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;

  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-regular: 400;

  /* === ESPACIADO (grid 8px) === */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* === LAYOUT === */
  --container-max: 1200px;
  --container-narrow: 800px;
  --radius-none: 0;
  --transition-base: 0.25s ease;
}