/**
 * Variables del Tema Limited
 * Paleta: lujo cálido (dorados, bronces y crema)
 * Tipografía 100% serif: Neutrif (titulares + texto corrido).
 *
 * Las @font-face de Neutrif se declaran en guide-styles.css
 * y se sirven desde dist/assets/fonts/ como woff2.
 *
 * Sobrescribe los tokens de color base de holygrailcss (--hg-color-*)
 * y los tokens de tipografía (--hg-typo-font-family-*) para aplicar
 * el look & feel del tema sin tocar config.json.
 */

:root {
  /* ─────────────────────────────────────────────
     Overrides de tokens base holygrailcss (colores)
     Estos valores prevalecen sobre config.json y
     actualizan automáticamente los componentVars
     que apuntan con var(--hg-color-*).
     ───────────────────────────────────────────── */
  --hg-color-primary: #1D1D1D;
  --hg-color-feel: #A38A6B;
  --hg-color-feel-dark: #7A6346;
  --hg-color-error: #9B2A1E;
  --hg-color-success: #7A8D5F;
  --hg-color-warning: #D4A84B;
  --hg-color-info: #5B7FA1;
  --hg-color-bg-light: #F4F2ED;
  --hg-color-bg-cream: #F4F2ED;

  /* ─────────────────────────────────────────────
     Overrides de tipografía del tema (100% serif)
     Neutrif → titulares y texto corrido
     ───────────────────────────────────────────── */
  --hg-typo-font-family-primary-light: "neutrif-regular", Georgia, "Times New Roman", serif;
  --hg-typo-font-family-primary-regular: "neutrif-regular", Georgia, "Times New Roman", serif;
  --hg-typo-font-family-primary-bold: "neutrif-bold", Georgia, "Times New Roman", serif;
  --hg-typo-font-family-secondary: "neutrif-medium", Georgia, "Times New Roman", serif;

  /* ─────────────────────────────────────────────
     Variables del tema (mapeo a los tokens base)
     ───────────────────────────────────────────── */
  --btn-primary-bg: var(--hg-color-primary);
  --btn-primary-color: var(--hg-color-white);
  --btn-primary-hover-bg: var(--hg-color-feel-dark);

  --btn-secondary-bg: var(--hg-color-feel);
  --btn-secondary-color: var(--hg-color-white);
  --btn-secondary-hover-bg: var(--hg-color-feel-dark);

  --btn-outline-border: var(--hg-color-feel-dark);
  --btn-outline-color: var(--hg-color-feel-dark);
  --btn-outline-hover-bg: var(--hg-color-feel-dark);
  --btn-outline-hover-color: var(--hg-color-white);

  --btn-ghost-color: var(--hg-color-primary);
  --btn-ghost-hover-bg: var(--hg-color-bg-cream);

  --btn-feel-bg: var(--hg-color-feel);
  --btn-feel-color: var(--hg-color-white);
  --btn-feel-hover-bg: var(--hg-color-feel-dark);

  --input-border: var(--hg-color-middle-grey);
  --input-border-focus: var(--hg-color-feel-dark);
  --input-bg: var(--hg-color-white);
  --input-color: var(--hg-color-primary);
  --input-placeholder: var(--hg-color-middle-grey);

  --input-error-border: var(--hg-color-error);
  --input-success-border: var(--hg-color-success);
  --input-warning-border: var(--hg-color-warning);

  --label-color: var(--hg-color-primary);
  --label-required: var(--hg-color-error);

  --checkbox-bg: var(--hg-color-white);
  --checkbox-border: var(--hg-color-middle-grey);
  --checkbox-checked-bg: var(--hg-color-feel-dark);
  --checkbox-checked-border: var(--hg-color-feel-dark);

  --radio-bg: var(--hg-color-white);
  --radio-border: var(--hg-color-middle-grey);
  --radio-checked-bg: var(--hg-color-feel-dark);
  --radio-checked-border: var(--hg-color-feel-dark);

  --switch-bg: var(--hg-color-middle-grey);
  --switch-active-bg: var(--hg-color-feel);
  --switch-thumb: var(--hg-color-white);

  /* Espaciados - usando variables de holygrailcss */
  --btn-padding-x-sm: var(--hg-spacing-12);
  --btn-padding-y-sm: var(--hg-spacing-8);

  --btn-padding-x-lg: var(--hg-spacing-24);
  --btn-padding-y-lg: var(--hg-spacing-16);

  --input-padding-x: var(--hg-spacing-16);
  --input-padding-y: var(--hg-spacing-12);
  --input-gap: var(--hg-spacing-8);

  --form-group-gap: var(--hg-spacing-16);

  /* Bordes y radios */
  --border-radius: 0;
  --border-width: 1px;
  --border-style: solid;

  /* Transiciones */
  --transition: all 0.3s ease;
}

/* ─────────────────────────────────────────────
   Refuerzo tipográfico: titulares en Neutrif
   ───────────────────────────────────────────── */
.demo-container h1,
.demo-container h2,
.demo-container .demo-title,
.demo-container .hg-vars-section__title {
  font-family: var(--hg-typo-font-family-secondary);
  font-weight: 600;
  letter-spacing: 0.01em;
}