/**
 * KIRMA — Tecnología que renace.
 * Sistema de Variables de Diseño (Design Tokens).
 * Paleta sobria: Verde KIRMA, Marrón/Tierra, Blanco/Crema, Carbón.
 */

:root {
  /* Verde KIRMA (Identidad, acentos y señalización clave) */
  --kirma-green-900: #0b261b;
  --kirma-green-800: #123d2c;
  --kirma-green-700: #164e39; /* Verde KIRMA Principal */
  --kirma-green-600: #1f6b4e;
  --kirma-green-500: #2a8a65;
  --kirma-green-400: #42a980;
  --kirma-green-100: #e7f3ed;
  --kirma-green-50:  #f2f8f5;

  /* Marrón / Tierra (Durabilidad, materia, tags de inventario) */
  --kirma-earth-900: #3b2413;
  --kirma-earth-800: #52331b;
  --kirma-earth-700: #6e4626; /* Tierra KIRMA */
  --kirma-earth-600: #8b5b33;
  --kirma-earth-500: #ab7345;
  --kirma-earth-100: #f4ece4;
  --kirma-earth-50:  #faf6f2;

  /* Blanco / Crema (Fondos principales y texturas de papel técnico) */
  --kirma-bg-main:    #fbfbfa; /* Blanco roto editorial */
  --kirma-bg-surface: #ffffff; /* Blanco puro para tarjetas */
  --kirma-bg-cream:   #f4f1ea; /* Crema suave para bloques */
  --kirma-bg-subtle:  #eae6dc; /* Crema más oscuro para contraste */

  /* Carbón / Negro Suave (Texto legible y contraste) */
  --kirma-text-main:   #171918; /* Carbón profundo */
  --kirma-text-body:   #2e3330; /* Texto de párrafo descansado */
  --kirma-text-muted:  #5e6661; /* Texto secundario */
  --kirma-text-subtle: #87918b; /* Placeholders y anotaciones */

  /* Bordes y Líneas Técnicas */
  --kirma-border-subtle: #e5e1d7;
  --kirma-border-main:   #d3cebf;
  --kirma-border-dark:   #9ea39d;
  --kirma-border-green:  #164e39;

  /* WhatsApp Oficial */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #128c7e;
  --color-whatsapp-hover: #1ebd5a;

  /* Tipografías */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Roboto Mono", "Courier New", monospace;
  --font-editorial: "Newsreader", "Charter", "Georgia", serif;

  /* Sombras sobrias y sutiles (sin excesos) */
  --shadow-sm: 0 1px 2px rgba(23, 25, 24, 0.04), 0 1px 3px rgba(23, 25, 24, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(23, 25, 24, 0.06), 0 2px 4px -1px rgba(23, 25, 24, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(23, 25, 24, 0.08), 0 4px 6px -2px rgba(23, 25, 24, 0.04);

  /* Radios de borde (sobrios, industriales, nada hiper-redondeado) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Transiciones precisas */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}