/* =============================================================================
Tokens do GPlaybacks. As decisoes, e so elas: cor, raio, espaco, tipo,
sombra e tempo. Nenhum seletor pinta nada aqui.
POR QUE ESTE ARQUIVO EXISTE SEPARADO: as paginas de conta (styles/auth.css)
e o app (static/app.css) declaravam a MESMA paleta duas vezes, com os mesmos
hex copiados. Duas copias divergem, e foi o que aconteceu: o login ganhou
acento chapado e escala de raio, o app continuou com gradiente em tudo e
nove raios soltos. Um arquivo so, carregado pelos dois, e a unica forma de
isso nao voltar a acontecer.
COMO CARREGAR: proprio, ANTES da folha da pagina. Nao use @import:
ele adiciona uma viagem de rede e bloqueia a renderizacao.
A camada e declarada aqui para valer no documento inteiro. Folha carregada
depois pode declarar a mesma ordem sem efeito nenhum: a primeira vale.
============================================================================= */
@layer tokens, base, components, utilities;
/* A FONTE DA MARCA. Archivo (OFL, static/fonts/OFL.txt), so para TITULO: nome
de tela, titulo de cartao, o cartao de boas-vindas e numero grande. O corpo
continua na fonte do sistema, que e a que le melhor em 14px e nao custa nada.
Um arquivo so, de 26 KB: a variavel do Google Fonts recortada no peso 800
(o unico que a marca usa) e com o eixo de largura (wdth) inteiro, porque a
marca pede 112%. Mora no proprio servidor, e nao no Google Fonts: a CSP e
font-src 'self', e num app de palco a fonte tem que abrir sem rede (o
service worker a guarda junto com a casca). `swap` mostra o titulo na fonte
do sistema enquanto ela chega, em vez de esconder o texto. */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 800;
font-stretch: 100% 125%;
font-display: swap;
src: url('/static/fonts/archivo-800-wdth.woff2') format('woff2-variations'),
url('/static/fonts/archivo-800-wdth.woff2') format('woff2');
}
/* ============================================================================
1. TOKENS
========================================================================== */
@layer tokens {
/* O TEMA ESCURO E O PADRAO, e este bloco e ele. O claro (secao 1b) so troca
as CORES; raio, espaco, tipo e tempo sao os mesmos nos dois.
Quem escolhe e /src/core/tema.js, o primeiro script de cada pagina: ele
escreve data-tema="claro" ou "escuro" no antes da primeira pintura.
Sem ele (script bloqueado, pagina antiga em cache) a tela fica no escuro,
que e o visual de sempre, e nao num meio-termo. */
:root {
color-scheme: dark;
/* -- marca ---------------------------------------------------------------
GPlaybacks, da Familia G (GStudios). Tres cores e so: preto palco
#07060B, creme #F4F1EA e o coral "play" #FF6B5B, o acento deste produto.
A ONDA DA MARCA E A MUSICA TOCANDO: o trecho em coral e o que ja saiu do
play, o resto e creme. Por isso o coral fica sempre no COMECO de qualquer
barra (progresso, carregando, o equalizador do player) e so ele: nunca no
fim, nunca como segunda cor de um degrade.
--brand-1..5 deixaram de ser o arco-iris do simbolo antigo. Viraram a
escala do coral ate o creme, que e a propria onda: quem pinta com eles
(o contorno da musica atual, os icones das fontes) continua dizendo
"marca" sem trazer cor de fora. */
--coral: #FF6B5B;
--coral-rgb: 255 107 91;
--brand-1: #FF6B5B;
--brand-2: #FF8C7F;
--brand-3: #FFAEA3;
--brand-4: #F9CFC7;
--brand-5: #F4F1EA;
--gradient: linear-gradient(120deg, var(--brand-1), var(--brand-3), var(--brand-5));
/* As mesmas cores em canais soltos, para os fundos translucidos da marca:
rgb(var(--brand-1-rgb) / .12). Sem isso cada fundo tingido repetia o hex. */
--brand-1-rgb: 255 107 91;
--brand-3-rgb: 255 174 163;
--brand-5-rgb: 244 241 234;
/* -- superficie ----------------------------------------------------------
O preto palco e os degraus acima dele. Nao e cinza puro: o #07060B tem
um fio de violeta, e as superficies sao ele mesmo com mais luz, para a
tela inteira ler como uma peca so.
Quatro niveis. Se um elemento precisa se destacar, ele sobe de nivel ou
ganha borda; nao invente um quinto. */
--background: #07060B;
--surface: #0C0B11;
--card: #121118;
--card-elevated: #1A1821;
--input: #0F0E15;
/* -- texto ----------------------------------------------------------------
Creme, e nao branco: e a cor do logo sobre o preto. Os dois de apoio
ficam acima de 5:1 sobre o cartao mais claro (UX-26). */
--foreground: #F4F1EA;
--muted-foreground: #ABA6B2;
--subtle-foreground: #96919D;
--on-brand: #07060B;
/* -- borda ---------------------------------------------------------------
VISIVEIS de proposito. Sem borda um cartao escuro sobre fundo escuro nao
tem forma: vira uma mancha um pouco mais clara. */
--border: #24222B;
--border-strong: #2F2C37;
--border-hover: #46424F;
/* FIO DE CABELO: o creme a poucos por cento. Em superficie escura uma borda
solida fica do mesmo cinza em qualquer fundo; a translucida acompanha o
degrau de baixo, entao o mesmo fio le igual sobre o preto palco e sobre o
cartao erguido. E o que da contorno sem desenhar caixa (W9). */
--hairline: rgba(244, 241, 234, .075);
--hairline-strong: rgba(244, 241, 234, .13);
/* -- estado --------------------------------------------------------------
O acento e o CORAL, com texto preto palco em cima (7,2:1). O botao de
acao continua sendo a coisa mais achavel da tela, no escuro do show.
--accent-text e o coral quando ele e LETRA (link, "baixando", aviso
curto). No escuro e o proprio coral; no claro ele escurece, porque o
#FF6B5B sobre creme fica em 2,5:1. */
--accent: #FF6B5B;
--accent-hover: #FF8174;
--accent-active: #F0584A;
--accent-foreground: #07060B;
--accent-text: #FF6B5B;
--ring: #FF8174;
--ring-halo: rgba(255, 107, 91, .26);
--success: #4ade80;
--success-bg: rgba(74, 222, 128, .10);
--success-border: rgba(74, 222, 128, .25);
--warning: #fbbf24;
--warning-bg: rgba(251, 191, 36, .09);
--warning-border: rgba(251, 191, 36, .24);
/* PERIGO NAO E O ACENTO. Com o coral de acento, o vermelho-salmao de antes
(#f87171) virava a mesma cor do botao de tocar: erro e acao lendo igual.
Ele foi para o carmim, do outro lado do vermelho, e o erro de campo
continua com o icone de alerta ao lado (--icon-alert), entao a diferenca
nao depende so da cor. */
--destructive: #FF5A7E;
--destructive-bg: rgba(255, 90, 126, .09);
--destructive-border: rgba(255, 90, 126, .30);
--destructive-halo: rgba(255, 90, 126, .22);
/* Icone de pagamento recusado e de pagamento em analise. A espera saiu do
laranja, que encostava no coral, e foi para o ambar do aviso. */
--gradiente-falha: linear-gradient(135deg, #ff5a7e, #b0124a);
--gradiente-espera: linear-gradient(135deg, #fbbf24, #d97706);
/* -- camadas translucidas ----------------------------------------------
Canais RGB soltos, usados como rgb(var(--tinta) / .1). Um canal so por
PAPEL, e e isso que faz o tema claro funcionar sem caçar regra por regra:
tinta a cor do texto. Realce de linha, trilho, alca: o que no escuro e
branco translucido vira preto translucido no claro.
papel a cor do fundo. Halo que descola texto de uma imagem que passa
por tras (sombra de texto, sombra de icone).
sombra sombra projetada. Preta no escuro; cinza no claro, onde preto a
60% vira mancha.
veu o escurecido atras de folha e modal. Preto nos dois temas.
luz luz ambiente e fio claro: branca nos dois temas. */
--tinta: 244 241 234;
--papel: 7 6 11;
--sombra: 0 0 0;
--veu: 0 0 0;
--luz: 255 255 255;
/* -- raio ----------------------------------------------------------------
Tudo deriva de --radius. Mudar uma linha reafina o app inteiro, que e o
ponto: antes eram nove valores soltos (6, 10, 12, 14, 18, 20, 22, 32,
999) sem relacao nenhuma entre si. */
--radius: 8px;
--radius-xs: calc(var(--radius) - 4px);
--radius-sm: calc(var(--radius) - 2px);
--radius-md: calc(var(--radius) - 1px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 6px);
--radius-2xl: calc(var(--radius) + 6px);
--radius-3xl: calc(var(--radius) + 10px);
--radius-full: 999px;
/* Raio por PAPEL (W9). Nao e tudo redondo: controle e campo um pouco, o
cartao mais, o que flutua mais ainda, e so pastilha e botao de tocar sao
pilula ou circulo. Linha de lista nao tem raio, e faixa. */
--raio-controle: 12px;
--raio-cartao: 16px;
--raio-flutua: 20px;
--raio-folha: 26px;
/* -- espaco --------------------------------------------------------------
Base 4px. Toda margem e todo padding sai daqui. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* -- tipografia ----------------------------------------------------------
Escala de FERRAMENTA, nao de landing page.
O corpo desceu de 15 para 14px e o display subiu: contraste de escala e
o que cria hierarquia de verdade. Antes quase tudo vivia entre 13 e 17px
com peso 700 ou 800, entao nada se destacava porque tudo se destacava.
--text-label e o degrau que nao existia: 11px em caixa alta com
entreletra aberta, para rotulo de campo e cabecalho de secao. E ele que
faz uma interface densa continuar legivel sem precisar de caixa em volta
de cada grupo. */
--fs: 1;
/* O degrau mais baixo, para selo e rotulo curto (o "15% off" do cartao de
plano, o "MELHOR VALOR"). Ja era usado em cinco lugares de auth.css e
nunca tinha sido definido: `font-size: var(--text-2xs)` com a variavel
ausente invalida a declaracao inteira, entao o selo herdava o tamanho do
cartao e saia maior que o rotulo ao lado dele, sem erro no console. */
--text-2xs: calc(11px * var(--fs));
--text-label: calc(11px * var(--fs));
--text-xs: calc(12px * var(--fs));
--text-sm: calc(13px * var(--fs));
--text-base: calc(14px * var(--fs));
--text-md: calc(15px * var(--fs));
--text-lg: calc(17px * var(--fs));
--text-xl: calc(21px * var(--fs));
--text-2xl: calc(27px * var(--fs));
--text-3xl: calc(38px * var(--fs));
--text-display: calc(56px * var(--fs));
/* Corpo respira, titulo aperta. Titulo grande com entrelinha de corpo e um
dos erros que mais denunciam falta de tipografia. */
--leading-display: .98;
--leading-tight: 1.12;
--leading-snug: 1.32;
--leading-normal: 1.55;
--leading-relaxed: 1.7;
/* Quanto maior o texto, mais fechado o espacejamento. */
--tracking-display: -.035em;
--tracking-tighter: -.025em;
--tracking-tight: -.014em;
--tracking-normal: 0;
--tracking-label: .085em;
/* O rotulo de cima (o "PLAYBACK PARA QUEM CANTA AO VIVO" da pagina de venda):
caixa alta, miudo e aberto. Diz o assunto do bloco sem disputar com ele. */
--tracking-eyebrow: .14em;
/* Pesos com proposito. 800 em tudo e o que faz a tela gritar sem hierarquia. */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Titulo: Archivo ExtraBold, largura 112%, espacamento -4%, a regra da
marca. Use os quatro juntos (classe .display em app.css e auth.css);
separados, o titulo sai num meio-termo que nao e nem a marca nem o
sistema. */
--font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
--weight-display: 800;
--stretch-display: 112%;
--tracking-brand: -.04em;
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
/* Numero em tabela e cronometro nao podem dancar de largura a cada digito. */
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
/* -- sombra --------------------------------------------------------------
glow e exclusiva do botao primario e do cartao em destaque. Usar em
mais lugares mata o destaque dos dois. */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
--shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
--shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
--shadow-glow: 0 4px 16px rgba(0, 0, 0, .45);
/* -- elevacao (W9) ------------------------------------------------------
Tres degraus, e so tres. Cada um e o fio de luz em cima (a quina que pega
a luz do palco) mais uma sombra que cresce com a altura:
elev-1 o que esta apoiado: cartao, linha escolhida, campo
elev-2 o que flutua sobre a lista: player, barra de abas, menu
elev-3 o que cobre a tela: folha, modal, boas-vindas */
--elev-1: inset 0 1px 0 rgba(244, 241, 234, .045), 0 1px 2px rgba(0, 0, 0, .45);
--elev-2: inset 0 1px 0 rgba(244, 241, 234, .06), 0 14px 36px -14px rgba(0, 0, 0, .85),
0 2px 6px rgba(0, 0, 0, .4);
--elev-3: inset 0 1px 0 rgba(244, 241, 234, .07), 0 32px 80px -24px rgba(0, 0, 0, .9);
/* -- o brilho do play (W9) ---------------------------------------------
O mesmo halo do celular da pagina de venda: luz coral vazando por baixo
do que ESTA TOCANDO. Ele tem um sentido so, e por isso so aparece em tres
lugares: o player com musica tocando, a linha da musica atual e o botao
primario sob o ponteiro. Em qualquer outro lugar ele vira enfeite. */
--glow-play: 0 22px 50px -22px rgba(255, 107, 91, .62), 0 10px 26px -18px rgba(255, 107, 91, .5);
--glow-cta: 0 12px 36px -10px rgba(255, 107, 91, .55);
/* A linha que toca brilha menos que o player: ela e uma entre muitas, e o
halo nao pode escorrer para a musica de baixo. */
--glow-linha: 0 10px 28px -20px rgba(255, 107, 91, .55);
--coral-wash: rgba(255, 107, 91, .11);
--coral-wash-fraco: rgba(255, 107, 91, .045);
--coral-fio: rgba(255, 107, 91, .34);
/* Luz de cima da tela, quase nada: e o que tira o fundo do chapado sem
virar degrade de cor. Creme, nunca violeta. */
--luz-topo: rgba(244, 241, 234, .045);
--fumaca-coral: rgba(255, 107, 91, .16);
/* Fio de luz na quina. E o que faz um botao ler como material em vez de
retangulo pintado, e substitui o halo colorido que estava no lugar.
Estes dois nomes JA ERAM USADOS por auth.css e app.css e nunca foram
definidos. Variavel indefinida dentro de var() invalida a declaracao
INTEIRA no computed value, entao o `box-shadow` do botao primario nao
caia num valor menor: ele simplesmente nao existia, nas duas folhas, sem
aviso nenhum no console.
highlight superficie escura: a luz vem de cima.
highlight-strong superficie clara (o acento): luz em cima e assentamento
embaixo, senao o botao branco flutua sem base. */
--highlight: inset 0 1px 0 rgba(255, 255, 255, .06);
--highlight-strong: inset 0 1px 0 rgba(255, 255, 255, .28),
inset 0 -1px 0 rgba(0, 0, 0, .12);
/* -- movimento -----------------------------------------------------------
Uma curva so. Duas curvas em telas vizinhas ja parecem dois produtos. */
--ease: cubic-bezier(.2, .8, .2, 1);
--duration-fast: 120ms;
--duration: 180ms;
--duration-slow: 300ms;
/* -- area segura ---------------------------------------------------------- */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
/* -- icone ---------------------------------------------------------------
Mascara do alerta de campo invalido. SVG embutido em vez de arquivo:
sao 200 bytes e uma requisicao a menos no boot, e como e mask, a cor
vem do currentColor de quem usar. */
--icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='7' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
/* Visto da lista de beneficios do plano. Mesma tecnica do alerta: mask,
entao a cor vem de quem usa. */
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
/* Nota musical do estado vazio das listas. */
--icon-nota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
/* A onda da marca (as oito barras do simbolo), para o estado vazio das
listas: a musica que ainda nao tocou. Mascara, entao a cor vem de quem usa. */
--icon-onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 94.62 96.15 23.08'%3E%3Crect x='0' y='101.35' width='8.65' height='9.62' rx='1.92'/%3E%3Crect x='12.5' y='96.54' width='8.65' height='19.23' rx='1.92'/%3E%3Crect x='25' y='94.62' width='8.65' height='23.08' rx='1.92'/%3E%3Crect x='37.5' y='99.42' width='8.65' height='13.46' rx='1.92'/%3E%3Crect x='50' y='97.5' width='8.65' height='17.31' rx='1.92'/%3E%3Crect x='62.5' y='94.62' width='8.65' height='23.08' rx='1.92'/%3E%3Crect x='75' y='100.38' width='8.65' height='11.54' rx='1.92'/%3E%3Crect x='87.5' y='102.31' width='8.65' height='7.69' rx='1.92'/%3E%3C/svg%3E");
/* -- largura -------------------------------------------------------------- */
--width-form: 420px;
--width-wide: 960px;
}
/* ==========================================================================
1b. TEMA CLARO
So cores. Contraste conferido com axe (WCAG AA) em todas as telas:
texto de apoio a 5:1 ou mais sobre o fundo mais escuro em que aparece,
o acento continua coral com letra preta (o coral de LETRA escurece, ver
--accent-text), e as cores de estado descem para os tons 700, que sao os
que leem sobre creme.
`:not([data-palco])`: o modo palco fica sempre escuro, em qualquer tema.
Ele e usado no show, com a luz da casa apagada; uma tela branca ali ofusca
quem canta e ilumina o rosto por baixo. O app marca o com
data-palco enquanto o palco esta aberto (ver go() em app.js).
======================================================================== */
:root[data-tema="claro"]:not([data-palco]) {
color-scheme: light;
/* No claro a escala da marca vai do coral ESCURO ao preto palco: estes
tokens tambem pintam LETRA (titulo de bloco, icone de fonte), e o coral
puro sobre creme nao passa de 2,5:1. O coral de preenchimento continua
em --coral, igual nos dois temas. */
--coral: #FF6B5B;
--coral-rgb: 255 107 91;
--brand-1: #A8321F;
--brand-2: #96301F;
--brand-3: #7E2E22;
--brand-4: #4A2A26;
--brand-5: #07060B;
--brand-1-rgb: 168 50 31;
--brand-3-rgb: 126 46 34;
--brand-5-rgb: 7 6 11;
/* Creme, e as superficies em volta dele: o fundo de fora um degrau mais
fundo, o cartao um degrau mais claro (quase branco, ainda quente). */
--background: #ECE8DF;
--surface: #F4F1EA;
--card: #FFFDF9;
--card-elevated: #EFEBE3;
--input: #FFFDF9;
--foreground: #07060B;
--muted-foreground: #524D58;
--subtle-foreground: #5E5964;
--on-brand: #07060B;
--border: #E3DED4;
--border-strong: #D5CFC3;
--border-hover: #A39D92;
--hairline: rgba(7, 6, 11, .085);
--hairline-strong: rgba(7, 6, 11, .14);
/* O botao continua coral com letra preta (7,2:1). O que escurece e o coral
de LETRA: #A8321F fica acima de 5,4:1 no fundo mais fundo do claro. */
--accent: #FF6B5B;
--accent-hover: #F25E4E;
--accent-active: #E0503F;
--accent-foreground: #07060B;
--accent-text: #A8321F;
--ring: #A8321F;
--ring-halo: rgba(168, 50, 31, .22);
--success: #13743a;
--success-bg: rgba(22, 163, 74, .10);
--success-border: rgba(22, 163, 74, .32);
--warning: #8a4a06;
--warning-bg: rgba(217, 119, 6, .10);
--warning-border: rgba(217, 119, 6, .34);
--destructive: #B0124A;
--destructive-bg: rgba(176, 18, 74, .07);
--destructive-border: rgba(176, 18, 74, .30);
--destructive-halo: rgba(176, 18, 74, .18);
--shadow-sm: 0 1px 2px rgba(7, 6, 11, .08);
--shadow-md: 0 8px 24px rgba(7, 6, 11, .10);
--shadow-lg: 0 24px 64px rgba(7, 6, 11, .16);
--shadow-glow: 0 4px 16px rgba(7, 6, 11, .14);
--highlight: inset 0 1px 0 rgba(255, 255, 255, .7);
--highlight-strong: inset 0 1px 0 rgba(255, 255, 255, .30),
inset 0 -1px 0 rgba(0, 0, 0, .14);
/* No claro a elevacao e sombra quente e curta: preto a 60% sobre creme vira
mancha. O fio de cima e branco, que e a luz no papel. */
--elev-1: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(60, 44, 30, .08);
--elev-2: inset 0 1px 0 rgba(255, 255, 255, .85), 0 14px 34px -16px rgba(60, 44, 30, .28),
0 2px 6px rgba(60, 44, 30, .07);
--elev-3: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 70px -26px rgba(60, 44, 30, .34);
--glow-play: 0 20px 44px -22px rgba(255, 107, 91, .5), 0 8px 20px -16px rgba(255, 107, 91, .34);
--glow-cta: 0 12px 30px -12px rgba(255, 107, 91, .55);
--glow-linha: 0 10px 24px -20px rgba(255, 107, 91, .45);
--coral-wash: rgba(255, 107, 91, .12);
--coral-wash-fraco: rgba(255, 107, 91, .05);
--coral-fio: rgba(214, 74, 54, .38);
--luz-topo: rgba(255, 255, 255, .55);
--fumaca-coral: rgba(255, 107, 91, .10);
--tinta: 7 6 11;
--papel: 255 253 249;
--sombra: 112 104 96;
}
/* Apelidos da nomenclatura antiga. Existem para que qualquer regra ou pagina
que este arquivo nao alcance continue pintando certo em vez de cair em
`initial` (cor preta em fundo preto, que some sem erro). Codigo novo usa
os nomes semanticos acima. */
:root {
--bg: var(--surface);
--bg2: var(--background);
--card2: var(--input);
--line: var(--border);
--line2: var(--border-strong);
--text: var(--foreground);
--muted: var(--muted-foreground);
--muted2: var(--subtle-foreground);
--g1: var(--brand-1);
--g2: var(--brand-2);
--g3: var(--brand-3);
--g4: var(--brand-4);
--g5: var(--brand-5);
--grad: var(--gradient);
--ok: var(--success);
--warn: var(--warning);
--danger: var(--destructive);
--r: var(--radius-xl);
--sat: var(--safe-top);
--sab: var(--safe-bottom);
--sal: var(--safe-left);
--sar: var(--safe-right);
}
}