/*
 * Joorna v2 — Design tokens CORE (platform-wide)
 * ------------------------------------------------------------------
 * Fonte canonica dei token cromatici/tipografici/di motion condivisi
 * da TUTTI i pannelli Filament (admin + hotel) e da tutti i moduli
 * (campagne, automazioni, modelli, config, ...), NON solo WhatsApp.
 *
 * De-scope dei token core da `whatsapp-tokens.css` (che resta la sede
 * dei token/utility WhatsApp-specifici: --jo-wa-*, --jo-channel-*,
 * classi .jo-wa-*). Questo file va caricato PRIMA di whatsapp-tokens.css
 * nei render hook HEAD_END dei due PanelProvider.
 *
 * Servito da public/css direttamente (deploy PHP-only, niente Vite/npm —
 * vedi rationale nei PanelProvider). Cache-bust su mtime.
 *
 * Brand (2026-10-01): viola PASTELLO #7C5CCB (interazione: CTA,
 * selezione, focus, voce e step attivi) + lime JOORNA hsl(70 93% 51%)
 * solo come micro-accento (stati positivi, completamento, progress,
 * grafici) con varianti morbide --ds-lime-*. Distribuzione: 70–80% neutri,
 * 15–20% viola pastello, massimo 5–10% lime; mai viola neon, lime su
 * grandi superfici o bianco puro. Il pannello usa il viola JOORNA #7400FF
 * (cliente 28-ott-2026) solo dove si agisce: CTA, link, focus, selezione,
 * voce attiva; tutto il resto neutro. Surface/semantic/tipografia/radii/motion derivano
 * dal mockup (Tailwind Zinc + Inter). NON adottato il violet #8b5cf6.
 */

:root {
  /* ──────────────────────────────────────────────────────────
   * Brand — Primary (viola pastello #7C5CCB)
   * ────────────────────────────────────────────────────────── */
  --jo-primary-50:  #F7F1FF;
  --jo-primary-100: #EFE3FF;  /* primary soft */
  --jo-primary-200: #DEC6FF;  /* primary light */
  --jo-primary-300: #C095FF;
  --jo-primary-400: #9D55FF;
  --jo-primary-500: #8526FF;
  --jo-primary-600: #7400FF;  /* BASE — CTA, link, accent: viola JOORNA (cliente 28-ott-2026; prima #7145D9) */
  --jo-primary-700: #5E00D6;
  --jo-primary-800: #4A00A8;
  --jo-primary-900: #3D0089;

  /* ──────────────────────────────────────────────────────────
   * Brand — Secondary (Joorna lime #cff601)
   * ────────────────────────────────────────────────────────── */
  --jo-secondary:        #D0F60E;   /* lime JOORNA, hsl(70 93% 51%) */
  --jo-secondary-bg:     #F5F8E8;
  --jo-secondary-text:   #4B5A12;
  --jo-secondary-hover:  #C7DB63;

  /* ──────────────────────────────────────────────────────────
   * Surface / Neutrals (Tailwind Zinc, dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-surface-0:   var(--ds-surface, #ffffff); /* superficie delle card: Design System v2 */
  --jo-surface-50:  #fafafa;
  --jo-surface-100: #f4f4f5;
  --jo-surface-200: #e4e4e7;
  --jo-surface-300: #d4d4d8;
  --jo-surface-400: #a1a1aa;
  --jo-surface-500: #71717a;
  --jo-surface-600: #52525b;
  --jo-surface-700: #3f3f46;
  --jo-surface-800: #27272a;
  --jo-surface-900: #18181b;

  /* ──────────────────────────────────────────────────────────
   * Semantic (success / warning / danger / info)
   * ────────────────────────────────────────────────────────── */
  --jo-success:     #10b981;   /* emerald-500 */
  --jo-success-bg:  #ecfdf5;
  --jo-success-fg:  #065f46;

  --jo-warning:     #f59e0b;   /* amber-500 (token semantic custom dal mockup) */
  --jo-warning-bg:  #fffbeb;
  --jo-warning-fg:  #92400e;

  --jo-danger:      #ef4444;   /* red-500 */
  --jo-danger-bg:   #fef2f2;
  --jo-danger-fg:   #991b1b;

  --jo-info:        #3b82f6;   /* blue-500 */
  --jo-info-bg:     #eff6ff;
  --jo-info-fg:     #1e40af;

  /* ──────────────────────────────────────────────────────────
   * Typography (dal mockup — Inter)
   * ────────────────────────────────────────────────────────── */
  --jo-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jo-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  'Liberation Mono', 'Courier New', monospace;

  --jo-text-xs:    0.75rem;
  --jo-text-sm:    0.875rem;
  --jo-text-base:  1rem;
  --jo-text-lg:    1.125rem;
  --jo-text-xl:    1.25rem;

  /* ──────────────────────────────────────────────────────────
   * Border radius (dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-radius-sm:  0.25rem;
  --jo-radius-md:  0.375rem;
  --jo-radius-lg:  0.5rem;
  --jo-radius-xl:  0.75rem;
  --jo-radius-2xl: 1rem;
  --jo-radius-full: 9999px;

  /* ──────────────────────────────────────────────────────────
   * Shadow (Tailwind default)
   * ────────────────────────────────────────────────────────── */
  --jo-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --jo-shadow:     0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --jo-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --jo-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --jo-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ──────────────────────────────────────────────────────────
   * Motion (dal mockup)
   * ────────────────────────────────────────────────────────── */
  --jo-transition-duration: 0.15s;
  --jo-transition-timing:   cubic-bezier(0.4, 0, 0.2, 1);
  --jo-transition:          var(--jo-transition-duration) var(--jo-transition-timing);
}

/* ────────────────────────────────────────────────────────────
 * Componenti brand: bottoni Filament color="secondary"
 * ────────────────────────────────────────────────────────────
 * Il lime JOORNA è un micro-accento, mai una CTA piena: i bottoni
 * secondary sono lime tenue con testo oliva scuro (≥ 7:1), in chiaro e
 * in dark. Regola unica per tutti i bottoni secondary
 * dei due pannelli (es. "Forza aggiornamento token" in Pubblicità e
 * Analytics). */
.fi-btn.fi-color-secondary {
  background-color: var(--ds-lime-bg) !important;
  color: var(--ds-lime-fg) !important;
  box-shadow: inset 0 0 0 1px var(--ds-lime-light) !important;
}

.fi-btn.fi-color-secondary:hover {
  background-color: var(--ds-lime-light) !important;
}

/* ──────────────────────────────────────────────────────────────────
 * Design System v2 (2026-09-30) — alias canonici --ds-*
 * Tre piani: fondo app grigio medio → superficie bianco tenue (mai
 * bianco puro: abbaglia) → superficie interna tenue. Il salto fra fondo e
 * card dà il contrasto, non la luminosità. Testi con contrasto AA/AAA (mai sotto #6B6B7B su
 * bianco), un solo accento viola, stati a pillola con testo scuro su
 * fondo chiaro (≥ 6:1). Regole applicate in public/css/design-system.css;
 * i token --jo-* esistenti puntano qui.
 * ────────────────────────────────────────────────────────────────── */
:root {
  /* superfici */
  /* 2-ott (owner: "troppo bianco in primo piano, troppo grigio dietro,
     triste e fa male agli occhi"; poi "così è troppo viola"; poi "troppo
     grigio"): neutri luminosi appena freddi, niente lilla nei fondi. Fondo più chiaro e meno grigio, card meno luminose:
     il salto fra i piani è morbido, la separazione la danno bordo e ombra
     leggera, non il contrasto di luminosità. */
  --ds-bg-app: #EDEFF4;
  --ds-bg-sidebar: #F8F9FB;
  --ds-surface: #FCFCFD;
  --ds-surface-sunken: #F3F4F8;
  --ds-surface-hover: #ECEEF3;
  --ds-surface-2: var(--ds-surface-sunken); /* alias: superfici interne */
  --ds-border: #DFE2EA;
  --ds-border-strong: #C9CDD8;
  --ds-row-divider: #E8EAF0;

  /* testi (contrasto su #F6F7F9, la superficie delle card) */
  --ds-text-primary: #18181B;     /* 17.7:1 */
  --ds-text-secondary: #3F3F46;   /* 10.4:1 */
  --ds-text-tertiary: #5B5B6B;    /*  6.9:1 */
  --ds-text-placeholder: #6B6B7B; /*  5.3:1 */
  --ds-tooltip-bg: #27272A;       /* infopoint: tooltip scuro a contrasto */
  --ds-tooltip-fg: #F4F4F5;
  --ds-brand-whatsapp: #25D366;   /* icone dei canali (Inbox): colori dei marchi */
  --ds-brand-messenger: #0084FF;
  --ds-brand-email: #0284C7;
  --ds-brand-instagram: #E1306C;
  --ds-backdrop: rgb(15 18 22 / .45);      /* fondo scurito sotto overlay e caricamenti */
  --ds-focus-veil: rgb(15 17 23 / .12);     /* sezione, card-passo o riga aperta: velo sul resto, uno solo in tutta la piattaforma (owner 8-ott-2026) */
  --ds-focus-veil-filter: brightness(.93);
  --ds-focus-raise: 0 14px 32px -18px rgb(15 17 23 / .22), 0 1px 4px -1px rgb(15 17 23 / .06); /* ciò che resta in chiaro sopra il velo */
  --ds-text-disabled: #8A8A99;    /*  3.5:1, solo controlli disabilitati */
  --ds-text-link: #5E00D6;        /*  8.4:1 */

  /* accento */
  --ds-accent: #7400FF;
  --ds-accent-hover: #5E00D6;
  --ds-accent-fg: #5E00D6;
  --ds-accent-soft: #F4ECFF;
  --ds-accent-soft-2: #E9DAFF;
  --ds-accent-soft-hover: #EFE4FF;
  --ds-on-accent: #FFFFFF; /* testo e icone sopra il viola pieno (CTA) */
  --ds-focus-ring: 0 0 0 2px #FCFCFD, 0 0 0 4px #A866FF;

  /* lime JOORNA: solo micro-accento (stati positivi, completamento,
     progress, grafici). Mai CTA, testate o fondi estesi. */
  --ds-lime: #D0F60E;         /* hsl(70 93% 51%), il colore del logo */
  --ds-lime-soft: #C7DB63;
  --ds-lime-light: #DCE8A3;
  --ds-lime-bg: #F5F8E8;
  --ds-lime-strong: #8FA62A;  /* pallini e barre su fondo chiaro (≥ 3:1) */
  /* Lime pastello (owner 19-ott-2026): a metà fra il lime del logo, troppo
     acceso, e il viola pastello; per i colori di marca più estesi (menu). */
  --ds-lime-pastel: #BCDD2E;
  /* Scritta nel verde di marca su fondo chiaro (≥ 4.5:1). */
  --ds-lime-text: #4D8203;
  /* Contorno e ombra di marca (menu delle sotto-sezioni, owner 19-ott-2026). */
  --ds-brand-edge: #D3E485;
  --ds-brand-glow: 0 2px 10px -2px rgba(206, 226, 111, .55), 0 0 0 1px rgba(206, 226, 111, .35);
  --ds-lime-fg: #4B5A12;      /* testo su --ds-lime-bg (≥ 7:1) */

  /* forma */
  --ds-radius-card: 12px;
  --ds-radius-control: 8px;
  --ds-radius-pill: 999px;
  --ds-shadow-rest: 0 1px 2px rgba(20, 22, 40, .06), 0 1px 3px rgba(20, 22, 40, .08);
  --ds-shadow-raised: 0 4px 12px -2px rgba(20, 22, 40, .08), 0 2px 4px -2px rgba(20, 22, 40, .05);

  /* tabelle */
  --ds-row-stripe: #F7F8FB;
  --ds-row-hover: #F7F1FF;
  --ds-row-selected: #F0E5FF;
  --ds-empty: #8A8A99;

  /* stati: fondo / bordo / testo / pallino */
  --ds-ok-bg: #E7F6EE;   --ds-ok-bd: #BFE6D0;   --ds-ok-fg: #0B6B3A;   --ds-ok-dot: var(--ds-lime-strong);
  --ds-off-bg: #F1F2F6;  --ds-off-bd: #DDE0E8;  --ds-off-fg: #4A4A57;  --ds-off-dot: #8A8A99;
  --ds-warn-bg: #FEF3E2; --ds-warn-bd: #F9D9A6; --ds-warn-fg: #8A4B00; --ds-warn-dot: #D9A048;
  --ds-err-bg: #FDECEC;  --ds-err-bd: #F6C6C6;  --ds-err-fg: #A11A1A;  --ds-err-dot: #D96B6B;
  --ds-info-bg: #E8F0FE; --ds-info-bd: #C3D6FB; --ds-info-fg: #1D4ED8; --ds-info-dot: #6E8FD6;
  --ds-auto-bg: #F3EEFC; --ds-auto-bd: #DED2F5; --ds-auto-fg: #5F45A8; --ds-auto-dot: #8E72D6;

  /* toni dei KPI (owner 8-ott-2026: colore = stato, non argomento): tessere
     neutre; arancio = c'è da fare o da guardare, verde = risultato buono
     (ricavi, prenotazioni, conversioni). Con valore 0 si torna neutri
     (ui-standard.js). Persone, email, WhatsApp e AI non hanno più un colore. */
  --ds-tone-people-bg: var(--ds-tone-neutral-bg);   --ds-tone-people-fg: var(--ds-tone-neutral-fg);
  --ds-tone-email-bg: var(--ds-tone-neutral-bg);    --ds-tone-email-fg: var(--ds-tone-neutral-fg);
  --ds-tone-whatsapp-bg: var(--ds-tone-neutral-bg); --ds-tone-whatsapp-fg: var(--ds-tone-neutral-fg);
  --ds-tone-ai-bg: var(--ds-tone-neutral-bg);       --ds-tone-ai-fg: var(--ds-tone-neutral-fg);
  --ds-tone-money-bg: var(--ds-ok-bg);              --ds-tone-money-fg: var(--ds-ok-fg);
  --ds-tone-todo-bg: var(--ds-warn-bg);        --ds-tone-todo-fg: #B86A0C;
  --ds-tone-neutral-bg: var(--ds-off-bg);      --ds-tone-neutral-fg: var(--ds-text-tertiary);
  /* tag di ospiti e lead (App\Filament\Support\TagIcons::tone, owner 7-ott-2026) */
  --ds-tag-sky: #3B82B8;   --ds-tag-green: #3E9A63;  --ds-tag-amber: #B7791F;  --ds-tag-rust: #B4583A;
  --ds-tag-rose: #C04D6E;  --ds-tag-violet: #7C5CCB; --ds-tag-teal: #2C8C8C;   --ds-tag-gold: #9C8420;

  /* i neutri "400" non sono più testo illeggibile (era #a1a1aa, 2.6:1) */
  --jo-surface-400: #6B6B7B;  /* testo di contorno: 5.3:1 */
  --jo-surface-500: #5F5F6E;  /* 6.4:1 */

  /* Standard dei form (form-standard.css): testata delle card lilla
     pastello, accento JOORNA molto tenue. */
  --ds-card-head-bg: #F5F1FC;
  --ds-card-head-bg-hover: #EEE7FB;
  --ds-card-head-bd: #E4DBF6;
  --ds-card-head-fg: #2A1F47;
  /* card-passo (.jo-fstep): numeri outline fini, colore solo come accento */
  --ds-step-done-bg: #F7FBF8;     /* completata: verde quasi impercettibile */
  --ds-step-done-bd: #D3EBDD;
  --ds-step-done-ring: #9FD3B5;
  --ds-step-done-fg: #2E7A50;
  --ds-step-current-bd: #DCD1F4;  /* aperta: bordo lilla leggero */
  --ds-step-todo-ring: #CDD1DA;
  /* Sidebar leggera: icone tenui (non testo), hover e voce attiva appena accennati. */
  --ds-nav-icon: #9D55FF;   /* icone del menu viola (cliente 28-ott-2026) */
  --ds-nav-hover: #EEF0F5;
  --ds-nav-active-bg: #EFE3FF;
  --ds-field-border: #C5CBD5;   /* bordo dei campi al passaggio */
  /* Form (stile approvato 2-ott-2026): campi un filo più chiari della card,
   sezione aperta con testata appena lilla, focus con alone lilla discreto. */
  --ds-field-bg: #FEFEFF;
  --ds-section-open-head: #F8F5FE;
  --ds-field-focus-halo: rgba(116, 0, 255, .14);
}

/* Dark mode (standard globale; owner 28-ott-2026: proprio nero): pagina
 * nera, poi gradini di grigio quasi nero ben distinti — sidebar/topbar →
 * card → pannelli interni → hover —, bordi sottili, testi mai bianco puro e
 * secondari ben leggibili. Viola solo per selezione, CTA e stato attivo;
 * colori saturi al minimo (stati a bassa saturazione). */
.dark {
  /* In dark il lime più spento: un alone, non una luce. */
  --ds-lime-pastel: #B9CC5E;
  --ds-lime-text: #CEE26F;
  --ds-brand-edge: rgba(206, 226, 111, .45);
  --ds-brand-glow: 0 2px 12px -3px rgba(206, 226, 111, .35), 0 0 0 1px rgba(206, 226, 111, .25);
  --ds-bg-app: #000000;
  --ds-bg-sidebar: #0A0A0B;
  --ds-surface: #121214;
  --ds-surface-sunken: #19191C;
  --ds-surface-hover: #222226;
  --ds-surface-2: #19191C;
  --ds-border: #26272B;
  --ds-border-strong: #35363B;
  --ds-row-divider: #1E1F22;
  --ds-text-primary: #E8E9EC;
  --ds-text-secondary: #C9CBD1;
  --ds-text-tertiary: #ADB0B8;
  --ds-text-placeholder: #969AA3;
  --ds-tooltip-bg: #E8E9EC;
  --ds-tooltip-fg: #16171A;
  --ds-brand-whatsapp: #3DDC7A;
  --ds-brand-messenger: #3D9BFF;
  --ds-brand-email: #38BDF8;
  --ds-brand-instagram: #F2669B;
  --ds-backdrop: rgb(4 4 6 / .6);
  --ds-focus-veil: rgb(0 0 0 / .26);
  --ds-focus-veil-filter: brightness(.84);
  --ds-focus-raise: 0 14px 32px -16px rgb(0 0 0 / .6), 0 1px 4px -1px rgb(0 0 0 / .3);
  --ds-text-disabled: #6C6F78;
  --ds-text-link: #C9A3FF;
  --ds-accent: #9D55FF;
  --ds-accent-hover: #AE75FF;
  --ds-accent-fg: #CBA8FF;
  --ds-on-accent: #FFFFFF;
  --ds-accent-soft: rgba(133, 38, 255, .18);
  --ds-accent-soft-2: rgba(133, 38, 255, .30);
  --ds-accent-soft-hover: rgba(133, 38, 255, .24);
  --ds-focus-ring: 0 0 0 2px #121214, 0 0 0 4px #9D55FF;
  --ds-shadow-rest: 0 1px 2px rgba(0, 0, 0, .32);
  --ds-shadow-raised: 0 8px 20px -6px rgba(0, 0, 0, .6);
  /* Colori di riga opachi (equivalenti a bianco 1,8% / viola 7% e 13% sopra
     la card): la colonna Azioni sticky deve restare piena, sopra il testo
     che le scorre sotto. */
  --ds-row-stripe: #161618;
  --ds-row-hover: #1D1A26;
  --ds-row-selected: #251F33;
  --ds-empty: #6C6F78;
  --ds-ok-bg: rgba(74, 186, 128, .12);   --ds-ok-bd: rgba(74, 186, 128, .28);   --ds-ok-fg: #9BDDB8;
  --ds-off-bg: rgba(164, 171, 186, .10); --ds-off-bd: rgba(164, 171, 186, .22); --ds-off-fg: #C5CAD5;
  --ds-warn-bg: rgba(222, 160, 70, .12); --ds-warn-bd: rgba(222, 160, 70, .28); --ds-warn-fg: #EBC88E;
  --ds-err-bg: rgba(229, 105, 105, .12); --ds-err-bd: rgba(229, 105, 105, .28); --ds-err-fg: #F0AAAA;
  --ds-info-bg: rgba(108, 152, 230, .12); --ds-info-bd: rgba(108, 152, 230, .28); --ds-info-fg: #A9C4F2;
  --ds-auto-bg: rgba(140, 112, 214, .14); --ds-auto-bd: rgba(140, 112, 214, .30); --ds-auto-fg: #C4B5EE;
  --ds-tone-email-bg: var(--ds-tone-neutral-bg);
  --ds-tone-whatsapp-bg: var(--ds-tone-neutral-bg);
  --ds-tone-ai-bg: var(--ds-tone-neutral-bg);       --ds-tone-ai-fg: var(--ds-tone-neutral-fg);
  --ds-tone-money-bg: var(--ds-ok-bg);              --ds-tone-money-fg: var(--ds-ok-fg);
  --ds-tone-todo-fg: var(--ds-warn-fg);
  --ds-tag-sky: #8DBCE3;   --ds-tag-green: #8FD0A8;  --ds-tag-amber: #E6BE7A;  --ds-tag-rust: #E3A28A;
  --ds-tag-rose: #E8A0B5;  --ds-tag-violet: #C4B5EE; --ds-tag-teal: #86CFCF;   --ds-tag-gold: #D8C77A;
  --ds-card-head-bg: #18181B;
  --ds-card-head-bg-hover: #1E1E22;
  --ds-card-head-bd: #26272B;
  --ds-card-head-fg: #E7E9EF;
  --ds-lime-bg: rgba(199, 219, 99, .08);
  --ds-lime-light: rgba(199, 219, 99, .22);
  --ds-lime-soft: rgba(199, 219, 99, .45);
  --ds-lime-strong: #B9CC5A;
  --ds-lime-fg: #D6E39A;
  --ds-ok-dot: #B9CC5A;
  --ds-step-done-bg: rgba(74, 186, 128, .05);
  --ds-step-done-bd: rgba(74, 186, 128, .22);
  --ds-step-done-ring: rgba(120, 205, 158, .55);
  --ds-step-done-fg: #9BDDB8;
  --ds-step-current-bd: rgba(160, 135, 225, .38);
  --ds-step-todo-ring: #3A4354;
  --ds-nav-icon: #B184FF;
  --ds-nav-hover: rgba(255, 255, 255, .035);
  --ds-nav-active-bg: rgba(133, 38, 255, .20);
  --ds-field-border: #35363B;
  --ds-field-bg: #19191C;
  --ds-section-open-head: rgba(140, 112, 214, .08);
  --ds-field-focus-halo: rgba(157, 85, 255, .26);
}

/* Semantici --jo-* in dark: gli stessi stati a bassa saturazione dei --ds-*. */
.dark {
  --jo-success-bg: var(--ds-ok-bg);   --jo-success-fg: var(--ds-ok-fg);
  --jo-warning-bg: var(--ds-warn-bg); --jo-warning-fg: var(--ds-warn-fg);
  --jo-danger-bg: var(--ds-err-bg);   --jo-danger-fg: var(--ds-err-fg);
  --jo-info-bg: var(--ds-info-bg);    --jo-info-fg: var(--ds-info-fg);
}

/* La scala grigia di Filament (Zinc, quasi nera) in dark diventa la stessa
 * scala blu-grigio: card, tabelle, modali, menu, campi e testi nativi
 * seguono i token senza toccare le pagine. In chiaro resta Zinc. */
html.dark {
  /* Grigi neutri, fino al nero (owner 19-ott-2026: il blu-grigio sembrava
     navy; 28-ott-2026: il tema scuro proprio nero). */
  --gray-50: 243, 243, 245;
  --gray-100: 232, 233, 236;
  --gray-200: 218, 219, 223;
  --gray-300: 201, 203, 209;
  --gray-400: 173, 176, 184;
  --gray-500: 138, 141, 150;
  --gray-600: 98, 101, 110;
  --gray-700: 53, 54, 59;
  --gray-800: 34, 34, 38;
  --gray-900: 18, 18, 20;
  --gray-950: 0, 0, 0;
}