/* ================================================================
   TEMA CLARO/ESCURO — Tokens globais
   Prova de conceito: aplicado ao layout base + topbar.
   Os demais módulos (Kanban, Financeiro, Documentos etc.) ainda
   usam cores fixas e serão migrados em fases seguintes.
   ================================================================ */

:root[data-theme="dark"] {
    --bg-0: #060d1a;
    --bg-1: #07111f;
    --bg-2: #111b2b;
    --bg-3: #1f304a;

    --text-1: #dde3ef;
    --text-2: #9fb0c9;
    --text-3: #6b7a94;

    --gold: #c9a25d;
    --gold-strong: #c19a3d;
    --gold-light: #e8d5a8;
    --gold-solid: #d4af37;
    --gold-vivid: #c9a25d; /* já é vivo no escuro — mesmo tom de --gold */
    --gold-vivid-strong: #c19a3d; /* idem — mesmo tom de --gold-strong */

    /* Texto para escrever POR CIMA de um preenchimento sólido de --gold/
       --gold-solid/--gold-strong (botão cheio, badge, aba ativa) — nunca usar
       --text-* aqui: aqueles são pra texto sobre --bg-*, não sobre dourado.
       Promovido do padrão --ass-sobre-acento (assinador.css), que já
       resolvia isso só pra aquela tela; achado 07/09 num botão do
       FMoreiraMail com o mesmo problema (--gold-solid + texto escuro fixo
       ficava escuro-sobre-escuro nos temas claros). */
    --sobre-gold: #07111f;

    --border: rgba(201, 162, 93, 0.45);
    --border-soft: rgba(201, 162, 93, 0.15);
    --border-mid: rgba(201, 162, 93, 0.3);

    --topbar-grad: linear-gradient(180deg, #0a1525 0%, #07111f 55%, #060e18 100%);
    --bottombar-grad: linear-gradient(180deg, #13213a 0%, #0b1628 100%);

    --sombra-gaveta: 0 10px 20px rgba(7, 17, 31, .95);

    --glass-bg: rgba(7, 17, 31, 0.9);
    --dropdown-grad: linear-gradient(180deg, #10203a 0%, #07111f 100%);
    --input-grad: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(0, 0, 0, .35) 100%);
    --input-text: #fff;
    --input-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);

    --danger-bg: rgba(176, 48, 48, 0.22);
    --danger-text: #e8a0a0;
    --danger-border: rgba(224, 112, 112, 0.75);

    --linha-grad-default: linear-gradient(135deg, rgba(18, 51, 11, 0.92), rgba(20, 50, 100, 0.96));

    --status-nada-text: #dfe6ef;
    --status-danger-text: #ffb4b4;
    --status-warning-text: #ffd77c;
    --status-info-text: #9bc0ff;
    --status-success-text: #a8f0b7;
    --status-neutral-text: #d9d9d9;

    --obs-text: #d8c9a8;
    --obs-placeholder: rgba(216, 201, 168, 0.45);

    --est-vinho-text: #ff8aa0;
    --est-prata-text: #bec2c4;
    --est-grafite-text: #9aa3ad;
    --est-cobre-text: #d4a574;

    /* Dashboard: tokens semânticos (turno, alerta/ok) — antes eram hex fixos
       (#5aa4e0/#e05555/#5ec97a) que quebravam no tema claro. */
    --turno-manha: #6ab4f5;
    --turno-tarde: #c9a25d;
    --alerta: #e05555;
    --alerta-forte: #b0303a;
    --ok: #5ec97a;
    --aviso: #e0a955;
    /* -vivid: dark já é vívido, repete o valor normal (mesma lógica dos --acc-*-vivid). */
    --alerta-vivid: #e05555;
    --ok-vivid: #5ec97a;
    --aviso-vivid: #e0a955;

    /* Paleta de acento do dashboard — um tom por KPI/seção, para o painel
       não ficar só cinza+dourado. Cada tom tem par no tema claro. */
    --acc-azul:     #6ab4f5;
    --acc-indigo:   #8f8bf0;
    --acc-ciano:    #46c9c0;
    --acc-verde:    #5ec97a;
    --acc-ambar:    #e0a955;
    --acc-laranja:  #ef8f4c;
    --acc-vermelho: #e05555;
    --acc-rosa:     #e87fa8;

    /* --acc-*-vivid existe pros temas claros (ver tema light) usarem em
       elemento decorativo grande sem ficar escuro/sem vida. No dark o
       --acc-* normal já é vívido — repete o mesmo valor pra não deixar as
       regras que usam -vivid sem cor aqui. */
    --acc-azul-vivid:     #6ab4f5;
    --acc-indigo-vivid:   #8f8bf0;
    --acc-ciano-vivid:    #46c9c0;
    --acc-verde-vivid:    #5ec97a;
    --acc-ambar-vivid:    #e0a955;
    --acc-laranja-vivid:  #ef8f4c;
    --acc-vermelho-vivid: #e05555;
    --acc-rosa-vivid:     #e87fa8;

    /* Central WhatsApp — cores que são do app, não do ERP. Vivem aqui (e não
       em whatsapp.css) porque a versão mobile não carrega aquele arquivo, mas
       carrega este: é o único ponto compartilhado pelas duas telas. */
    --wa-verde:       #25d366;               /* preenchimento de marca (badge, enviar) */
    --wa-verde-texto: #25d366;               /* verde como texto/borda sobre fundo escuro */
    --wa-verde-suave: rgba(37, 211, 102, .15);
    --wa-tick-lido:   #34b7f1;               /* azul do ✓✓ — sem equivalente no ERP */
    --wa-in-bg:       rgba(140, 154, 176, .16);  /* bolha recebida */
    --wa-out-bg:      rgba(218, 165, 32, .18);   /* bolha enviada */
    --wa-neutro-bg:   rgba(140, 154, 176, .12);

    /* Fundo de TELA (atrás dos cards da Planilha), distinto do fundo do card
       (--bg-2) — pedido 06/09/2026: cards em grid ficavam "lavados" contra o
       fundo, quase a mesma cor. --bg-0 já existe pra esse exato papel de pano
       de fundo recuado (login.css, agenda.css fim de semana, fmoreira-pdf.css)
       — reaproveita em vez de inventar tom novo. No escuro --bg-0 é MAIS
       ESCURO que --bg-2 (luminância relativa quase metade — 12,5 vs 26,0),
       cria contraste real mesmo os hex sendo próximos. */
    --bg-canvas: var(--bg-0);
}

:root[data-theme="light"] {
    /* Paleta rebaixada duas vezes: o claro original (#f8f2f2, quase branco) estourava
       a tela. Nenhuma superfície de interface passa de #e7ddc9 — branco puro no claro
       fica reservado a "papel" de documento (preview de PDF/contrato/assinatura). */
    --bg-0: #dcd0b9;
    --bg-1: #e7ddc9;
    --bg-2: #dccfb5;
    --bg-3: #c8b491;

    --text-1: #1a2436;
    --text-2: #33415a;
    --text-3: #4d4839;

    /* Dourados escurecidos junto com o fundo: o #a6802f antigo já dava só 3,0:1
       sobre a superfície clara — abaixo do mínimo pra texto pequeno. Ajustados de novo
       em 01/08 porque vários tokens só tinham sido conferidos contra --bg-1/--bg-2 e
       ficavam abaixo de 4,5:1 contra --bg-3 (hover de linha, chips, badges). */
    --gold: #5a4410;
    --gold-strong: #5a4412;
    --gold-light: #55400f;
    --gold-solid: #5a4412;

    /* --gold* acima ficou marrom pra caber em 4,5:1 mesmo sobre --bg-3 (a pior
       superfície). --gold-vivid é mais saturado/dourado (~4,7:1 vs --bg-0/--bg-1),
       mas só passa 3,5:1 vs --bg-3 — usar apenas onde o fundo é --topbar-grad
       (nav lateral/topbar), nunca em chip/hover sobre --bg-3. Achado 17/08. */
    --gold-vivid: #715209;
    --gold-vivid-strong: #573e05; /* par mais escuro do --gold-vivid, pra gradiente de preenchimento (ex. toggle ativo) */

    /* Ver comentário completo no tema dark acima. Testado ≥7,5:1 contra
       --gold/--gold-solid/--gold-strong deste tema (todos ficam marrom
       escuro aqui, então texto claro sempre cabe). */
    --sobre-gold: #ffffff;

    --border: rgba(114, 86, 20, 0.58);
    --border-soft: rgba(114, 86, 20, 0.32);
    --border-mid: rgba(114, 86, 20, 0.45);

    --topbar-grad: linear-gradient(180deg, #e7ddc9 0%, #dcd0b9 100%);
    --bottombar-grad: linear-gradient(180deg, #e7ddc9 0%, #dccfb5 100%);

    /* No claro a sombra pesada do escuro virava uma faixa suja sob o cabeçalho. */
    --sombra-gaveta: 0 8px 16px -10px rgba(60, 45, 20, .45);

    --glass-bg: rgba(231, 221, 201, 0.80);
    --dropdown-grad: linear-gradient(180deg, #e7ddc9 0%, #dcd0b9 100%);
    --input-grad: linear-gradient(180deg, rgba(0, 0, 0, .015) 0%, rgba(0, 0, 0, .05) 100%);
    --input-text: #1a2436;
    --input-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);

    --danger-bg: rgba(196, 58, 58, 0.12);
    --danger-text: #842727;
    --danger-border: rgba(196, 58, 58, 0.5);

    --linha-grad-default: linear-gradient(135deg, rgba(190, 224, 176, 0.55), rgba(186, 205, 232, 0.55));

    /* Acentos escurecidos um degrau junto com o fundo (todos ≥ 4,5:1 sobre --bg-1). */
    --status-nada-text: #33415a;
    --status-danger-text: #862527;
    --status-warning-text: #5d420c;
    --status-info-text: #183ea9;
    --status-success-text: #0f522a;
    --status-neutral-text: #414952;

    --obs-text: #594323;
    --obs-placeholder: rgba(102, 77, 40, 0.55);

    --turno-manha: #134a7c;
    --turno-tarde: #5a4412;
    --alerta: #872424;
    --alerta-forte: #871f28;
    /* --ok/--acc-verde escurecidos o suficiente pra 4,5:1 de contraste (ok),
       mas o verde ficava quase preto — lia como "apagado", não como verde
       (achado 16/08, pedido: mesma cor em todo tema, mas mais destacada).
       Subiu a saturação mantendo a mesma família/contraste mínimo. */
    /* --ok/--acc-verde: 01/08 já tinha subido a saturação pra não ficar "apagado",
       mas ainda ficava abaixo de 4,5:1 contra --bg-3 (3,15:1 — falhava em chip/hover).
       17/08: desceu mais um degrau de luminosidade mantendo H145/S79% (mesma família
       vívida de --wa-verde-texto, que já passava) até fechar ≥4,5:1 no pior fundo. */
    --ok: #0a5228;
    --aviso: #5d420c;
    /* -vivid: --alerta/--ok/--aviso são o mesmo hex de --acc-vermelho/verde/ambar
       em todo tema claro — reaproveita os -vivid já calculados abaixo. */
    --alerta-vivid: #c31313;
    --ok-vivid:     #0b6f35;
    --aviso-vivid:  #825b0d;

    --acc-azul:     #134a7c;
    --acc-indigo:   #413998;
    --acc-ciano:    #0a514f;
    --acc-verde:    #0a5228;
    --acc-ambar:    #5d420c;
    --acc-laranja:  #743508;
    --acc-vermelho: #872424;
    --acc-rosa:     #7e254a;

    /* --acc-*-vivid: 17/08, achado do card "ATENDIMENTOS" da agenda — trocar
       de token (--acc-ciano → --acc-indigo) resolveu a COLISÃO de matiz, mas
       expôs o problema maior: TODO --acc-* deste tema foi escurecido pra
       4,5:1 de contraste de TEXTO (L~18-34%), e isso deixa qualquer uso
       decorativo (barra de KPI, borda de card, linha de gráfico — que só
       precisa 3:1 de UI, não 4,5:1 de texto) igualmente escuro/sem vida.
       Estes tokens são a mesma família de cor, mesma saturação (82%), só que
       na maior luminosidade que ainda fecha ≥3:1 contra --bg-3 — pra usar em
       elemento GRANDE/decorativo, nunca em texto pequeno (não foi testado
       pra 4,5:1). */
    --acc-azul-vivid:     #1161ac;
    --acc-indigo-vivid:   #5345ed;
    --acc-ciano-vivid:    #0b6b68;
    --acc-verde-vivid:    #0b6f35;
    --acc-ambar-vivid:    #825b0d;
    --acc-laranja-vivid:  #99490f;
    --acc-vermelho-vivid: #c31313;
    --acc-rosa-vivid:     #be135a;

    --wa-verde:       #25d366;
    /* #25d366 como TEXTO sobre fundo claro não passa em contraste — escurece. */
    --wa-verde-texto: #09522a;
    --wa-verde-suave: rgba(37, 211, 102, .18);
    /* Falhava até o mínimo de 3:1 contra --bg-3 (2,38:1) — mesmo H/S, luminosidade
       reduzida até 4,5:1+ no pior fundo (17/08). */
    --wa-tick-lido:   #074c69;
    --wa-in-bg:       rgba(85, 80, 63, .10);
    --wa-out-bg:      rgba(166, 128, 47, .16);
    --wa-neutro-bg:   rgba(85, 80, 63, .07);

    --est-vinho-text: #8c1545;
    --est-prata-text: #414955;
    --est-grafite-text: #374151;
    --est-cobre-text: #76340c;

    /* Fundo de tela da Planilha, ver comentário completo no tema dark acima.
       Aqui a escala INVERTE (achado ao montar a paleta champagne, 111-113
       acima): --bg-1 é o pico de claridade, --bg-0/--bg-2 ficam parecidos
       entre si, e é --bg-3 quem se destaca — mais escuro/âmbar. Reaproveita
       --bg-3 (já é o 2º stop do gradiente do cabecalho-gaveta logo acima dos
       cards, então a transição fica contínua, não um tom novo solto). */
    --bg-canvas: var(--bg-3);
}

:root[data-theme="white"] {
    /* Tema "papel": fundo quase branco puro (mantido intacto — não mexer).
       Acento voltou a ser dourado (pedido 16/08: "pode até usar o dourado nos
       textos", fundo continua o mesmo) — reaproveita o MESMO tom de
       --acc-ambar já testado ≥4,5:1 neste tema, não um hex novo inventado.
       --gold-light mais escuro que --gold: nos temas claros o "light" é texto
       sobre fundo claro, precisa ser o mais escuro do grupo (mesma regra do
       tema "light" champagne). */
    --bg-0: #ffffff;
    --bg-1: #f8f9fa;
    --bg-2: #f1f2f4;
    --bg-3: #e2e4e8;

    --text-1: #1a1d23;
    --text-2: #444a55;
    --text-3: #606673;

    --gold: #6f4f0e;
    --gold-strong: #543c0a;
    --gold-light: #4a350a;
    --gold-solid: #6f4f0e;
    /* Mesmo achado do tema champagne (17/08): --gold puro é escuro demais pra
       ler como dourado. --gold-vivid é mais saturado, testado ≥4,5:1 contra os
       dois stops do --topbar-grad (#ffffff/#f1f2f4) — não testado contra --bg-3,
       só usar em nav lateral/topbar. */
    --gold-vivid: #8f6819;
    --gold-vivid-strong: #6c4f13;

    /* Ver comentário completo no tema dark. */
    --sobre-gold: #ffffff;

    --border: rgba(50, 62, 82, 0.55);
    --border-soft: rgba(50, 62, 82, 0.28);
    --border-mid: rgba(50, 62, 82, 0.40);

    --topbar-grad: linear-gradient(180deg, #ffffff 0%, #f1f2f4 100%);
    --bottombar-grad: linear-gradient(180deg, #f8f9fa 0%, #f1f2f4 100%);

    /* Sombra mais funda (pedido 16/08: mais profundidade sem mudar a cor base). */
    --sombra-gaveta: 0 10px 24px -8px rgba(20, 25, 35, .28);

    --glass-bg: rgba(255, 255, 255, 0.85);
    --dropdown-grad: linear-gradient(180deg, #ffffff 0%, #f1f2f4 100%);
    --input-grad: linear-gradient(180deg, rgba(0, 0, 0, .01) 0%, rgba(0, 0, 0, .04) 100%);
    --input-text: #1a1d23;
    --input-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);

    --danger-bg: rgba(196, 58, 58, 0.10);
    --danger-text: #a83232;
    --danger-border: rgba(196, 58, 58, 0.45);

    --linha-grad-default: linear-gradient(135deg, rgba(190, 224, 176, 0.40), rgba(186, 205, 232, 0.40));

    --status-nada-text: #444a55;
    --status-danger-text: #97292c;
    --status-warning-text: #6f4f0e;
    --status-info-text: #1a44b8;
    --status-success-text: #116232;
    --status-neutral-text: #4a545e;

    --obs-text: #52627a;
    --obs-placeholder: rgba(82, 98, 122, 0.45);

    --turno-manha: #175a96;
    --turno-tarde: #3e4a5e;
    --alerta: #a32c2c;
    --alerta-forte: #871f28;
    /* --ok/--acc-verde e --wa-tick-lido: mesmo achado do tema light (17/08) —
       abaixo de 4,5:1 contra --bg-3 (4,27:1 e 4,26:1). Mesmo H/S, luminosidade
       reduzida até fechar 4,5:1+ no pior fundo. */
    --ok: #0d7239;
    --aviso: #6f4f0e;
    --alerta-vivid: #ec4141;
    --ok-vivid:     #0f9546;
    --aviso-vivid:  #ac7811;

    --acc-azul:     #175a96;
    --acc-indigo:   #4a41ad;
    --acc-ciano:    #0c6360;
    --acc-verde:    #0d7239;
    --acc-ambar:    #6f4f0e;
    --acc-laranja:  #92420a;
    --acc-vermelho: #a32c2c;
    --acc-rosa:     #942c57;

    /* --acc-*-vivid: ver comentário no tema light (mesmo achado, 17/08). */
    --acc-azul-vivid:     #1783e8;
    --acc-indigo-vivid:   #695def;
    --acc-ciano-vivid:    #0e908c;
    --acc-verde-vivid:    #0f9546;
    --acc-ambar-vivid:    #ac7811;
    --acc-laranja-vivid:  #cc6114;
    --acc-vermelho-vivid: #ec4141;
    --acc-rosa-vivid:     #eb3782;

    --wa-verde:       #25d366;
    --wa-verde-texto: #0b6634;
    --wa-verde-suave: rgba(37, 211, 102, .16);
    --wa-tick-lido:   #096b95;
    --wa-in-bg:       rgba(82, 98, 122, .08);
    --wa-out-bg:      rgba(82, 98, 122, .14);
    --wa-neutro-bg:   rgba(82, 98, 122, .06);

    --est-vinho-text: #9d174d;
    --est-prata-text: #4b5563;
    --est-grafite-text: #374151;
    --est-cobre-text: #92400e;

    /* Fundo de tela da Planilha, ver comentário completo no tema dark acima.
       Neste tema "papel" (fundo quase branco, mantido intacto — não mexer
       nos --bg-*), só --bg-3 sozinho (e2e4e8) é próximo demais do card
       (--bg-2, f1f2f4 — diferença de luminância de só ~14 em 255, não dá
       "bem diferente"). Mistura --bg-3 com --text-3 (mesma família cinza-azulada
       do tema, já usada nele) pra aprofundar sem sair da paleta — vira um
       cinza-aço médio (~#b6b9c0) que destaca o card quase-branco por cima,
       tipo "papel sobre mesa". */
    --bg-canvas: color-mix(in srgb, var(--bg-3) 60%, var(--text-3) 40%);
}

:root[data-theme="gray"] {
    /* Tema sóbrio: fundo em cinza médio (mantido intacto — não mexer).
       Acento voltou a ser dourado (mesmo pedido do tema white acima),
       reaproveitando o --acc-ambar já testado ≥4,5:1 neste tema. */
    --bg-0: #c7c9cc;
    --bg-1: #d0d1d3;
    --bg-2: #c0c2c6;
    --bg-3: #abaeb3;

    --text-1: #20242a;
    --text-2: #3c4149;
    --text-3: #3c4147;

    --gold: #553d0b;
    --gold-strong: #402d08;
    --gold-light: #362508;
    --gold-solid: #553d0b;
    /* Idem tema white: testado ≥4,5:1 contra os dois stops do --topbar-grad
       deste tema (#e8e9eb/#d8dade) — não testado contra --bg-3. */
    --gold-vivid: #795815;
    --gold-vivid-strong: #573f0f;

    /* Ver comentário completo no tema dark. */
    --sobre-gold: #ffffff;

    --border: rgba(40, 50, 66, 0.60);
    --border-soft: rgba(40, 50, 66, 0.32);
    --border-mid: rgba(40, 50, 66, 0.45);

    --topbar-grad: linear-gradient(180deg, #e8e9eb 0%, #d8dade 100%);
    --bottombar-grad: linear-gradient(180deg, #e8e9eb 0%, #d8dade 100%);

    /* Sombra mais funda (mesmo pedido de profundidade do tema white). */
    --sombra-gaveta: 0 10px 26px -8px rgba(10, 14, 20, .40);

    --glass-bg: rgba(232, 233, 235, 0.85);
    --dropdown-grad: linear-gradient(180deg, #e8e9eb 0%, #d8dade 100%);
    --input-grad: linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .06) 100%);
    --input-text: #20242a;
    --input-shadow: inset 0 1px 2px rgba(0, 0, 0, .10);

    --danger-bg: rgba(196, 58, 58, 0.14);
    --danger-text: #7b2224;
    --danger-border: rgba(196, 58, 58, 0.5);

    --linha-grad-default: linear-gradient(135deg, rgba(170, 204, 156, 0.45), rgba(166, 185, 212, 0.45));

    --status-nada-text: #3c4149;
    --status-danger-text: #7c2027;
    --status-warning-text: #553d0b;
    --status-info-text: #153a99;
    --status-success-text: #0e4b24;
    --status-neutral-text: #3b434d;

    --obs-text: #374355;
    --obs-placeholder: rgba(71, 86, 109, 0.5);

    --turno-manha: #11456d;
    --turno-tarde: #384259;
    --alerta: #7b2222;
    --alerta-forte: #781a22;
    /* --ok/--acc-verde e --wa-tick-lido: mesmo achado dos outros 2 temas claros
       (17/08) — abaixo de 4,5:1 contra --bg-3 (3,27:1 e falha total, 2,61:1).
       Mesmo H/S, luminosidade reduzida até fechar 4,5:1+ no pior fundo. */
    --ok: #094925;
    --aviso: #553d0b;
    --alerta-vivid: #b51212;
    --ok-vivid:     #0a6630;
    --aviso-vivid:  #79540c;

    --acc-azul:     #11456d;
    --acc-indigo:   #3d358d;
    --acc-ciano:    #094a49;
    --acc-verde:    #094925;
    --acc-ambar:    #553d0b;
    --acc-laranja:  #6d3107;
    --acc-vermelho: #7b2222;
    --acc-rosa:     #742144;

    /* --acc-*-vivid: ver comentário no tema light (mesmo achado, 17/08). */
    --acc-azul-vivid:     #105ca2;
    --acc-indigo-vivid:   #4637eb;
    --acc-ciano-vivid:    #0a6663;
    --acc-verde-vivid:    #0a6630;
    --acc-ambar-vivid:    #79540c;
    --acc-laranja-vivid:  #90440e;
    --acc-vermelho-vivid: #b51212;
    --acc-rosa-vivid:     #b01154;

    --wa-verde:       #25d366;
    --wa-verde-texto: #094b26;
    --wa-verde-suave: rgba(37, 211, 102, .18);
    --wa-tick-lido:   #064360;
    --wa-in-bg:       rgba(71, 86, 109, .10);
    --wa-out-bg:      rgba(71, 86, 109, .16);
    --wa-neutro-bg:   rgba(71, 86, 109, .08);

    --est-vinho-text: #7e133e;
    --est-prata-text: #3c4149;
    --est-grafite-text: #2f3540;
    --est-cobre-text: #6e300a;

    /* Fundo de tela da Planilha, ver comentário completo no tema dark acima.
       Mesmo problema do tema white: --bg-3 sozinho (abaeb3) fica perto demais
       do card (--bg-2, c0c2c6). Mesma técnica — mistura com --text-3 (cinza
       neutro do próprio tema) pra aprofundar mantendo a família de cor. */
    --bg-canvas: color-mix(in srgb, var(--bg-3) 60%, var(--text-3) 40%);
}