/* ============================================================================ * temi.css — la gamma dei colori che l'operatore può scegliere * ============================================================================ * * Chiude la seconda metà di A11 e l'ultima riga aperta di C1: «ogni operatore * può personalizzare colori e sfondi entro una gamma predefinita». * * ── Che cosa c'è qui dentro ───────────────────────────────────────────────── * * Sei temi. Ognuno è una coppia: una **tinta** per le azioni (pulsanti, * pastiglie, voce corrente, link) e una **scala neutra** per tutto il resto * (sfondo, barra, bordi, testo). Non sono due scelte separate ma accoppiate una * volta qui, così non esistono accostamenti sbagliati da scegliere. * * ── Da dove vengono i valori, e perché non sono decisi da noi ─────────────── * * Dalle tavolozze di `Filament\Support\Colors\Color`, cioè quelle di Tailwind: * le stesse su cui è costruito il programma della contabilità. È la gamma * predefinita che A11 chiede, e sceglierla lì significa che il contrasto è * verificato per costruzione invece che a occhio. * * ⚠ In `oklch()`, non in esadecimale come `tokens.css`. I due file dicono le * stesse tinte in due notazioni: `tokens.css` porta gli esadecimali di * Tailwind 3, questo i valori di Filament 5 così come Filament li scrive. Il * vincolo di browser è lo stesso che `tokens.css` dichiara già per color-mix() * — Chrome 111+, Safari 16.2+, Firefox 113+ — perché oklch() arriva negli * stessi browser. * * ── Come si accende un tema ───────────────────────────────────────────────── * * Un attributo sul tag : `data-tl-tema="blu"`. Lo scrive `ui/temi.php` * leggendo il cookie `tl_tema`, con uno script sincrono in cima all' — * sincrono perché con `defer` la pagina si disegnerebbe prima nei colori vecchi. * * Il tema predefinito **non ha un blocco qui e non scrive l'attributo**: chi non * ha mai scelto niente riceve `tokens.css` intatto, cioè l'HTML di oggi byte per * byte. È voluto: la grafica approvata non deve dipendere da questo file. * * ── Perché i blocchi sono selettori d'attributo ───────────────────────────── * * `:root[data-tl-tema="x"]` pesa (0,2,0) contro il (0,1,0) di `:root`. Vince * quindi sia su `tokens.css` sia sul blocco `:root{--primary-…}` che Filament * stampa di suo, **senza dipendere dall'ordine di caricamento** — che nelle tre * famiglie di pagine non è lo stesso. * * ── Che cosa ridefinisce ogni blocco ──────────────────────────────────────── * * --tl-gray-* la scala neutra. Basta questa: i semantici di `tokens.css` * (superfici, testo, bordi, barra) ci puntano con var(), e * seguono da soli. * --tl-tinta-* la tinta delle azioni. Non esiste in `tokens.css`: la * dichiara questo file, e serve solo ai temi. * --tl-accent-* i sei semantici dell'accento, ripuntati sulla tinta. * --primary-* la scala che Filament usa per i suoi componenti. * --gray-* la scala neutra di Filament (di serie è Zinc), perché * altrimenti dentro il pannello i grigi resterebbero quelli * di prima mentre fuori cambiano. * * ⚠ **Il livello dell'accento non è sempre il 600.** Col testo bianco sopra, * green-600 dà 3,22:1 e teal-600 3,66:1 — sotto la soglia WCAG AA di 4,5:1. * Per quelle due tinte l'accento è il **700**, e la scala che riceve Filament * trasla di un gradino dal 500 in giù, così il pulsante di Filament — che * prende sempre `--primary-600` — prende il 700 vero e resta leggibile. * I contrasti misurati sono in coda a ogni blocco. * * ── Aggiungere un tema ────────────────────────────────────────────────────── * * Non a mano: il file è generato. Si aggiunge la riga in `TEMI` dentro * `verifica-ui/genera-temi.py` e si rilancia. Lo script calcola i contrasti e * si rifiuta di scrivere un tema che non li rispetta. * ========================================================================= */ /* ── I campioni delle pastiglie ────────────────────────────────────────────── * Sempre dichiarati, non dentro un blocco di tema: servono alla modale della * scelta, che deve poter mostrare i sei temi mentre uno solo è acceso. Ogni * pastiglia è un ritratto in piccolo della pagina — il fondo neutro, il bordo, * e il pallino dell'accento — così si vede anche la temperatura del grigio, che * a parole («grigio freddo», «grigio caldo») non si distingue. */ :root { --tl-tema-contabilita-sfondo: oklch(0.967 0.001 286.375); --tl-tema-contabilita-bordo: oklch(0.871 0.006 286.286); --tl-tema-contabilita-azioni: oklch(0.442 0.017 285.786); --tl-tema-blu-sfondo: oklch(0.968 0.007 247.896); --tl-tema-blu-bordo: oklch(0.869 0.022 252.894); --tl-tema-blu-azioni: oklch(0.546 0.245 262.881); --tl-tema-indaco-sfondo: oklch(0.967 0.001 286.375); --tl-tema-indaco-bordo: oklch(0.871 0.006 286.286); --tl-tema-indaco-azioni: oklch(0.511 0.262 276.966); --tl-tema-verde-sfondo: oklch(0.967 0.003 264.542); --tl-tema-verde-bordo: oklch(0.872 0.01 258.338); --tl-tema-verde-azioni: oklch(0.527 0.154 150.069); --tl-tema-petrolio-sfondo: oklch(0.963 0.002 197.1); --tl-tema-petrolio-bordo: oklch(0.872 0.007 219.6); --tl-tema-petrolio-azioni: oklch(0.511 0.096 186.391); --tl-tema-violetto-sfondo: oklch(0.96 0.003 325.6); --tl-tema-violetto-bordo: oklch(0.865 0.012 325.68); --tl-tema-violetto-azioni: oklch(0.541 0.281 293.009); } /* ── Blu istituzionale · neutro slate, azioni blue 600 ───────────────── * Contrasti misurati: testo bianco sull'accento 5.26:1 · testo dell'accento * sul suo fondo tenue 5.59:1 · link su bianco 6.82:1 · pulsante di * Filament 5.26:1. Tutti sopra il 4,5:1 di WCAG AA. */ :root[data-tl-tema="blu"] { /* la scala neutra: i semantici di tokens.css la seguono da soli */ --tl-gray-50: oklch(0.984 0.003 247.858); --tl-gray-100: oklch(0.968 0.007 247.896); --tl-gray-200: oklch(0.929 0.013 255.508); --tl-gray-300: oklch(0.869 0.022 252.894); --tl-gray-400: oklch(0.704 0.04 256.788); --tl-gray-500: oklch(0.554 0.046 257.417); --tl-gray-600: oklch(0.446 0.043 257.281); --tl-gray-700: oklch(0.372 0.044 257.287); --tl-gray-800: oklch(0.279 0.041 260.031); --tl-gray-900: oklch(0.208 0.042 265.755); --tl-gray-950: oklch(0.129 0.042 264.695); --tl-black: oklch(0.129 0.042 264.695); /* la tinta delle azioni */ --tl-tinta-50: oklch(0.97 0.014 254.604); --tl-tinta-100: oklch(0.932 0.032 255.585); --tl-tinta-200: oklch(0.882 0.059 254.128); --tl-tinta-300: oklch(0.809 0.105 251.813); --tl-tinta-400: oklch(0.707 0.165 254.624); --tl-tinta-500: oklch(0.623 0.214 259.815); --tl-tinta-600: oklch(0.546 0.245 262.881); --tl-tinta-700: oklch(0.488 0.243 264.376); --tl-tinta-800: oklch(0.424 0.199 265.638); --tl-tinta-900: oklch(0.379 0.146 265.522); --tl-tinta-950: oklch(0.282 0.091 267.935); /* i semantici che passano dal neutro alla tinta */ --tl-accent: var(--tl-tinta-600); --tl-accent-hover: var(--tl-tinta-700); --tl-accent-active: var(--tl-tinta-800); --tl-accent-subtle: var(--tl-tinta-100); --tl-accent-text: var(--tl-tinta-700); --tl-text-link: var(--tl-tinta-700); --tl-text-link-hover: var(--tl-tinta-800); /* La voce corrente della barra prende la tinta. Di serie ha lo stesso grigio dell'hover, cioè non si distingue da una voce puntata. ⚠ E si ferma qui: `--tl-nav-text-strong` — il colore dei titoli dei gruppi — resta al neutro. Provato coi due colori a schermo l'11 settembre 2026: coi titoli in tinta i dodici gruppi diventano tutti colorati e competono con la voce corrente, che è l'unica cosa in quella colonna che dice davvero qualcosa. */ --tl-nav-bg-active: var(--tl-tinta-100); /* Filament: la sua scala primaria e la sua scala neutra */ --primary-50: oklch(0.97 0.014 254.604); --primary-100: oklch(0.932 0.032 255.585); --primary-200: oklch(0.882 0.059 254.128); --primary-300: oklch(0.809 0.105 251.813); --primary-400: oklch(0.707 0.165 254.624); --primary-500: oklch(0.623 0.214 259.815); --primary-600: oklch(0.546 0.245 262.881); --primary-700: oklch(0.488 0.243 264.376); --primary-800: oklch(0.424 0.199 265.638); --primary-900: oklch(0.379 0.146 265.522); --primary-950: oklch(0.282 0.091 267.935); --gray-50: oklch(0.984 0.003 247.858); --gray-100: oklch(0.968 0.007 247.896); --gray-200: oklch(0.929 0.013 255.508); --gray-300: oklch(0.869 0.022 252.894); --gray-400: oklch(0.704 0.04 256.788); --gray-500: oklch(0.554 0.046 257.417); --gray-600: oklch(0.446 0.043 257.281); --gray-700: oklch(0.372 0.044 257.287); --gray-800: oklch(0.279 0.041 260.031); --gray-900: oklch(0.208 0.042 265.755); --gray-950: oklch(0.129 0.042 264.695); } /* ── Indaco · neutro zinc, azioni indigo 600 ───────────────── * Contrasti misurati: testo bianco sull'accento 6.44:1 · testo dell'accento * sul suo fondo tenue 6.55:1 · link su bianco 8.07:1 · pulsante di * Filament 6.44:1. Tutti sopra il 4,5:1 di WCAG AA. */ :root[data-tl-tema="indaco"] { /* la scala neutra: i semantici di tokens.css la seguono da soli */ --tl-gray-50: oklch(0.985 0 0); --tl-gray-100: oklch(0.967 0.001 286.375); --tl-gray-200: oklch(0.92 0.004 286.32); --tl-gray-300: oklch(0.871 0.006 286.286); --tl-gray-400: oklch(0.705 0.015 286.067); --tl-gray-500: oklch(0.552 0.016 285.938); --tl-gray-600: oklch(0.442 0.017 285.786); --tl-gray-700: oklch(0.37 0.013 285.805); --tl-gray-800: oklch(0.274 0.006 286.033); --tl-gray-900: oklch(0.21 0.006 285.885); --tl-gray-950: oklch(0.141 0.005 285.823); --tl-black: oklch(0.141 0.005 285.823); /* la tinta delle azioni */ --tl-tinta-50: oklch(0.962 0.018 272.314); --tl-tinta-100: oklch(0.93 0.034 272.788); --tl-tinta-200: oklch(0.87 0.065 274.039); --tl-tinta-300: oklch(0.785 0.115 274.713); --tl-tinta-400: oklch(0.673 0.182 276.935); --tl-tinta-500: oklch(0.585 0.233 277.117); --tl-tinta-600: oklch(0.511 0.262 276.966); --tl-tinta-700: oklch(0.457 0.24 277.023); --tl-tinta-800: oklch(0.398 0.195 277.366); --tl-tinta-900: oklch(0.359 0.144 278.697); --tl-tinta-950: oklch(0.257 0.09 281.288); /* i semantici che passano dal neutro alla tinta */ --tl-accent: var(--tl-tinta-600); --tl-accent-hover: var(--tl-tinta-700); --tl-accent-active: var(--tl-tinta-800); --tl-accent-subtle: var(--tl-tinta-100); --tl-accent-text: var(--tl-tinta-700); --tl-text-link: var(--tl-tinta-700); --tl-text-link-hover: var(--tl-tinta-800); /* La voce corrente della barra prende la tinta. Di serie ha lo stesso grigio dell'hover, cioè non si distingue da una voce puntata. ⚠ E si ferma qui: `--tl-nav-text-strong` — il colore dei titoli dei gruppi — resta al neutro. Provato coi due colori a schermo l'11 settembre 2026: coi titoli in tinta i dodici gruppi diventano tutti colorati e competono con la voce corrente, che è l'unica cosa in quella colonna che dice davvero qualcosa. */ --tl-nav-bg-active: var(--tl-tinta-100); /* Filament: la sua scala primaria e la sua scala neutra */ --primary-50: oklch(0.962 0.018 272.314); --primary-100: oklch(0.93 0.034 272.788); --primary-200: oklch(0.87 0.065 274.039); --primary-300: oklch(0.785 0.115 274.713); --primary-400: oklch(0.673 0.182 276.935); --primary-500: oklch(0.585 0.233 277.117); --primary-600: oklch(0.511 0.262 276.966); --primary-700: oklch(0.457 0.24 277.023); --primary-800: oklch(0.398 0.195 277.366); --primary-900: oklch(0.359 0.144 278.697); --primary-950: oklch(0.257 0.09 281.288); --gray-50: oklch(0.985 0 0); --gray-100: oklch(0.967 0.001 286.375); --gray-200: oklch(0.92 0.004 286.32); --gray-300: oklch(0.871 0.006 286.286); --gray-400: oklch(0.705 0.015 286.067); --gray-500: oklch(0.552 0.016 285.938); --gray-600: oklch(0.442 0.017 285.786); --gray-700: oklch(0.37 0.013 285.805); --gray-800: oklch(0.274 0.006 286.033); --gray-900: oklch(0.21 0.006 285.885); --gray-950: oklch(0.141 0.005 285.823); } /* ── Verde · neutro gray, azioni green 700 ───────────────── * Contrasti misurati: testo bianco sull'accento 4.94:1 · testo dell'accento * sul suo fondo tenue 6.45:1 · link su bianco 4.94:1 · pulsante di * Filament 4.94:1. Tutti sopra il 4,5:1 di WCAG AA. */ :root[data-tl-tema="verde"] { /* la scala neutra: i semantici di tokens.css la seguono da soli */ --tl-gray-50: oklch(0.985 0.002 247.839); --tl-gray-100: oklch(0.967 0.003 264.542); --tl-gray-200: oklch(0.928 0.006 264.531); --tl-gray-300: oklch(0.872 0.01 258.338); --tl-gray-400: oklch(0.707 0.022 261.325); --tl-gray-500: oklch(0.551 0.027 264.364); --tl-gray-600: oklch(0.446 0.03 256.802); --tl-gray-700: oklch(0.373 0.034 259.733); --tl-gray-800: oklch(0.278 0.033 256.848); --tl-gray-900: oklch(0.21 0.034 264.665); --tl-gray-950: oklch(0.13 0.028 261.692); --tl-black: oklch(0.13 0.028 261.692); /* la tinta delle azioni */ --tl-tinta-50: oklch(0.982 0.018 155.826); --tl-tinta-100: oklch(0.962 0.044 156.743); --tl-tinta-200: oklch(0.925 0.084 155.995); --tl-tinta-300: oklch(0.871 0.15 154.449); --tl-tinta-400: oklch(0.792 0.209 151.711); --tl-tinta-500: oklch(0.723 0.219 149.579); --tl-tinta-600: oklch(0.627 0.194 149.214); --tl-tinta-700: oklch(0.527 0.154 150.069); --tl-tinta-800: oklch(0.448 0.119 151.328); --tl-tinta-900: oklch(0.393 0.095 152.535); --tl-tinta-950: oklch(0.266 0.065 152.934); /* i semantici che passano dal neutro alla tinta */ --tl-accent: var(--tl-tinta-700); --tl-accent-hover: var(--tl-tinta-800); --tl-accent-active: var(--tl-tinta-900); --tl-accent-subtle: var(--tl-tinta-100); --tl-accent-text: var(--tl-tinta-800); --tl-text-link: var(--tl-tinta-700); --tl-text-link-hover: var(--tl-tinta-800); /* La voce corrente della barra prende la tinta. Di serie ha lo stesso grigio dell'hover, cioè non si distingue da una voce puntata. ⚠ E si ferma qui: `--tl-nav-text-strong` — il colore dei titoli dei gruppi — resta al neutro. Provato coi due colori a schermo l'11 settembre 2026: coi titoli in tinta i dodici gruppi diventano tutti colorati e competono con la voce corrente, che è l'unica cosa in quella colonna che dice davvero qualcosa. */ --tl-nav-bg-active: var(--tl-tinta-100); /* Filament: la sua scala primaria e la sua scala neutra */ --primary-50: oklch(0.982 0.018 155.826); --primary-100: oklch(0.962 0.044 156.743); --primary-200: oklch(0.925 0.084 155.995); --primary-300: oklch(0.871 0.15 154.449); --primary-400: oklch(0.792 0.209 151.711); --primary-500: oklch(0.627 0.194 149.214); --primary-600: oklch(0.527 0.154 150.069); --primary-700: oklch(0.448 0.119 151.328); --primary-800: oklch(0.393 0.095 152.535); --primary-900: oklch(0.266 0.065 152.934); --primary-950: oklch(0.266 0.065 152.934); --gray-50: oklch(0.985 0.002 247.839); --gray-100: oklch(0.967 0.003 264.542); --gray-200: oklch(0.928 0.006 264.531); --gray-300: oklch(0.872 0.01 258.338); --gray-400: oklch(0.707 0.022 261.325); --gray-500: oklch(0.551 0.027 264.364); --gray-600: oklch(0.446 0.03 256.802); --gray-700: oklch(0.373 0.034 259.733); --gray-800: oklch(0.278 0.033 256.848); --gray-900: oklch(0.21 0.034 264.665); --gray-950: oklch(0.13 0.028 261.692); } /* ── Petrolio · neutro mist, azioni teal 700 ───────────────── * Contrasti misurati: testo bianco sull'accento 5.39:1 · testo dell'accento * sul suo fondo tenue 6.69:1 · link su bianco 5.39:1 · pulsante di * Filament 5.39:1. Tutti sopra il 4,5:1 di WCAG AA. */ :root[data-tl-tema="petrolio"] { /* la scala neutra: i semantici di tokens.css la seguono da soli */ --tl-gray-50: oklch(0.987 0.002 197.1); --tl-gray-100: oklch(0.963 0.002 197.1); --tl-gray-200: oklch(0.925 0.005 214.3); --tl-gray-300: oklch(0.872 0.007 219.6); --tl-gray-400: oklch(0.723 0.014 214.4); --tl-gray-500: oklch(0.56 0.021 213.5); --tl-gray-600: oklch(0.45 0.017 213.2); --tl-gray-700: oklch(0.378 0.015 216); --tl-gray-800: oklch(0.275 0.011 216.9); --tl-gray-900: oklch(0.218 0.008 223.9); --tl-gray-950: oklch(0.148 0.004 228.8); --tl-black: oklch(0.148 0.004 228.8); /* la tinta delle azioni */ --tl-tinta-50: oklch(0.984 0.014 180.72); --tl-tinta-100: oklch(0.953 0.051 180.801); --tl-tinta-200: oklch(0.91 0.096 180.426); --tl-tinta-300: oklch(0.855 0.138 181.071); --tl-tinta-400: oklch(0.777 0.152 181.912); --tl-tinta-500: oklch(0.704 0.14 182.503); --tl-tinta-600: oklch(0.6 0.118 184.704); --tl-tinta-700: oklch(0.511 0.096 186.391); --tl-tinta-800: oklch(0.437 0.078 188.216); --tl-tinta-900: oklch(0.386 0.063 188.416); --tl-tinta-950: oklch(0.277 0.046 192.524); /* i semantici che passano dal neutro alla tinta */ --tl-accent: var(--tl-tinta-700); --tl-accent-hover: var(--tl-tinta-800); --tl-accent-active: var(--tl-tinta-900); --tl-accent-subtle: var(--tl-tinta-100); --tl-accent-text: var(--tl-tinta-800); --tl-text-link: var(--tl-tinta-700); --tl-text-link-hover: var(--tl-tinta-800); /* La voce corrente della barra prende la tinta. Di serie ha lo stesso grigio dell'hover, cioè non si distingue da una voce puntata. ⚠ E si ferma qui: `--tl-nav-text-strong` — il colore dei titoli dei gruppi — resta al neutro. Provato coi due colori a schermo l'11 settembre 2026: coi titoli in tinta i dodici gruppi diventano tutti colorati e competono con la voce corrente, che è l'unica cosa in quella colonna che dice davvero qualcosa. */ --tl-nav-bg-active: var(--tl-tinta-100); /* Filament: la sua scala primaria e la sua scala neutra */ --primary-50: oklch(0.984 0.014 180.72); --primary-100: oklch(0.953 0.051 180.801); --primary-200: oklch(0.91 0.096 180.426); --primary-300: oklch(0.855 0.138 181.071); --primary-400: oklch(0.777 0.152 181.912); --primary-500: oklch(0.6 0.118 184.704); --primary-600: oklch(0.511 0.096 186.391); --primary-700: oklch(0.437 0.078 188.216); --primary-800: oklch(0.386 0.063 188.416); --primary-900: oklch(0.277 0.046 192.524); --primary-950: oklch(0.277 0.046 192.524); --gray-50: oklch(0.987 0.002 197.1); --gray-100: oklch(0.963 0.002 197.1); --gray-200: oklch(0.925 0.005 214.3); --gray-300: oklch(0.872 0.007 219.6); --gray-400: oklch(0.723 0.014 214.4); --gray-500: oklch(0.56 0.021 213.5); --gray-600: oklch(0.45 0.017 213.2); --gray-700: oklch(0.378 0.015 216); --gray-800: oklch(0.275 0.011 216.9); --gray-900: oklch(0.218 0.008 223.9); --gray-950: oklch(0.148 0.004 228.8); } /* ── Violetto · neutro mauve, azioni violet 600 ───────────────── * Contrasti misurati: testo bianco sull'accento 5.88:1 · testo dell'accento * sul suo fondo tenue 6.13:1 · link su bianco 7.29:1 · pulsante di * Filament 5.88:1. Tutti sopra il 4,5:1 di WCAG AA. */ :root[data-tl-tema="violetto"] { /* la scala neutra: i semantici di tokens.css la seguono da soli */ --tl-gray-50: oklch(0.985 0 0); --tl-gray-100: oklch(0.96 0.003 325.6); --tl-gray-200: oklch(0.922 0.005 325.62); --tl-gray-300: oklch(0.865 0.012 325.68); --tl-gray-400: oklch(0.711 0.019 323.02); --tl-gray-500: oklch(0.542 0.034 322.5); --tl-gray-600: oklch(0.435 0.029 321.78); --tl-gray-700: oklch(0.364 0.029 323.89); --tl-gray-800: oklch(0.263 0.024 320.12); --tl-gray-900: oklch(0.212 0.019 322.12); --tl-gray-950: oklch(0.145 0.008 326); --tl-black: oklch(0.145 0.008 326); /* la tinta delle azioni */ --tl-tinta-50: oklch(0.969 0.016 293.756); --tl-tinta-100: oklch(0.943 0.029 294.588); --tl-tinta-200: oklch(0.894 0.057 293.283); --tl-tinta-300: oklch(0.811 0.111 293.571); --tl-tinta-400: oklch(0.702 0.183 293.541); --tl-tinta-500: oklch(0.606 0.25 292.717); --tl-tinta-600: oklch(0.541 0.281 293.009); --tl-tinta-700: oklch(0.491 0.27 292.581); --tl-tinta-800: oklch(0.432 0.232 292.759); --tl-tinta-900: oklch(0.38 0.189 293.745); --tl-tinta-950: oklch(0.283 0.141 291.089); /* i semantici che passano dal neutro alla tinta */ --tl-accent: var(--tl-tinta-600); --tl-accent-hover: var(--tl-tinta-700); --tl-accent-active: var(--tl-tinta-800); --tl-accent-subtle: var(--tl-tinta-100); --tl-accent-text: var(--tl-tinta-700); --tl-text-link: var(--tl-tinta-700); --tl-text-link-hover: var(--tl-tinta-800); /* La voce corrente della barra prende la tinta. Di serie ha lo stesso grigio dell'hover, cioè non si distingue da una voce puntata. ⚠ E si ferma qui: `--tl-nav-text-strong` — il colore dei titoli dei gruppi — resta al neutro. Provato coi due colori a schermo l'11 settembre 2026: coi titoli in tinta i dodici gruppi diventano tutti colorati e competono con la voce corrente, che è l'unica cosa in quella colonna che dice davvero qualcosa. */ --tl-nav-bg-active: var(--tl-tinta-100); /* Filament: la sua scala primaria e la sua scala neutra */ --primary-50: oklch(0.969 0.016 293.756); --primary-100: oklch(0.943 0.029 294.588); --primary-200: oklch(0.894 0.057 293.283); --primary-300: oklch(0.811 0.111 293.571); --primary-400: oklch(0.702 0.183 293.541); --primary-500: oklch(0.606 0.25 292.717); --primary-600: oklch(0.541 0.281 293.009); --primary-700: oklch(0.491 0.27 292.581); --primary-800: oklch(0.432 0.232 292.759); --primary-900: oklch(0.38 0.189 293.745); --primary-950: oklch(0.283 0.141 291.089); --gray-50: oklch(0.985 0 0); --gray-100: oklch(0.96 0.003 325.6); --gray-200: oklch(0.922 0.005 325.62); --gray-300: oklch(0.865 0.012 325.68); --gray-400: oklch(0.711 0.019 323.02); --gray-500: oklch(0.542 0.034 322.5); --gray-600: oklch(0.435 0.029 321.78); --gray-700: oklch(0.364 0.029 323.89); --gray-800: oklch(0.263 0.024 320.12); --gray-900: oklch(0.212 0.019 322.12); --gray-950: oklch(0.145 0.008 326); }