/* ============================================================
   uncles_platform — tokens.css (capas 2 y 3)

   Capa 1 · palette.css   primitivos generados (el único CSS con hex).
   Capa 2 · este archivo  semánticos: fondos, texto, bordes, estados,
                          sombras, espaciado, tipografía, radios, capas.
   Capa 3 · este archivo  derivación de marca desde `--brand`.
   Capa 4 · base.css / components.css consumen solo capas 2 y 3.

   El producto escribe SOLO su bloque de marca (v1.1.1): `--brand` más el
   respaldo para navegadores sin relative color, tal cual lo imprime
   `python -m uncles_platform.gama --css-marca <id>` (el claro en
   variables.css, el oscuro en theme.css). Orden de carga (base.html, login.html): palette → tokens →
   variables → theme → base → components → app. Un producto que todavía
   declara su racimo viejo gana por orden de carga: es la compatibilidad
   de v1.1.0.

   Sin hex ni rgb()/rgba()/hsl() acá: todo color sale de un primitivo
   (lo vigila test_tokens_capas.py). Spec:
   docs/specs/2026-10-06-paleta-y-arquitectura-de-tokens.md §1.4, §3, §4.
   ============================================================ */

:root {
    color-scheme: light;

    /* --- Capa 3 · marca ------------------------------------------------
       Por defecto, Grafito · Pizarra: el paquete puro se ve neutro. */
    --brand: var(--hue-grafito-pizarra);

    /* Respaldo (navegador sin relative color: < Chrome 119, Safari 16.4,
       Firefox 128): hover y active se mezclan con blanco y negro (como hasta
       v1.0.5), así el hover no queda plano y el degradado del login tiene
       relieve. La derivación con oklch(from …) va en el @supports del final. */
    --brand-hover: color-mix(in srgb, var(--brand), var(--white) 12%);
    --brand-active: color-mix(in srgb, var(--brand), var(--black) 12%);
    --brand-strong: var(--brand);
    --brand-strong-hover: var(--brand-hover);
    --brand-strong-active: var(--brand-active);

    --brand-subtle: color-mix(in srgb, var(--brand) 6%, transparent);
    --brand-muted: color-mix(in srgb, var(--brand) 12%, transparent);
    --brand-line: color-mix(in srgb, var(--brand) 60%, transparent);
    --text-on-strong: var(--white);
    --brand-text: var(--text-on-strong);
    --text-link: var(--brand-strong);
    --border-focus: var(--brand-strong); /* aprobado por Miguel 2026-10-12: brand+30 % blanco fallaba 3:1 en 23 de 33 */

    /* Login: el panel lleva texto blanco, así que va sobre el strong
       (hover → active daba 3.36:1 con Ocre, spec §7.4). */
    --login-panel-from: var(--brand-strong); /* alias — retiro v1.3.0 */
    --login-panel-to: var(--brand-strong-active); /* alias — retiro v1.3.0 */

    /* --- Capa 2 · fondos, texto, bordes (rampa de grises, spec §3.1) --- */
    --bg-app: var(--gray-50);
    --bg-surface: var(--white);
    --bg-surface-alt: var(--gray-100);
    --bg-surface-hover: var(--gray-100);
    --bg-elevated: var(--white);
    --bg-sidebar: var(--white);
    --bg-topnav: var(--white-a82); /* translúcido sin color-mix (v1.1.1) */
    --bg-input: var(--white);

    --text-primary: var(--gray-850);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-600);
    --text-inverse: var(--white);

    --border: var(--gray-200);
    --border-subtle: var(--gray-100);
    --border-strong: var(--gray-300);

    /* --- Capa 2 · estados (spec §3.2). `--<rol>-strong` es el relleno que
       lleva texto (`--text-on-strong` encima): en claro, el tono de texto,
       porque los sólidos de advertencia y éxito no aguantan texto blanco. */
    --success: var(--sem-success);
    --success-bg: var(--sem-success-fondo);
    --success-text: var(--sem-success-texto);
    --success-strong: var(--success-text);
    --warning: var(--sem-warning);
    --warning-bg: var(--sem-warning-fondo);
    --warning-text: var(--sem-warning-texto);
    --warning-strong: var(--warning-text);
    --danger: var(--sem-danger);
    --danger-bg: var(--sem-danger-fondo);
    --danger-text: var(--sem-danger-texto);
    --danger-strong: var(--danger-text);
    --info: var(--sem-info);
    --info-bg: var(--sem-info-fondo);
    --info-text: var(--sem-info-texto);
    --info-strong: var(--info-text);
    /* Color de categoría (.badge-purple, .btn-purple): de la gama. */
    --purple: var(--hue-morado-morado);

    /* Escala categórica fría: categorías, nunca estados. Texto sobre relleno. */
    --cat-1: var(--hue-turquesa-laguna);
    --cat-1-text: var(--gray-950);
    --cat-2: var(--hue-violeta-amatista);
    --cat-2-text: var(--white);
    --cat-3: var(--hue-azul-cielo);
    --cat-3-text: var(--gray-950);
    --cat-4: var(--hue-morado-uva);
    --cat-4-text: var(--white);
    --cat-5: var(--hue-turquesa-aguamarina);
    --cat-5-text: var(--gray-950);
    --cat-6: var(--hue-grafito-pizarra);
    --cat-6-text: var(--white);
    --cat-7: var(--hue-violeta-lavanda);
    --cat-7-text: var(--gray-950);
    --cat-8: var(--hue-turquesa-petroleo);
    --cat-8-text: var(--white);
    --cat-9: var(--hue-violeta-glicina);
    --cat-9-text: var(--gray-950);
    --cat-10: var(--hue-grafito-acero);
    --cat-10-text: var(--gray-950);

    /* --- Capa 2 · sombras y velos (mismos alfas que v1.0.5). Salen de los
       primitivos `--black-aN` (negro con alfa de palette.css), no de
       color-mix: así valen también en navegadores sin él. --- */
    --shadow-sm: 0 1px 2px var(--black-a6);
    --shadow-md: 0 4px 12px var(--black-a8);
    --shadow-lg: 0 8px 24px var(--black-a12);
    --card-shadow: 0 1px 3px var(--black-a6), 0 4px 12px var(--black-a4);
    /* Velo de modal y drawer (reemplaza los rgba(0,0,0,.4/.45/.5) sueltos). */
    --overlay: var(--black-a50);
    /* v1.1.1 · velo de un chip dentro de una cabecera con relleno fuerte
       (`--brand-strong`, `--<rol>-strong`): oscurece el relleno sin color
       suelto. Igual en los dos temas. */
    --on-strong-veil: var(--black-a15);
    /* v1.1.1 · velo sobre foto o cámara (texto encima: `--text-on-scrim`).
       Constantes en los dos temas: la foto no cambia con el tema. Negro al
       60 %: blanco encima da 5,7:1 aun sobre una foto blanca (peor caso). */
    --scrim: var(--black-a60);
    --text-on-scrim: var(--white);
    /* Color de la sombra interna que avisa scroll lateral (.table-responsive). */
    --scroll-shadow: var(--black-a8);
    /* Sombras de componente con su alfa de v1.0.5 (T3: los rgba() sueltos de
       components.css salen de acá; sin cambio visual). */
    --shadow-modal: 0 8px 24px var(--black-a20);    /* .modal-content */
    --shadow-popover: 0 8px 24px var(--black-a18);  /* .th-filter-dropdown */
    --shadow-sheet: 0 -8px 24px var(--black-a15);   /* bottom sheet (móvil) */
    --shadow-menu: var(--shadow-lg);                /* .kebab-panel */
    /* Color de la sombra interna del borde del drawer (.historial-drawer). */
    --edge-shadow: var(--black-a8);

    /* --- Capa 2 · espaciado (8pt grid) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* --- Capa 2 · radios --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* --- Capa 2 · tipografía --- */
    --font-heading: 'Sora', sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --fs-xs: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
    --fs-sm: clamp(0.78rem, 0.72rem + 0.3vw, 0.875rem);
    --fs-base: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
    --fs-md: clamp(1rem, 0.93rem + 0.35vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --fs-xl: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
    --fs-2xl: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);

    /* --- Capa 2 · layout y movimiento --- */
    --topnav-height: 54px;
    --sidebar-width: 220px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --duration: 0.25s;

    /* --- Capa 2 · componentes de UI del paquete (antes faltaban en algunos
       productos): progreso, estado atenuado y FAB (reglas-ui §5b, §5c). --- */
    --progress-h: 0.5rem;
    --progress-h-sm: 0.25rem;
    --progress-track: var(--border);
    --opacity-inactivo: .55;
    --z-fab: 400;
    --fab-size: 56px;
}

[data-theme="dark"] {
    /* Escala categórica fría — variantes de la misma gama. */
    --cat-1: var(--hue-turquesa-laguna-dark);
    --cat-1-text: var(--gray-950);
    --cat-2: var(--hue-violeta-amatista-dark);
    --cat-2-text: var(--gray-950);
    --cat-3: var(--hue-azul-cielo-dark);
    --cat-3-text: var(--gray-950);
    --cat-4: var(--hue-morado-uva-dark);
    --cat-4-text: var(--gray-950);
    --cat-5: var(--hue-turquesa-aguamarina-dark);
    --cat-5-text: var(--gray-950);
    --cat-6: var(--hue-grafito-pizarra-dark);
    --cat-6-text: var(--gray-950);
    --cat-7: var(--hue-violeta-lavanda-dark);
    --cat-7-text: var(--gray-950);
    --cat-8: var(--hue-turquesa-petroleo-dark);
    --cat-8-text: var(--gray-950);
    --cat-9: var(--hue-violeta-glicina-dark);
    --cat-9-text: var(--gray-950);
    --cat-10: var(--hue-grafito-acero-dark);
    --cat-10-text: var(--gray-950);

    color-scheme: dark;

    /* --- Capa 3 · marca (oscuro, spec §1.4 y D8) --- */
    --brand: var(--hue-grafito-pizarra-dark);

    --brand-hover: color-mix(in srgb, var(--brand), var(--white) 10%);
    --brand-active: color-mix(in srgb, var(--brand), var(--black) 10%);
    --brand-strong: var(--brand);
    --brand-strong-hover: var(--brand-hover);
    --brand-strong-active: var(--brand-active);

    --brand-subtle: color-mix(in srgb, var(--brand) 10%, transparent);
    --brand-muted: color-mix(in srgb, var(--brand) 14%, transparent);
    --brand-line: color-mix(in srgb, var(--brand) 78%, transparent);
    --text-on-strong: var(--gray-950);
    --text-link: var(--brand);
    --border-focus: var(--brand);

    /* --- Capa 2 · neutros (oscuro, spec §3.1; D11) --- */
    --bg-app: var(--gray-950);
    --bg-surface: var(--gray-900);
    --bg-surface-alt: var(--gray-850);
    --bg-surface-hover: var(--gray-850);
    --bg-elevated: var(--gray-850);
    --bg-sidebar: var(--gray-950);
    --bg-topnav: var(--gray-950-a85);
    --bg-input: var(--gray-900);

    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-400);
    --text-tertiary: var(--gray-500);
    --text-inverse: var(--gray-850);

    --border: var(--gray-800);
    --border-subtle: var(--gray-850);
    --border-strong: var(--gray-700);

    /* --- Capa 2 · estados (oscuro): sólido claro, texto gris-950 encima. El
       fondo es el sólido al 14 % ya calculado en palette.css (antes color-mix:
       v1.1.1 lo saca para que valga también en Chrome 109 / Safari 13.2). --- */
    --success: var(--sem-success-dark);
    --success-bg: var(--sem-success-dark-a14);
    --success-text: var(--sem-success-texto-dark);
    --success-strong: var(--success);
    --warning: var(--sem-warning-dark);
    --warning-bg: var(--sem-warning-dark-a14);
    --warning-text: var(--sem-warning-texto-dark);
    --warning-strong: var(--warning);
    --danger: var(--sem-danger-dark);
    --danger-bg: var(--sem-danger-dark-a14);
    --danger-text: var(--sem-danger-texto-dark);
    --danger-strong: var(--danger);
    --info: var(--sem-info-dark);
    --info-bg: var(--sem-info-dark-a14);
    --info-text: var(--sem-info-texto-dark);
    --info-strong: var(--info);
    /* Categoría en oscuro: su variante clara, que lleva texto gray-950 (D8). */
    --purple: var(--hue-morado-morado-dark);

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 8px 24px var(--black-a30);
    --card-shadow: none;
    --overlay: var(--black-a60);
    --scroll-shadow: var(--black-a20);
    --shadow-menu: 0 8px 24px var(--black-a40);

    /* En oscuro `--border` sobre la superficie casi no se ve: la pista del
       progreso va con el borde fuerte. */
    --progress-track: var(--border-strong);
}

/* --- Capa 3 · derivación con relative color (Chrome 119+, Safari 16.4+,
   Firefox 128+). Cada propiedad tiene su respaldo arriba, fuera del bloque.
   El bloque oscuro repite TODO lo que el claro redefine acá: si no, la
   derivación clara se colaría en oscuro (mismo peso, gana la última). */
@supports (color: oklch(from red l c h)) {
    :root {
        --brand-hover: oklch(from var(--brand) calc(l + .06) c h);
        --brand-active: oklch(from var(--brand) calc(l - .06) c h);
        /* Tope 0.50 (Q1): con recorte de gamut, AA en las 33 variantes. */
        --brand-strong: oklch(from var(--brand) min(l, .50) c h);
        --brand-strong-hover: oklch(from var(--brand-strong) calc(l - .05) c h);
        /* El croma baja en proporción a L: con `c` fijo el recorte canal por
           canal torcía el tono (Forge → rgb(148,0,0)). Generador: strong_active(). */
        --brand-strong-active: oklch(from var(--brand-strong) calc(l - .10) calc(c * (l - .10) / l) h);
    }

    [data-theme="dark"] {
        --brand-hover: oklch(from var(--brand) calc(l + .05) c h);
        --brand-active: oklch(from var(--brand) calc(l - .05) c h);
        --brand-strong: var(--brand);
        --brand-strong-hover: oklch(from var(--brand) calc(l + .05) c h);
        --brand-strong-active: oklch(from var(--brand) calc(l - .04) c h);
    }
}

/* --- Respaldo sin color-mix (< Chrome 111, Safari 16.2, Firefox 113; D10,
   plan T2.5): todo token que lo usa y quedaría inválido se aplana a un valor
   plano. El ítem activo y los chips conservan un fondo. Las sombras, los velos,
   la topnav y los fondos semánticos de oscuro no entran acá: salen de
   primitivos con alfa (v1.1.1). Es la RED del paquete: el producto pega su
   bloque de marca (`python -m uncles_platform.gama --css-marca <id>`), que
   carga después y pone los valores exactos del navegador moderno. --- */
@supports not (color: color-mix(in srgb, red, blue)) {
    :root {
        --brand-hover: var(--brand);
        --brand-active: var(--brand);
        --brand-subtle: transparent;
        --brand-muted: var(--bg-surface-alt);
        --brand-line: var(--brand);
        --border-focus: var(--brand-strong);
    }

    [data-theme="dark"] {
        --brand-hover: var(--brand);
        --brand-active: var(--brand);
        --brand-subtle: transparent;
        --brand-muted: var(--bg-surface-alt);
        --brand-line: var(--brand);
    }
}