/* ============================================================
   VARIABLES.CSS — Design System
   Única fuente de verdad para colores, tipografía, espaciado,
   radios, sombras, transiciones, tamaños y z-index.
   Ningún otro archivo CSS debe declarar valores "crudos":
   siempre debe consumir estas variables.
   ============================================================ */

/* ---------- Fuentes locales (@font-face) ---------- */

@font-face {
  font-family: "MinecraftTitle";
  src: url("../assets/fonts/title/Minecraft.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MinecraftTitle";
  src: url("../assets/fonts/title/Minecraft.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/body/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/body/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/body/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ---------- Color: fondos ---------- */
  --color-bg-primary: #111315;
  --color-bg-secondary: #171A1D;
  --color-bg-card: #20242A;

  /* ---------- Color: texto ---------- */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B7BDC7;
  --color-text-disabled: #7E8794;

  /* ---------- Color: marca / acento ---------- */
  --color-green: #6FAF5F;
  --color-green-hover: #86C96D;
  --color-green-dark: #4F7F48;

  /* ---------- Color: bordes ---------- */
  --color-border: rgba(255, 255, 255, 0.08);

  /* ---------- Color: iconos ---------- */
  --color-icon: var(--color-text-primary);
  --color-icon-hover: var(--color-green-hover);

  /* ---------- Tipografía: familias ---------- */
  --font-title: "MinecraftTitle", "Courier New", monospace;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---------- Tipografía: pesos ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- Tipografía: escala de tamaños ---------- */
  --fs-xs: 0.75rem;   /* 12px */
  --fs-sm: 0.875rem;  /* 14px */
  --fs-base: 1rem;    /* 16px */
  --fs-md: 1.125rem;  /* 18px */
  --fs-lg: 1.5rem;    /* 24px */
  --fs-xl: 2rem;      /* 32px */
  --fs-2xl: 2.5rem;   /* 40px */
  --fs-3xl: 3.5rem;   /* 56px */
  --fs-4xl: 4rem;     /* 64px — titular grande del Hero */

  /* ---------- Tipografía: interlineado ---------- */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ---------- Tipografía: tracking ---------- */
  --ls-wide: 0.08em; /* texto "eyebrow" en mayúsculas (NUESTRO ADDON, COMUNIDAD...) */

  /* ---------- Espaciado (sistema base 8px) ---------- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* ---------- Radios ---------- */
  --radius-button: 12px;
  --radius-card: 16px;
  --radius-input: 12px;

  /* ---------- Sombras (siempre suaves) ---------- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.25);
  --shadow-glow-green: 0 18px 36px rgba(111, 175, 95, 0.22); /* hover de botones verdes (navbar, hero, addon, community) */

  /* ---------- Bordes sutiles (separadores de sección) ---------- */
  --color-divider: rgba(255, 255, 255, 0.06); /* institutional__row / footer border-top */

  /* ---------- Icono dentro de botón (CTA Discord) ---------- */
  --btn-icon-size: 1.25rem;
  --btn-icon-inset: var(--space-sm);  /* separación del icono al borde izquierdo del botón */
  --btn-icon-gap: var(--space-xs);    /* separación entre el icono y el texto */

  /* ---------- Overlays (secciones con imagen de fondo: Hero, Comunidad) ---------- */
  --overlay-gradient: linear-gradient(180deg, rgba(17, 19, 21, 0.35) 0%, rgba(17, 19, 21, 0.92) 100%);

  /* ---------- Transiciones ---------- */
  --ease: ease;
  --transition-fast: 200ms var(--ease);
  --transition-base: 250ms var(--ease);
  --transition-slow: 300ms var(--ease);

  /* ---------- Tamaños máximos ---------- */
  --max-width-container: 1280px;
  --max-width-narrow: 720px;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-navbar: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
}