/* =====================================================
   TOKENS DE DISEÑO — MODO CLARO / OSCURO

   Variables CSS (custom properties) compartidas por todas las
   páginas del sitio. El bloque :root define el tema claro y
   :root[data-theme="dark"] sobreescribe los mismos nombres para
   el tema oscuro. El atributo data-theme lo controla js/modules/theme.js.
===================================================== */
/* ============ SISTEMA DE TOKENS — CLARO / OSCURO ============ */
        :root {
          color-scheme: light;
          --bg: #FBF3EB;
          --bg-rgb: 251, 243, 235;
          --surface: #FFFFFF;
          --surface-rgb: 255, 255, 255;
          --panel: #232130;
          --text: #26242B;
          --text-soft: #46424C;
          --text-muted: #6C6770;
          --text-faint: #9A939C;
          --border: #F2E6DA;
          --border-warm: #F6DDCB;
          --border-hover: #F5CBAE;
          --border-dash: #F0D9C6;
          --accent: #F4571F;
          --accent-deep: #D9440F;
          --accent-hover: #E04A14;
          --accent-rgb: 244, 87, 31;
          --shadow-rgb: 38, 36, 43;
          --tint-a: #FDF4EC;
          --tint-b: #FBEDE0;
          --chip-a: #FFF7F0;
          --chip-b: #FDEBDD;
          --grid-line: rgba(38, 36, 43, 0.05);
          --dot: rgba(38, 36, 43, 0.055);
          --ambient-1: rgba(244, 87, 31, 0.11);
          --ambient-2: rgba(244, 87, 31, 0.06);
          --hairline: rgba(38, 36, 43, 0.08);
          /* Cards */
          --card-bg: #FFFFFF;
          --card-bd: #ECDFCF;
          --card-sh: 0 1px 2px rgba(38, 36, 43, 0.04), 0 18px 42px -26px rgba(38, 36, 43, 0.14);
          --card-sh-h: 0 30px 62px -22px rgba(244, 87, 31, 0.26);
          --media-bg: linear-gradient(168deg, #FDF5ED 0%, #F8EADB 100%);
          --media-bd: #F1E3D3;
        }


:root[data-theme="dark"] {
          color-scheme: dark;
          --bg: #0C0B10;
          --bg-rgb: 12, 11, 16;
          --surface: #151419;
          --surface-rgb: 21, 20, 25;
          --panel: #17161E;
          --text: #F4F2F8;
          --text-soft: #CFCAD8;
          --text-muted: #9C97A6;
          --text-faint: #6C6777;
          --border: rgba(255, 255, 255, 0.08);
          --border-warm: rgba(255, 106, 60, 0.22);
          --border-hover: rgba(255, 106, 60, 0.5);
          --border-dash: rgba(255, 255, 255, 0.11);
          --accent: #FF6A3C;
          --accent-deep: #E24E18;
          --accent-hover: #FF7E54;
          --accent-rgb: 255, 106, 60;
          --shadow-rgb: 0, 0, 0;
          --tint-a: #1B1A22;
          --tint-b: #151420;
          --chip-a: #221D25;
          --chip-b: #191621;
          --grid-line: rgba(255, 255, 255, 0.04);
          --dot: rgba(255, 255, 255, 0.05);
          --ambient-1: rgba(255, 106, 60, 0.16);
          --ambient-2: rgba(110, 80, 255, 0.06);
          --hairline: rgba(255, 255, 255, 0.09);
          /* Cards */
          --card-bg: #1A1922;
          --card-bd: rgba(255, 255, 255, 0.10);
          --card-sh: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 56px -26px rgba(0, 0, 0, 0.72);
          --card-sh-h: 0 32px 70px -20px rgba(255, 106, 60, 0.34);
          --media-bg: linear-gradient(168deg, #FBF1E7 0%, #F2E2D2 100%);
          --media-bd: rgba(255, 255, 255, 0.06);
        }