/* ==========================================================================
   DUM v4 — Design tokens (fuente: Figma "De Ultimo Minuto (Copy)", HandOff 21/08/2026)
   Documentación: docs/02-design-system-figma.md
   ========================================================================== */

:root {
  /* --- Color: marca ------------------------------------------------------- */
  --dum-primary: #A80000;          /* Color Primario: acentos, botones, hashtags */
  --dum-primary-hover: #8A0000;
  --dum-black: #161616;            /* Negro Primario */
  --dum-gray: #525252;             /* Gris Primario: subtítulos, metadatos */
  --dum-gray-disabled: #8D8D8D;    /* Gris Deshabilitado */
  --dum-border: #C6C6C6;           /* Divider default */
  --dum-border-subtle: #E0E0E0;    /* Líneas finas */
  --dum-white: #FFFFFF;
  --dum-white-soft: #E0E0E0;       /* "Dark White": texto sobre fondos oscuros */
  --dum-hash: #DA1E28;             /* "#" de la etiqueta de categoría en cards (Section-Format/Subtitle) */

  /* --- Color: semánticos (cambian en dark) -------------------------------- */
  --dum-bg: #FFFFFF;
  --dum-bg-subtle: #F4F4F4;
  --dum-bg-band: #E8E8E8;          /* banda de Opinión (Layer/$layer-hover-01) */
  --dum-bg-inverse: #161616;       /* header oscuro, footer */
  --dum-text: var(--dum-black);
  --dum-text-body: #000000;        /* cuerpo y meta del post (Figma Post: #000) */
  --dum-text-muted: var(--dum-gray);
  --dum-text-inverse: var(--dum-white-soft);
  --dum-link: var(--dum-black);
  --dum-link-hover: var(--dum-primary);
  --dum-divider: var(--dum-border);
  --dum-field-bg: var(--dum-bg-subtle);

  /* --- Tags (Carbon) ------------------------------------------------------ */
  --dum-tag-red-bg: #FFD7D9;   --dum-tag-red-text: #A2191F;
  --dum-tag-blue-bg: #D0E2FF;  --dum-tag-blue-text: #0043CE;
  --dum-tag-green-bg: #A7F0BA; --dum-tag-green-text: #0E6027;
  --dum-tag-gray-bg: #E0E0E0;  --dum-tag-gray-text: #161616;

  /* --- Tipografía --------------------------------------------------------- */
  /* Titulares: DM Serif Text según los estilos de Figma. Si diseño confirma
     DM Serif Display, cambiar SOLO esta línea (ambas fuentes están cargadas). */
  --dum-font-serif: "DM Serif Text", "DM Serif Display", Georgia, "Times New Roman", serif;
  --dum-font-body: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --dum-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --dum-fs-h1: 64px;  --dum-lh-h1: 1.1;  --dum-ls-h1: 0.5px;
  --dum-fs-h2: 36px;  --dum-lh-h2: 1.2;
  --dum-fs-h3: 32px;  --dum-lh-h3: 1.3;
  --dum-fs-h4: 28px;  --dum-lh-h4: 1.2;
  --dum-fs-body: 20px; --dum-lh-body: 1.4; --dum-ls-body: 0.3px;
  --dum-fs-quote: 22px;
  --dum-fs-label: 16px; --dum-lh-label: 1.4; --dum-ls-label: 0.25px;
  --dum-fs-label-sm: 14px;
  --dum-fs-label-lg: 20px;

  /* --- Layout ------------------------------------------------------------- */
  --dum-content-width: 1376px;   /* 1440 − 2×32 */
  --dum-margin: 32px;
  --dum-gutter: 36px;
  --dum-gutter-mobile: 24px;
  --dum-main-col: 1023px;
  --dum-sidebar: 317px;
  --dum-divider-w: 4px;
  --dum-header-h: 297px;
  --dum-sections-h: 48px;
  --dum-header-h-mobile: 64px;

  /* --- Misc --------------------------------------------------------------- */
  --dum-radius: 0px;             /* Carbon/DUM: esquinas rectas */
  --dum-transition: 160ms ease;
  --dum-ad-bg: var(--dum-bg-subtle);
}

/* Escala tipográfica en tablet/móvil (propuesta, pendiente de validar con diseño) */
@media (max-width: 1024px) {
  :root {
    --dum-fs-h1: 44px; --dum-fs-h2: 30px; --dum-fs-h3: 26px; --dum-fs-h4: 24px;
    --dum-fs-body: 18px;
  }
}
@media (max-width: 767px) {
  :root {
    --dum-fs-h1: 36px; --dum-fs-h2: 28px; --dum-fs-h3: 24px; --dum-fs-h4: 22px;
    --dum-fs-body: 17px; --dum-fs-quote: 20px;
    --dum-margin: 32px; --dum-gutter: var(--dum-gutter-mobile);
  }
}

/* ==========================================================================
   Modo oscuro (html[data-theme="dark"], lo fija assets/js/dark-mode.js)
   ========================================================================== */
html[data-theme="dark"] {
  --dum-bg: #161616;               /* Carbon Gray 100 */
  --dum-bg-subtle: #262626;        /* Gray 90: cards, bloques */
  --dum-bg-band: #262626;
  --dum-bg-inverse: #000000;
  --dum-text: #F4F4F4;
  --dum-text-body: #F4F4F4;
  --dum-text-muted: #A8A8A8;       /* Section-Format/Dark: nombre de categoría */
  --dum-text-inverse: #161616;
  --dum-link: #F4F4F4;
  --dum-link-hover: #FF4D4D;
  --dum-border: #393939;           /* Gray 80 */
  --dum-border-subtle: #2D2D2D;    /* Divider oscuro (HandOff) */
  --dum-divider: #2D2D2D;
  --dum-field-bg: #262626;
  --dum-ad-bg: #262626;
  color-scheme: dark;
}