{{-- Tokens del layout nuevo (specs/layout.md §3). Única fuente de colores y tipografía:
     ninguna vista escribe colores fijos para superficies, textos, bordes o acentos. --}}
@php
    $tema = app(\App\Services\TemaEmpresa::class)->actual();
    $modulos = config('modulos');
    $variables = function (array $vars) {
        $css = '';
        foreach ($vars as $nombre => $valor) {
            $css .= $nombre . ':' . $valor . ';';
        }
        return $css;
    };
@endphp
<style>
    :root {
        --fuente: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
        --fuente-display: 'Archivo', var(--fuente);
        --fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

        --fondo: #FFFFFF;
        --superficie: #FFFFFF;
        --superficie-2: #F4F4F7;
        --superficie-3: #FAFAFA;
        --borde: #EDEDF1;
        --borde-fuerte: #E2E2E8;
        --texto: #16161A;
        --texto-suave: #6E6E7A;
        --texto-tenue: #9A9AA6;
        --sombra-panel: 0 12px 32px -12px rgba(22, 22, 26, .22), 0 2px 6px rgba(22, 22, 26, .06);

        --nav-hover: #F1F1F5;
        --nav-actual: #FFFFFF;
        --nav-actual-borde: #E2E2E8;

        {!! $variables($tema['variables']['claro']) !!}

        {{-- Familia "empresa" (text-empresa-700…) de las pantallas heredadas, L2a --}}
        @foreach ($tema['escala'] as $tono => $rgb)--empresa-{{ $tono }}: {{ $rgb }};@endforeach
    }

    {{-- Oscuro de toda la página (:root.dark) o solo del marco en pantallas heredadas ([data-shell]). --}}
    :root.dark, :root[data-shell-oscuro] [data-shell] {
        color-scheme: dark;

        --fondo: #0E0E12;
        --superficie: #141419;
        --superficie-2: #1A1A21;
        --superficie-3: #12121A;
        --borde: #26262E;
        --borde-fuerte: #32323C;
        --texto: #F2F2F5;
        --texto-suave: #A0A0AC;
        --texto-tenue: #7E7E8C;
        --sombra-panel: 0 12px 32px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);

        --nav-hover: #1C1C24;
        --nav-actual: #20202A;
        --nav-actual-borde: #32323C;

        {!! $variables($tema['variables']['oscuro']) !!}
    }

    {{-- Color de módulo: solo dentro de [data-mod]. Con "Módulos en gris" todos toman la paleta de panel. --}}
    @foreach ($modulos as $llave => $modulo)
        @php $paleta = $tema['modulos_neutros'] ? $modulos['panel'] : $modulo; @endphp
        [data-mod="{{ $llave }}"] {
            --mod: {{ $paleta['claro']['mod'] }}; --mod-contraste: #FFFFFF;
            --ink: {{ $paleta['claro']['ink'] }}; --soft: {{ $paleta['claro']['soft'] }}; --line: {{ $paleta['claro']['line'] }};
        }
        :root.dark [data-mod="{{ $llave }}"], :root[data-shell-oscuro] [data-shell] [data-mod="{{ $llave }}"] {
            --mod: {{ $paleta['oscuro']['mod'] }}; --mod-contraste: #0E0E12;
            --ink: {{ $paleta['oscuro']['ink'] }}; --soft: {{ $paleta['oscuro']['soft'] }}; --line: {{ $paleta['oscuro']['line'] }};
        }
    @endforeach

    /* Los logos tienen fondo blanco: en oscuro van sobre una placa blanca en vez de invertirse. */
    :root.dark .ctc-logo, :root[data-shell-oscuro] [data-shell] .ctc-logo {
        background: #FFFFFF; border-radius: 6px; padding: 4px;
    }
</style>