/* ============================================================================
   KAVITOR — tokens (capa 2/6). LA FUENTE ÚNICA DE COLOR/ESCALA (constitución v2).
   Un #hex de presentación fuera de este archivo = bug (§8.2).

   REGISTRO DE EXCEPCIONES TIPADAS (§8 — excepción no registrada = bug):
   1. Datos de usuario/material: colores RAL y acabados elegidos por el usuario.
   2. Gráficos de nesting y canvas de editores (colores con significado de datos).
   3. SVG/assets de marca (logos) y sus fills internos.
   4. Documentos exportados (PDF/DXF) — llevan su propia paleta de impresión.
   5. Visualizaciones categóricas (charts) — paleta propia documentada donde nazca.
   ========================================================================== */
/* SIN CAPA a propósito (2026-07-19): las variables deben re-GANAR a las homónimas del CSS
   legacy (dark-mode.css define --text-secondary etc. sin capa, y lo sin-capa vence a toda capa).
   Los tokens son DEFINICIONES, no reglas en conflicto: fuera de la guerra de capas. */
  :root {
    /* --- Primitivos: neutros CASI-PUROS (desviación ≤4, ancla #393A3D del logo) --- */
    --kv-neutral-0: #FFFFFF;   --kv-neutral-50: #F6F7F7;  --kv-neutral-100: #ECEDEE;
    --kv-neutral-200: #DDDEDF; --kv-neutral-300: #C0C2C3; --kv-neutral-400: #97999B;
    --kv-neutral-500: #6B6E71; --kv-neutral-600: #4C4E51; --kv-neutral-700: #393A3D;
    --kv-neutral-800: #27292B; --kv-neutral-850: #1E2022; --kv-neutral-900: #16181A;
    --kv-neutral-950: #0E1012; --kv-neutral-1000: #08090B;

    /* --- Azul de marca (OFICIAL del logo) --- */
    --kv-blue-200: #AEC2ED; --kv-blue-300: #7C99DB; --kv-blue-400: #5079CE;
    --kv-blue-500: #3A5FAA; --kv-blue-600: #2F4E8D; --kv-blue-700: #253E71;

    /* --- Estado + color de plan --- */
    --kv-green-500: #2E9E6B; --kv-amber-500: #D6A020;
    --kv-red-500: #D14B4B;   --kv-red-400: #E06A6A;
    --kv-orange-500: #E8913A; /* identidad del plan Architect (excepción tipada color-de-plan) */

    /* --- Tipografía --- */
    --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
    --fs-micro: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.875rem;
    --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem; --fs-display: 3rem;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

    /* --- Espaciado (rejilla 4px) / radios (matriz v2) / bordes / movimiento --- */
    --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px;
    --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 48px; --sp-12: 64px; --sp-16: 96px;
    --radius-0: 0; --radius-control: 2px; --radius-modal: 4px; --radius-full: 9999px;
    --bw-1: 1px; --bw-2: 2px;
    --dur-fast: 120ms; --dur-base: 160ms; --dur-slow: 220ms;
    --ease: cubic-bezier(.2, .6, .2, 1);
    --control-sm: 28px; --control-md: 32px; --control-lg: 40px;

    /* ================= SEMÁNTICOS — TEMA OSCURO (por defecto) ================= */
    --bg-base: var(--kv-neutral-1000);
    --bg-sunken: var(--kv-neutral-950);
    --bg-surface: var(--kv-neutral-900);
    --bg-raised: var(--kv-neutral-850);
    --bg-overlay: var(--kv-neutral-800);

    --border-subtle: var(--kv-neutral-800);
    --border: var(--kv-neutral-700);
    --border-strong: var(--kv-neutral-600);

    --text-primary: var(--kv-neutral-50);
    --text-secondary: var(--kv-neutral-400);
    --text-muted: var(--kv-neutral-500);   /* NUNCA información necesaria (§4) */
    --text-inverse: var(--kv-neutral-1000);

    /* Acento por ROL (v2): un token único rompía AA */
    --action-primary-bg: var(--kv-blue-500);
    --action-primary-hover: var(--kv-blue-600);
    --action-primary-pressed: var(--kv-blue-700);
    --on-accent: var(--kv-neutral-0);
    --link: var(--kv-blue-300);
    --selection-indicator: var(--kv-blue-400);
    --selection-wash: color-mix(in srgb, var(--kv-blue-400) 15%, transparent);
    --focus-ring: var(--kv-blue-400);

    --success: var(--kv-green-500);
    --warning: var(--kv-amber-500);
    --danger: var(--kv-red-400);
    --plan-architect: var(--kv-orange-500);
    --on-plan-architect: var(--kv-neutral-1000); /* texto OSCURO sobre naranja (blanco falla AA) */

    --hover-bg: var(--kv-neutral-850);
    --elev-1: 0 1px 2px rgba(0, 0, 0, .24);
    --elev-2: 0 4px 12px rgba(0, 0, 0, .32);
    --elev-3: 0 12px 32px rgba(0, 0, 0, .40);

    color-scheme: dark;
  }

  /* ================= SEMÁNTICOS — TEMA CLARO (diseñado, no espejo) ================= */
  [data-theme="light"] {
    --bg-base: var(--kv-neutral-50);
    --bg-sunken: var(--kv-neutral-100);
    --bg-surface: var(--kv-neutral-0);
    --bg-raised: var(--kv-neutral-0);
    --bg-overlay: var(--kv-neutral-0);

    --border-subtle: var(--kv-neutral-100);
    --border: var(--kv-neutral-200);
    --border-strong: var(--kv-neutral-300);
    --control-border: var(--kv-neutral-500); /* el borde delimita el input: 3,9:1 ✓ */

    --text-primary: var(--kv-neutral-900);
    --text-secondary: var(--kv-neutral-600);
    --text-muted: var(--kv-neutral-500);
    --text-inverse: var(--kv-neutral-0);

    --action-primary-bg: var(--kv-blue-600);
    --action-primary-hover: var(--kv-blue-500);
    --action-primary-pressed: var(--kv-blue-700);
    --link: var(--kv-blue-600);
    --selection-indicator: var(--kv-blue-600);
    --selection-wash: color-mix(in srgb, var(--kv-blue-600) 10%, transparent);
    --focus-ring: var(--kv-blue-500);

    --success: #1E7A4E;  /* status-text oscurecidos para claro (v2) */
    --warning: #8A6414;
    --danger: #C13F3F;

    --hover-bg: var(--kv-neutral-100);
    --elev-1: 0 1px 2px rgba(0, 0, 0, .08);
    --elev-2: 0 4px 12px rgba(0, 0, 0, .12);
    --elev-3: 0 12px 32px rgba(0, 0, 0, .16);

    color-scheme: light;
  }