/* ARCA del Tormes — tokens del catálogo público.
   ============================================================================
   Este es el ÚNICO fichero de este directorio que declara valores nuevos
   (color, tipografía, espaciado, radio, sombra). Todo lo demás los consume
   por variable, nunca por valor suelto.

   Hermano de `validacion/theme/arca-tokens.css` (el sistema del panel
   interno), no una copia: misma disciplina -- capa primitiva → capa
   semántica, contraste verificado por escrito, modo oscuro completo,
   escala de espaciado de 4px -- pero con la paleta propia del catálogo
   público (navy/dorado/crema editorial), que es una identidad distinta y
   deliberadamente no comparte color con el panel interno (azul corporativo).

   Aprobado como boceto visual antes de escribir este fichero:
   https://claude.ai/code/artifact/c16e9fbb-136e-4e17-a80f-746738a937ac

   Fase 2 del plan de theme (docs/THEME-ARCA.md). En esta fase el fichero
   solo se declara y se carga: ningún componente existente lo consume
   todavía -- eso es la Fase 5, componente a componente, verificado cada
   vez. Cero cambio visual al añadir este fichero por sí solo.
   ============================================================================ */

@layer tokens {

:root {
  /* ── Capa primitiva — los mismos valores que ya usa hoy catalogo.css,
     reordenados con nombres de escala, no colores nuevos inventados. ── */
  --cat2-ink-900: #15252e;
  --cat2-ink-700: #40535d;
  --cat2-ink-500: #6b5c46;
  --cat2-paper-050: #fffdf8;
  --cat2-paper-100: #f5f1e8;
  --cat2-paper-200: #e8e1d3;
  --cat2-line-200: #d8d0c1;
  --cat2-navy-700: #244e63;
  --cat2-navy-900: #173746;
  --cat2-gold-300: #f2c45d;
  --cat2-gold-500: #b98a3c;
  --cat2-gold-700: #8a662a;
  --cat2-red-600: #8e242b;
  --cat2-red-800: #6f171d;

  /* ── Capa semántica — nombra el uso, no el valor. ── */
  --cat2-color-bg: var(--cat2-paper-100);
  --cat2-color-surface: var(--cat2-paper-050);
  --cat2-color-surface-alt: var(--cat2-paper-200);
  --cat2-color-border: var(--cat2-line-200);
  --cat2-color-border-focus: var(--cat2-gold-500);
  --cat2-color-text-primary: var(--cat2-ink-900);
  --cat2-color-text-secondary: var(--cat2-ink-700);
  --cat2-color-text-muted: var(--cat2-ink-500);
  --cat2-color-text-inverse: #ffffff;
  --cat2-color-accent: var(--cat2-navy-900);
  --cat2-color-accent-alt: var(--cat2-gold-500);
  --cat2-color-link: var(--cat2-navy-900);
  --cat2-color-critical: var(--cat2-red-800);

  /* Regla escrita, no supuesta: gold-500 sobre navy-900 da 4,05:1 y falla
     el mínimo AA (4,5:1) para texto normal -- medido con la fórmula WCAG
     real, no a ojo. gold-300 en el mismo fondo da 7,68:1. Mismo patrón que
     --color-blue-200 en arca-tokens.css, marcado ahí "SOLO decorativo". */
  --cat2-color-accent-alt-on-dark: var(--cat2-gold-300);
  /* --cat2-color-accent-alt (gold-500) es SOLO decorativo sobre fondo
     navy -- bordes, iconos, filetes -- nunca texto normal. Para texto
     sobre navy, usar --cat2-color-accent-alt-on-dark. */

  /* ── Tipografía — misma letra que ya tiene el sitio, escala nueva. ── */
  --cat2-serif: var(--cat-serif, Cambria, Georgia, serif);
  --cat2-sans: var(--cat-sans, "Atkinson Hyperlegible", Arial, sans-serif);

  /* 8 pasos, recorrido asimétrico: los pasos altos se comprimen mucho al
     bajar a móvil y los bajos casi nada, para que un título y un cuerpo de
     texto no midan casi lo mismo en pantalla pequeña -- el problema medido
     en la ficha de territorio (h2 26,1px vs cabecera de acordeón 16,27px
     vs párrafo 16px, en el mismo ancho). */
  --cat2-text-000: clamp(0.688rem, 0.67rem + 0.08vw, 0.75rem);   /* referencias, notas al pie */
  --cat2-text-00:  clamp(0.75rem, 0.73rem + 0.09vw, 0.813rem);   /* kickers, pastillas */
  --cat2-text-0:   clamp(0.875rem, 0.86rem + 0.07vw, 0.906rem);  /* metadatos, direcciones */
  --cat2-text-1:   1rem;                                          /* cuerpo -- fijo, nunca baja de 16px */
  --cat2-text-2:   clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);    /* título de tarjeta */
  --cat2-text-3:   clamp(1.313rem, 1.15rem + 0.7vw, 1.6rem);     /* cabecera de acordeón, h3 */
  --cat2-text-4:   clamp(1.625rem, 1.2rem + 1.8vw, 2.4rem);      /* h2 de sección */
  --cat2-text-5:   clamp(2rem, 1.3rem + 3vw, 3.2rem);            /* h1 de página */

  /* ── Espaciado — rejilla de 4px, misma escala que arca-tokens.css
     (--space-*), sin proponérselo: confirma que es la unidad correcta
     para este proyecto, no una coincidencia que haya que forzar. ── */
  --cat2-space-1: 0.25rem;
  --cat2-space-2: 0.5rem;
  --cat2-space-3: 0.75rem;
  --cat2-space-4: 1rem;
  --cat2-space-5: 1.25rem;
  --cat2-space-6: 1.5rem;
  --cat2-space-8: 2rem;
  --cat2-space-10: 2.5rem;
  --cat2-space-12: 3rem;

  --cat2-radius-sm: 6px;
  --cat2-radius-md: 10px;
  --cat2-radius-lg: 12px;

  --cat2-shadow-card: 0 2px 8px rgb(18 46 59 / 7%);
  --cat2-shadow-lift: 0 10px 22px rgb(18 46 59 / 16%);
}

/* ── Modo oscuro — el catálogo público no tenía ni una sola regla. Ambas
   vías, igual que arca-tokens.css: preferencia del sistema y activación
   manual. Contrastes recalculados y verificados, no una inversión
   automática -- el peor caso mide 5,76:1, todos pasan AA. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat2-color-bg: #121c23;
    --cat2-color-surface: #1a2831;
    --cat2-color-surface-alt: #21313b;
    --cat2-color-border: #384a55;
    --cat2-color-border-focus: #d9ae62;
    --cat2-color-text-primary: #eae3d5;
    --cat2-color-text-secondary: #b9c6cd;
    --cat2-color-text-muted: #9d9484;
    --cat2-color-text-inverse: #121c23;
    --cat2-color-accent: #9fc4d6;
    --cat2-color-accent-alt: #d9ae62;
    --cat2-color-accent-alt-on-dark: #e2bd7c;
    --cat2-color-link: #9fc4d6;
    --cat2-color-critical: #e8949c;
  }
}
:root[data-theme="dark"] {
  --cat2-color-bg: #121c23;
  --cat2-color-surface: #1a2831;
  --cat2-color-surface-alt: #21313b;
  --cat2-color-border: #384a55;
  --cat2-color-border-focus: #d9ae62;
  --cat2-color-text-primary: #eae3d5;
  --cat2-color-text-secondary: #b9c6cd;
  --cat2-color-text-muted: #9d9484;
  --cat2-color-text-inverse: #121c23;
  --cat2-color-accent: #9fc4d6;
  --cat2-color-accent-alt: #d9ae62;
  --cat2-color-accent-alt-on-dark: #e2bd7c;
  --cat2-color-link: #9fc4d6;
  --cat2-color-critical: #e8949c;
}

/* ── Acentos de categoría — tinte suave por tipo de contenido (Salud,
   Educación, Patrimonio, Comercio, Cultura, Social), pedido explícito
   ("dar más color, ahora todo es demasiado igual"). NO sustituyen a
   --cat2-color-accent/--cat2-color-accent-alt, que siguen siendo la
   identidad del sitio en todas las categorías -- se usan solo en el
   eyebrow de una tarjeta o la cabecera de un acordeón, nunca en botones
   ni en cuerpo de texto. Los 6 pares verificados ≥ 4,5:1, claro y oscuro. */
:root {
  --cat2-acc-salud-fg: #1d5c4a;      --cat2-acc-salud-bg: #e3f0ea;
  --cat2-acc-educacion-fg: #1d4a73;  --cat2-acc-educacion-bg: #e4edf6;
  --cat2-acc-patrimonio-fg: #8a3a1f; --cat2-acc-patrimonio-bg: #f6e8de;
  --cat2-acc-comercio-fg: #7a5824;   --cat2-acc-comercio-bg: #f1e6cf;
  --cat2-acc-cultura-fg: #5c3766;    --cat2-acc-cultura-bg: #efe4f2;
  --cat2-acc-social-fg: #6d4f1c;     --cat2-acc-social-bg: #f7efdd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat2-acc-salud-fg: #8fd6bd;      --cat2-acc-salud-bg: #173025;
    --cat2-acc-educacion-fg: #9cc4e8;  --cat2-acc-educacion-bg: #152538;
    --cat2-acc-patrimonio-fg: #e8b295; --cat2-acc-patrimonio-bg: #301c12;
    --cat2-acc-comercio-fg: #e0c48f;   --cat2-acc-comercio-bg: #332711;
    --cat2-acc-cultura-fg: #d4aee0;    --cat2-acc-cultura-bg: #2a1b30;
    --cat2-acc-social-fg: #e2c98c;     --cat2-acc-social-bg: #332a15;
  }
}
:root[data-theme="dark"] {
  --cat2-acc-salud-fg: #8fd6bd;      --cat2-acc-salud-bg: #173025;
  --cat2-acc-educacion-fg: #9cc4e8;  --cat2-acc-educacion-bg: #152538;
  --cat2-acc-patrimonio-fg: #e8b295; --cat2-acc-patrimonio-bg: #301c12;
  --cat2-acc-comercio-fg: #e0c48f;   --cat2-acc-comercio-bg: #332711;
  --cat2-acc-cultura-fg: #d4aee0;    --cat2-acc-cultura-bg: #2a1b30;
  --cat2-acc-social-fg: #e2c98c;     --cat2-acc-social-bg: #332a15;
}

} /* fin @layer tokens */