/*
 * Design tokens del rebuild — paleta, tipografia y espaciado.
 * Ver design_tokens.md para el detalle y la metodologia de extraccion.
 * Cargar despues del <link> de Google Fonts (ver font_replacement_map.md).
 */

:root {
  /* --- Color: base --- */
  --color-base-1: #FDFCF0;   /* crema / fondo principal */
  --color-base-2: #1A1A1A;   /* casi negro / texto principal */
  --color-accent-1: #E85D04; /* naranja quemado / marca-CTA */
  --color-accent-2: #005F73; /* teal oscuro */
  --color-accent-3: #94D2BD; /* verde menta */
  --color-accent-4: #EE9B00; /* ambar/dorado */
  --color-shade-1: #F4F3E1;  /* crema secundario */
  --color-shade-2: #D9D8C5;  /* beige grisaceo */
  --color-shade-3: #4D4D4D;  /* gris oscuro */
  --color-alert: #E98316;
  --color-error: #D82222;
  --color-success: #489F48;

  /* --- Color: roles semanticos --- */
  --color-bg-primary: var(--color-base-1);
  --color-bg-secondary: var(--color-shade-1);
  --color-heading: var(--color-base-2);
  --color-paragraph: var(--color-base-2);
  --color-link: var(--color-accent-1);
  --color-disabled: var(--color-shade-2);

  --btn-primary-bg: var(--color-accent-1);
  --btn-primary-text: var(--color-base-1);
  --btn-primary-border: var(--color-base-2);

  --btn-secondary-bg: var(--color-base-1);
  --btn-secondary-text: var(--color-accent-1);
  --btn-secondary-border: var(--color-accent-1);

  --btn-tertiary-bg: transparent;
  --btn-tertiary-text: var(--color-accent-1);
  --btn-tertiary-border: transparent;

  --box-primary-bg: var(--color-shade-1);
  --box-primary-border: var(--color-base-2);
  --box-secondary-bg: var(--color-base-1);
  --box-secondary-border: var(--color-base-2);

  /* --- Tipografia: fuentes (ver typography.css para font-family completo) --- */
  --font-heading: 'Inter', sans-serif;
  --font-heading-weight: 700;
  --font-nav: 'Poppins', sans-serif;
  --font-nav-weight: 400;
  --font-body: 'Lato', sans-serif;
  --font-body-weight: 400;
  --font-fallback: 'Inter', sans-serif;
  --font-fallback-weight: 400;
  --font-fallback-weight-medium: 500;

  /* --- Tipografia: escala de tamanos (desktop ~1280px / mobile ~390px) --- */
  --fs-h1: clamp(34px, 6.5vw, 84px);
  --fs-h2: clamp(30px, 5vw, 64px);
  --fs-h3: clamp(28px, 3.75vw, 48px);
  --fs-h4: clamp(24px, 2.5vw, 32px);
  --fs-h5: clamp(20px, 1.9vw, 24px);
  --fs-h6: clamp(16px, 1.4vw, 18px);
  --fs-paragraph-1: clamp(16px, 1.4vw, 18px);
  --fs-paragraph-2: 16px;
  --fs-paragraph-3: 14px;

  /* --- Espaciado: escala fija de 8px (simplificada respecto al sistema
     fluido de Wix, ver design_tokens.md para el detalle de por que) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* --- Border-radius: 0 en todo el sitio, sin excepciones --- */
  --radius: 0px;
}

/* --- Aplicacion base de tipografia --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-heading);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

body, p {
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: var(--fs-paragraph-2);
  color: var(--color-paragraph);
}
body {
  background-color: var(--color-bg-primary);
}

nav .menu-item, .navbar-item, .nav-link {
  font-family: var(--font-nav);
  font-weight: var(--font-nav-weight);
}

a { color: var(--color-link); }

.btn-primary {
  font-family: var(--font-body);
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  border-radius: var(--radius);
}
.btn-secondary {
  font-family: var(--font-body);
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius);
}
.btn-tertiary {
  font-family: var(--font-body);
  background-color: var(--btn-tertiary-bg);
  color: var(--btn-tertiary-text);
  border: 1px solid var(--btn-tertiary-border);
  border-radius: var(--radius);
}

.box-primary {
  background-color: var(--box-primary-bg);
  border: 1px solid var(--box-primary-border);
  border-radius: var(--radius);
}
.box-secondary {
  background-color: var(--box-secondary-bg);
  border: 1px solid var(--box-secondary-border);
  border-radius: var(--radius);
}

.dropdown-item, .submenu-item {
  font-family: var(--font-fallback);
  font-weight: var(--font-fallback-weight);
}
.dropdown-item:hover,
.dropdown-item.selected {
  font-weight: var(--font-fallback-weight-medium);
}