{{-- Injects the active palette as :root custom-property overrides (light) plus a
     dark @media block. Placed after the Vite CSS so it overrides public.css's
     :root defaults. Only well-formed hex colours are emitted (guards custom input). --}}
@props(['tokens'])
@php
    $vars = [
        'bg' => '--lg-bg',
        'mesh1' => '--lg-mesh-1',
        'mesh2' => '--lg-mesh-2',
        'mesh3' => '--lg-mesh-3',
        'ink' => '--lg-ink',
        'ink_soft' => '--lg-ink-soft',
        'ink_faint' => '--lg-ink-faint',
        'accent' => '--lg-accent',
        'accent_strong' => '--lg-accent-strong',
        'accent_ink' => '--lg-accent-ink',
    ];

    $render = function (array $map) use ($vars): string {
        $out = '';
        foreach ($vars as $key => $cssVar) {
            $value = $map[$key] ?? null;
            if (is_string($value) && preg_match('/^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/', $value)) {
                $out .= "{$cssVar}:{$value};";
            }
        }

        return $out;
    };

    $light = $render($tokens['light'] ?? []);
    $dark = $render($tokens['dark'] ?? []);
@endphp
@if ($light !== '' || $dark !== '')
<style>
@if ($light !== ''):root{ {!! $light !!} }@endif
@if ($dark !== '')@media (prefers-color-scheme: dark){ :root{ {!! $dark !!} } }@endif
</style>
@endif