/* ============================================================================
   brand.css  —  Design tokens del rediseño (El Mexicano Unlock)
   ----------------------------------------------------------------------------
   Fase 2A · 2026-05-18
   Origen de valores: style-guide.html aprobado (Fase 1, iteración 2).

   QUÉ ES:
     Capa de DESIGN TOKENS (variables CSS). Define la paleta neutral,
     acento, semánticos, tipografía, espaciado, radios, sombras y
     movimiento, en light (default) y dark ([data-theme="dark"]).

   QUÉ **NO** ES (en esta fase):
     NO contiene reglas que apliquen los tokens a ningún selector del
     tema (body, h1-h6, .btn, .card, etc.). Por eso cargar este archivo
     NO produce ningún cambio visual: las variables quedan declaradas
     pero sin uso hasta fases posteriores.

   REGLAS RESPETADAS:
     - Cero !important · cero gradientes · cero glow · cero pulse/halo.
     - Solo declara variables en :root, [data-theme="dark"] y un
       @media (prefers-color-scheme: dark) de respaldo.

   HISTORIAL:
     v1.0 — 2026-05-18 — Fase 2A: tokens only, no styling rules.
     v1.1 — 2026-05-18 — Hotfix: TODAS las variables de este archivo
            llevan ahora el espacio de nombres "brand" (bg pasa a
            brand-bg, surface a brand-surface, text a brand-text, etc.)
            para evitar colision con dark.css y el CSS inline
            pre-existente del sitio.
   ============================================================================ */

:root{
  /* --- Escala neutral (tipo Tailwind zinc/neutral) --- */
  --brand-neutral-0:#FFFFFF;
  --brand-neutral-50:#FAFAFA;
  --brand-neutral-100:#F4F4F5;
  --brand-neutral-200:#E4E4E7;
  --brand-neutral-300:#D4D4D8;
  --brand-neutral-400:#A1A1AA;
  --brand-neutral-500:#71717A;
  --brand-neutral-600:#52525B;
  --brand-neutral-700:#3F3F46;
  --brand-neutral-800:#27272A;
  --brand-neutral-900:#18181B;
  --brand-neutral-950:#09090B;
  --brand-neutral-1000:#000000;

  /* --- Aliases semánticos de superficie / texto / borde (LIGHT) --- */
  --brand-bg:var(--brand-neutral-0);
  --brand-surface:var(--brand-neutral-50);
  --brand-surface-2:var(--brand-neutral-100);
  --brand-text:var(--brand-neutral-900);
  --brand-text-secondary:var(--brand-neutral-600);
  --brand-text-subtle:var(--brand-neutral-500);
  --brand-border:var(--brand-neutral-200);
  --brand-border-strong:var(--brand-neutral-300);
  --brand-border-subtle:var(--brand-neutral-100);

  /* --- Acento (un solo azul) --- */
  --brand-accent:#2563EB;
  --brand-accent-hover:#1D4ED8;
  --brand-accent-fg:#FFFFFF;
  --brand-accent-soft:rgba(37,99,235,.10);
  --brand-accent-badge:rgba(37,99,235,.14);

  /* --- Semánticos --- */
  --brand-success:#16A34A;
  --brand-success-soft:rgba(22,163,74,.10);
  --brand-success-badge:rgba(22,163,74,.14);
  --brand-warning:#D97706;
  --brand-warning-soft:rgba(217,119,6,.12);
  --brand-warning-badge:rgba(217,119,6,.15);
  --brand-danger:#DC2626;
  --brand-danger-soft:rgba(220,38,38,.10);
  --brand-danger-badge:rgba(220,38,38,.14);
  --brand-neutral-soft:rgba(113,113,122,.12);
  --brand-neutral-badge:rgba(113,113,122,.15);

  /* --- Púrpura (anclas de grupo / categorías) + puntos de cabecera --- */
  --brand-purple:#7C3AED;
  --brand-dot-blue:var(--brand-accent);
  --brand-dot-purple:var(--brand-purple);
  --brand-dot-green:var(--brand-success);

  /* --- Tipografía --- */
  --brand-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --brand-fs-xs:.75rem;     /* 12 */
  --brand-fs-sm:.8125rem;   /* 13 */
  --brand-fs-base:.875rem;  /* 14 */
  --brand-fs-md:.9375rem;   /* 15 */
  --brand-fs-lg:1rem;       /* 16 */
  --brand-fs-xl:1.125rem;   /* 18 */
  --brand-fs-2xl:1.25rem;   /* 20 */
  --brand-fs-3xl:1.5rem;    /* 24 */
  --brand-fs-4xl:1.875rem;  /* 30 */
  --brand-fs-5xl:2.25rem;   /* 36 */
  --brand-lh-tight:1.25;
  --brand-lh-normal:1.5;
  --brand-lh-relaxed:1.65;

  /* --- Espaciado (escala 4px disciplinada) --- */
  --brand-space-0:0;
  --brand-space-1:4px;
  --brand-space-2:8px;
  --brand-space-3:12px;
  --brand-space-4:16px;
  --brand-space-5:20px;
  --brand-space-6:24px;
  --brand-space-8:32px;
  --brand-space-10:40px;
  --brand-space-12:48px;
  --brand-space-16:64px;

  /* --- Radios --- */
  --brand-radius-sm:4px;
  --brand-radius:6px;
  --brand-radius-md:8px;
  --brand-radius-lg:12px;
  --brand-radius-pill:9999px;

  /* --- Sombras (muy sutiles, estilo Notion) --- */
  --brand-shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --brand-shadow-sm:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --brand-shadow-md:0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);

  /* --- Movimiento --- */
  --brand-transition:150ms cubic-bezier(.2,0,.2,1);

  /* --- Focus ring (rgba del acento al 40%) --- */
  --brand-ring:rgba(37,99,235,.40);
}

/* ============================================================================
   DARK MODE — override explícito ([data-theme="dark"])
   ============================================================================ */
[data-theme="dark"]{
  --brand-bg:#191919;             /* Notion exacto: ni negro puro ni azul marino */
  --brand-surface:#202020;
  --brand-surface-2:#252525;
  --brand-text:rgba(255,255,255,.95);
  --brand-text-secondary:rgba(255,255,255,.65);
  --brand-text-subtle:rgba(255,255,255,.45);
  --brand-border:rgba(255,255,255,.10);
  --brand-border-strong:rgba(255,255,255,.16);
  --brand-border-subtle:rgba(255,255,255,.06);

  --brand-accent:#3B82F6;         /* más claro en dark para contraste */
  --brand-accent-hover:#60A5FA;
  --brand-accent-fg:#0B1220;
  --brand-accent-soft:rgba(59,130,246,.16);
  --brand-accent-badge:rgba(59,130,246,.20);

  --brand-success:#22C55E;
  --brand-success-soft:rgba(34,197,94,.16);
  --brand-success-badge:rgba(34,197,94,.20);
  --brand-warning:#F59E0B;
  --brand-warning-soft:rgba(245,158,11,.16);
  --brand-warning-badge:rgba(245,158,11,.20);
  --brand-danger:#EF4444;
  --brand-danger-soft:rgba(239,68,68,.16);
  --brand-danger-badge:rgba(239,68,68,.20);
  --brand-neutral-soft:rgba(255,255,255,.10);
  --brand-neutral-badge:rgba(255,255,255,.14);

  --brand-purple:#A78BFA;
  --brand-dot-blue:var(--brand-accent);
  --brand-dot-purple:var(--brand-purple);
  --brand-dot-green:var(--brand-success);

  /* En dark: bordes sutiles en vez de sombras grandes */
  --brand-shadow-xs:0 0 0 1px rgba(255,255,255,.06);
  --brand-shadow-sm:0 0 0 1px rgba(255,255,255,.08);
  --brand-shadow-md:0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.30);

  --brand-ring:rgba(59,130,246,.50);
}

/* ============================================================================
   RESPALDO POR PREFERENCIA DEL SISTEMA
   Si el motor nativo de Dhru NO setea data-theme (o lo deja en "dark"),
   y el SO prefiere oscuro, aplicamos los mismos overrides. Si hay
   data-theme="light" explícito, se respeta light (gana la elección del
   usuario sobre la del sistema).
   ============================================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-bg:#191919;
    --brand-surface:#202020;
    --brand-surface-2:#252525;
    --brand-text:rgba(255,255,255,.95);
    --brand-text-secondary:rgba(255,255,255,.65);
    --brand-text-subtle:rgba(255,255,255,.45);
    --brand-border:rgba(255,255,255,.10);
    --brand-border-strong:rgba(255,255,255,.16);
    --brand-border-subtle:rgba(255,255,255,.06);

    --brand-accent:#3B82F6;
    --brand-accent-hover:#60A5FA;
    --brand-accent-fg:#0B1220;
    --brand-accent-soft:rgba(59,130,246,.16);
    --brand-accent-badge:rgba(59,130,246,.20);

    --brand-success:#22C55E;
    --brand-success-soft:rgba(34,197,94,.16);
    --brand-success-badge:rgba(34,197,94,.20);
    --brand-warning:#F59E0B;
    --brand-warning-soft:rgba(245,158,11,.16);
    --brand-warning-badge:rgba(245,158,11,.20);
    --brand-danger:#EF4444;
    --brand-danger-soft:rgba(239,68,68,.16);
    --brand-danger-badge:rgba(239,68,68,.20);
    --brand-neutral-soft:rgba(255,255,255,.10);
    --brand-neutral-badge:rgba(255,255,255,.14);

    --brand-purple:#A78BFA;
    --brand-dot-blue:var(--brand-accent);
    --brand-dot-purple:var(--brand-purple);
    --brand-dot-green:var(--brand-success);

    --brand-shadow-xs:0 0 0 1px rgba(255,255,255,.06);
    --brand-shadow-sm:0 0 0 1px rgba(255,255,255,.08);
    --brand-shadow-md:0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(0,0,0,.30);

    --brand-ring:rgba(59,130,246,.50);
  }
}

/* brand.css — v1.1 — 2026-05-18 — Fase 2A · Hotfix: variables con namespace brand (anti-colision) */