@php
    /** @var array<string, array<int, string>> $light */
    $light = $light ?? config('colors', []);

    /** @var array<string, array<int, string>> $dark */
    $dark = $dark ?? config('dark_colors', []);
    $dark = array_replace_recursive($light, $dark);

    /** @var callable(string): string $normalize */
    $normalize = static fn (string $value): string => preg_replace('/\s+/', ' ', str_replace(',', ' ', trim($value)));
@endphp

<style>
    :root,
    .fi-theme {
        @foreach ($light as $family => $shades)
            @foreach ($shades as $shade => $rgb)
                --{{ $family }}-{{ $shade }}: {{ $normalize($rgb) }};
            @endforeach
        @endforeach
    }

    html.dark,
    .fi-theme.dark {
        @foreach ($dark as $family => $shades)
            @foreach ($shades as $shade => $rgb)
                --{{ $family }}-{{ $shade }}: {{ $normalize($rgb) }};
            @endforeach
        @endforeach
    }
</style>