/* ============================================================
   Helvena — Brand Typeface
   Self-hosted, single family with the full weight range.
   ============================================================ */

@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Extralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Extrabold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvena";
  src: url("fonts/Helvena-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Foriene Serif — Tipografía secundaria (editorial / display)
   ============================================================ */

@font-face {
  font-family: "Foriene Serif";
  src: url("fonts/The Foriene Serif - Regular.woff2") format("woff2"),
       url("fonts/The Foriene Serif - Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Foriene Serif";
  src: url("fonts/The Foriene Serif - Italic.woff2") format("woff2"),
       url("fonts/The Foriene Serif - Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Design Tokens
   ============================================================ */

:root {
  /* Type families */
  --font-sans:  "Helvena", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Foriene Serif", Georgia, "Times New Roman", serif;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;

  /* Weights */
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ----------------------------------------------------------
     BORNEO — Brand Palette (oficial)
     Minimalismo cálido · color plano por bloques · sin azul
     ---------------------------------------------------------- */

  /* Core brand */
  --borneo-black:  #222221;  /* Negro */
  --borneo-cream:  #fff6eb;  /* Crema */
  --borneo-green:  #c0e2a1;  /* Verde */
  --borneo-pink:   #f7c4df;  /* Rosa */
  --borneo-peach:  #ff9e66;  /* Naranja / Durazno */
  --borneo-brown:  #a85a38;  /* Café */

  /* Black — derived tints for UI depth */
  --black-900: #222221;
  --black-700: #3a3937;
  --black-500: #6b6964;
  --black-300: #a8a59e;
  --black-100: #d9d6cf;

  /* Cream — surface tints */
  --cream-50:  #fffcf7;
  --cream-100: #fff6eb;
  --cream-200: #f7ecdc;
  --cream-300: #ece0cd;

  /* Brown — derived */
  --brown-700: #7e4127;
  --brown-500: #a85a38;
  --brown-300: #c98a6c;
  --brown-100: #e8d0c4;

  /* ----------------------------------------------------------
     Semantic tokens (modo claro)
     ---------------------------------------------------------- */
  --color-ink:      var(--borneo-black);   /* texto principal */
  --color-body:     #4a4844;               /* texto cuerpo */
  --color-muted:    #8c897f;               /* texto secundario */
  --color-line:     #ece4d8;               /* bordes / divisores */
  --color-surface:  var(--borneo-cream);   /* fondo base */
  --color-card:     #fffcf7;               /* tarjetas */
  --color-canvas:   #f7ecdc;               /* fondo alterno */

  /* Accent — Café como acento primario de marca */
  --color-accent:        var(--borneo-brown);
  --color-accent-ink:    var(--cream-50);
  --color-accent-soft:   var(--brown-100);

  /* Color por bloques (decorativo / categorías) */
  --block-green: var(--borneo-green);
  --block-pink:  var(--borneo-pink);
  --block-peach: var(--borneo-peach);
  --block-brown: var(--borneo-brown);
}

body {
  font-family: var(--font-sans);
  color: var(--color-body);
  background: var(--color-surface);
}