/* ============================================================
   GRUPO KELTIA · Design Tokens (paleta + tipografía + radios)
   Importar al inicio del CSS principal: @import "tokens.css";
   ============================================================ */

:root {
  /* ----- Marca (derivados del logo) ----- */
  --keltia-musgo:          #889770;  /* primario · fondo signature, identidad */
  --keltia-musgo-oscuro:   #575E3A;  /* acento oliva profundo · botones, links, CTAs */
  --keltia-musgo-claro:    #a8b58f;  /* hover sobre musgo, decorativo */
  --keltia-negro:          #0a0a0a;  /* contornos, headings sobre claro */

  /* ----- Fondos cálidos (papel/cal) ----- */
  --keltia-crema:          #eeece0;  /* fondo principal claro */
  --keltia-crema-suave:    #faf6ed;  /* fondo alternativo, cards */
  --keltia-arena:          #e8d9b8;  /* acento neutro cálido, separadores */

  /* ----- Acento cálido opcional (ladrillo/terracota) ----- */
  --keltia-terracota:      #b06a4a;  /* CTA secundario · usar con moderación */
  --keltia-terracota-claro:#d49579;  /* hover terracota */

  /* ----- Neutros UI ----- */
  --keltia-pizarra:        #2a313d;  /* texto cuerpo */
  --keltia-gris-medio:     #5a6573;  /* texto muted, captions, metadata */
  --keltia-gris-claro:     #c8ccd2;  /* borders, dividers */
  --keltia-blanco:         #ffffff;  /* surfaces puras */

  /* ----- Estados (para formularios y feedback) ----- */
  --keltia-exito:          #6b8e4e;
  --keltia-aviso:          #d4a04a;
  --keltia-error:          #b04a4a;

  /* ============================================================
     Roles semánticos (preferir estos en componentes)
     ============================================================ */
  --color-bg:              var(--keltia-crema);
  --color-bg-alt:          var(--keltia-crema-suave);
  --color-surface:         var(--keltia-blanco);
  --color-brand:           var(--keltia-musgo);
  --color-brand-deep:      var(--keltia-musgo-oscuro);
  --color-text:            var(--keltia-pizarra);
  --color-text-muted:      var(--keltia-gris-medio);
  --color-text-on-brand:   var(--keltia-crema);
  --color-border:          var(--keltia-gris-claro);
  --color-accent:          var(--keltia-terracota);

  /* ----- Tipografía ----- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;          /* títulos, wordmark */
  --font-body:    'Inter', -apple-system, 'Segoe UI', Helvetica, sans-serif; /* texto general */

  /* ----- Tamaños base ----- */
  --fs-display:  clamp(2.4rem, 4.2vw, 3.6rem);   /* H1 */
  --fs-h2:       clamp(1.8rem, 2.8vw, 2.4rem);
  --fs-h3:       1.35rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;

  /* ----- Radios y sombras ----- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 2px 6px rgba(10,10,10,0.06);
  --shadow-md: 0 6px 18px rgba(10,10,10,0.08);
  --shadow-lg: 0 14px 32px rgba(10,10,10,0.12);

  /* ----- Espaciados ----- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.6rem;
  --space-lg: 2.4rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
}