:root {
  /* Brand */
  --ui-color-primary: var(--primary-color, #6a0572);
  --ui-color-primary-hover: var(--primary-hover, #4e0355);
  --ui-color-sidebar-1: var(--sidebar-bg, #9370db);
  --ui-color-sidebar-2: var(--sidebar-bg-2, #b07ab4);
  --ui-gradient-brand: var(--brand-gradient, linear-gradient(90deg, var(--ui-color-sidebar-1), var(--ui-color-sidebar-2)));
  --ui-gradient-flow-card: var(--brand-gradient);
  --ui-palette-orchid-1: #5353db;
  --ui-palette-orchid-2: #7353db;
  --ui-palette-orchid-3: #9353db;
  --ui-palette-orchid-4: #b353db;
  --ui-palette-orchid-5: #d253db;
  --ui-palette-orchid-6: #d152db;
  --ui-gradient-orchid: linear-gradient(
    90deg,
    var(--ui-palette-orchid-1) 0%,
    var(--ui-palette-orchid-2) 20%,
    var(--ui-palette-orchid-3) 40%,
    var(--ui-palette-orchid-4) 65%,
    var(--ui-palette-orchid-5) 85%,
    var(--ui-palette-orchid-6) 100%
  );
  --ui-gradient-flow-card-head: linear-gradient(
    0deg,
    var(--ui-color-rgba-255-255-255-0-24),
    var(--ui-color-rgba-255-255-255-0-24)
  ), var(--brand-gradient);
  --ui-flow-card-border: var(--ui-color-cfd7ef);
  --ui-color-text: var(--text-color, #333333);
  --ui-color-muted: #667085;

  /* Paleta Purple|Green Discreto */
  --ui-palette-Purplegreen-1: #9CDBB6  ;
  --ui-palette-Purplegreen-2: #9EDBD0  ;
  --ui-palette-Purplegreen-3: #9BCEDB  ;
  --ui-palette-Purplegreen-4: #9CB7DB  ;
  --ui-palette-Purplegreen-5: #9C9FDB  ;

  /* Onboarding 3D aurora */
  --onboarding-aurora-lavender: #eadcff;
  --onboarding-aurora-lilac: #c9a8ff;
  --onboarding-aurora-violet: #7f3fd1;
  --onboarding-aurora-rose: #cf55b7;
  --onboarding-aurora-coral: #c06adb;
  --onboarding-aurora-blue-mist: #d4bbff;
  --onboarding-aurora-back-shade: #27133d;
  --onboarding-aurora-center-sheen: #5a347b;
  --onboarding-aurora-top-glow: #251036;

  /* Onboarding 3D crystal star */
  --onboarding-star-core: #f4bf27;
  --onboarding-star-core-emissive: #8d5d00;
  --onboarding-star-core-attenuation: #efb115;
  --onboarding-star-shell: #ffd86d;
  --onboarding-star-shell-emissive: #805600;
  --onboarding-star-shell-attenuation: #ffd24d;
  --onboarding-star-glow: #fff1b2;
  --onboarding-star-glow-emissive: #ffd36c;
  --onboarding-star-glow-attenuation: #ffe289;
  --onboarding-star-halo: #fff4c7;
  --onboarding-star-halo-emissive: #ffd76a;
  --onboarding-star-halo-attenuation: #fff0a6;
  --onboarding-star-light-cream: #fff6e6;
  --onboarding-star-light-warm: #fff2be;
  --onboarding-star-light-amber: #ffb33a;
  --onboarding-star-light-violet: #9f7aea;
  --onboarding-star-light-violet-soft: #d7c6ff;
  --onboarding-star-shadow: #8b5cf6;

  /* Surfaces */
  --ui-surface-page: #f6f7fb;
  --ui-surface-card: #ffffff;
  --ui-surface-soft: #f8f4ff;
  --ui-border-color: #d7dcee;

  /* Radius */
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 22px;
  --ui-radius-pill: 999px;

  /* Inputs and buttons */
  --ui-control-height: 42px;
  --ui-control-padding-x: 12px;
  --ui-control-font-size: 16px;
  --ui-control-line-height: 1.2;

  /* Effects */
  --ui-shadow-soft: 0 8px 18px rgba(33, 33, 52, 0.08);
  /* Admin Premium — sombra sutil de card (handoff /admin) */
  --ui-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
  /* Admin Premium — gradiente da sidebar do workspace de tenant (handoff /admin) */
  --admin-sidebar-tenant: linear-gradient(180deg, #5b2c82, #7d52c7);
  /* Central de Suporte — sombras exatas do design (handoff) */
  --ui-shadow-popover: 0 24px 60px rgba(55, 12, 86, 0.28), 0 6px 16px rgba(55, 12, 86, 0.14);
  --ui-shadow-brand: 0 12px 26px rgba(106, 5, 114, 0.26);
  --ui-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
  --focus-ring-shadow: var(--ui-shadow-focus);
  --focus-ring-outline: 2px solid transparent;
  --focus-ring-offset: 2px;

  /* Timing */
  --ui-anim-fast: 160ms;
  --ui-anim-base: 220ms;

  /* ===== Theme / Layout (from style_base.css) ===== */
  --primary-color: var(--ui-color-6a0572);
  --primary-hover: var(--ui-color-4e0355);
  /* Ícone de AJUDA (i): a MESMA lavanda suave do "ⓘ detalhes" de Pacotes (a referência de
     design do dono). Sai do brand SUAVIZADO (--fc-toolbar-btn-active-bg), não do --primary-color
     cheio — que é magenta saturado demais para um (i). Derivado: acompanha o tema sozinho. */
  --ui-hint-color: color-mix(in srgb, var(--fc-toolbar-btn-active-bg) 76%, var(--color-text-secondary));
  --ui-hint-color-strong: var(--fc-toolbar-btn-active-bg);
  --sidebar-bg: var(--ui-color-9370db);
  --sidebar-bg-2: var(--ui-color-b07ab4);
  --sidebar-text: var(--ui-color-f8f5ff);
  --sidebar-active-bg: var(--ui-surface-card);
  /* Este roxo é do tema PADRÃO. Tema novo TEM que declarar o seu: herdar daqui faz o
     ícone do item ativo sair roxo num menu verde/vinho/terracota — "o fa-cog está
     vazando roxo quando mudo de tema" (dono, 02/08/2026). Os 7 temas de 2026 herdavam. */
  --sidebar-active-text: var(--ui-color-7a2fbc);

  /* ── CHROME (topo + menu lateral) — handoff "Formato do sistema", passo 1 ──────────────
     O chrome passa a ser desenhado por ESTAS variáveis em vez de cores fixas espalhadas
     pelo `_sidebar.css`. Aqui os valores são EXATAMENTE os de hoje: este passo é invisível
     de propósito, e é o que destrava os 4 formatos (cada `data-shell` redefine o que
     precisa). Nenhuma cor nova é inventada — tudo deriva de --sidebar-bg/-2 e
     --primary-color, então trocar o tema continua trocando o chrome inteiro. */
  --chrome-top-bg: var(--brand-gradient);
  --chrome-top-fg: var(--sidebar-text);
  --chrome-top-icon: var(--ui-color-rgba-255-255-255-0-9);
  /* Avatar do topo. Sobre topo PINTADO ele nao leva a tinta fraca do tema: vira contorno
     fraquinho com as iniciais BRANCAS, que e o que destaca sobre o gradiente (dono,
     02/08/2026). A tinta do tema so entra quando o topo e claro. */
  --chrome-top-avatar-bg: var(--ui-color-rgba-255-255-255-0-12);
  --chrome-top-avatar-fg: var(--ui-color-fff);
  --chrome-top-avatar-border: var(--ui-color-rgba-255-255-255-0-35);
  --chrome-top-soft: var(--ui-color-rgba-255-255-255-0-18);
  --chrome-rail-bg: var(--brand-gradient);
  --chrome-rail-fg: var(--sidebar-text);
  --chrome-rail-icon: var(--ui-color-rgba-255-255-255-0-9);
  --chrome-rail-hover: var(--ui-color-rgba-255-255-255-0-14);
  --chrome-rail-active-bg: var(--sidebar-active-bg);
  --chrome-rail-active-fg: var(--sidebar-active-text);
  /* Geometria do chrome. Valores IGUAIS aos de hoje; cada formato sobrescreve o que precisa. */
  --chrome-rail-radius: 22px;
  --chrome-item-radius: 14px;
  --chrome-top-radius: 0px;
  --chrome-border-w: 0px;
  --chrome-border-c: color-mix(in srgb, var(--primary-color) 14%, var(--ui-border-color));
  /* Sombras do chrome, para os formatos não trazerem hex solto. */
  --chrome-rail-shadow: 0 10px 24px var(--ui-color-rgba-69-16-99-0-25);
  --chrome-card-shadow: 0 10px 26px color-mix(in srgb, var(--color-text-primary) 13%, transparent);
  --chrome-top-shadow: 0 8px 22px color-mix(in srgb, var(--color-text-primary) 16%, transparent);
  --brand-gradient: linear-gradient(90deg, var(--sidebar-bg), var(--sidebar-bg-2));
  --dropdown-arrow-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 24 14' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l10 10 10-10'/></svg>");
  --brand-radius: 26px;
  --brand-border-inset: 12px;
  --brand-radius-outer: calc(var(--brand-radius) + var(--brand-border-inset));
  --top-header-height: 56px;
  /* Altura REAL ocupada pelo topo, já com a faixa do sistema (notch/barra de status) que o
     `viewport-fit=cover` passou a expor. Em desktop e em celular sem recorte o env() é 0 e
     este token é idêntico a --top-header-height, então nada muda. Quem calcula altura de
     tela cheia usa ESTE, nunca o de cima (dono, 01/08/2026). */
  --top-header-total: calc(var(--top-header-height) + env(safe-area-inset-top, 0px));
  --app-frame-border: 4px;
  --app-frame-border-total: 8px;
  --app-frame-margin: 12px;
  --app-frame-margin-total: 24px;
  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-333);
  --text-muted: var(--ui-color-777);

  /* Status colors */
  --agendado-cor: var(--primary-color);
  --sucesso-verde-cor: var(--ui-color-16a34a);
  --confirmado-azul-cor: var(--ui-color-2563eb);
  --remarcado-laranja-cor: var(--ui-color-d97706);
  --nao-compareceu-cinza-cor: var(--ui-color-6b7280);
  --aguardando-amarelo-cor: var(--ui-color-f59e0b);
  --success-color: var(--ui-color-28a745);
  --warning-color: var(--ui-color-f44336);
  --error-color: var(--ui-color-ec833d);
  --hover-background: var(--ui-color-f4f7f6);
  --toggle-active: var(--success-color);
  --toggle-inactive: var(--ui-color-c7cdd6);

  /* FullCalendar */
  --fc-today-fill: color-mix(in srgb, var(--primary-color) 6%, transparent);

  /* FullCalendar toolbar — Claro exact values preserved */
  --fc-toolbar-btn-bg: var(--ui-color-a98ac9);
  --fc-toolbar-btn-active-bg: var(--ui-color-8a63b2);
  --fc-toolbar-title-color: var(--ui-color-5f4c77);

  /* ── Calendar Premium Surfaces ─────────────────────────── */
  --cal-bg: var(--ui-surface-page);
  --cal-surface: var(--ui-surface-card);
  --cal-surface-elevated: var(--ui-surface-card);
  --cal-border-subtle: color-mix(in srgb, var(--ui-border-color) 35%, transparent);
  --cal-grid-line: color-mix(in srgb, var(--ui-border-color) 18%, transparent);
  --cal-text-primary: var(--color-text-primary);
  --cal-text-secondary: var(--color-text-secondary);
  --cal-text-muted: var(--color-text-muted);
  --cal-accent: var(--primary-color);
  --cal-accent-soft: color-mix(in srgb, var(--primary-color) 10%, transparent);
  --cal-hover: color-mix(in srgb, var(--primary-color) 6%, transparent);
  --cal-today-ring: color-mix(in srgb, var(--primary-color) 18%, transparent);
  --cal-offhours-overlay: color-mix(in srgb, var(--ui-border-color) 6%, transparent);
  --cal-shadow-soft: 0 2px 8px color-mix(in srgb, var(--color-text-primary) 6%, transparent);
  --cal-shadow-card: 0 4px 16px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  --cal-shadow-hover: 0 6px 20px color-mix(in srgb, var(--color-text-primary) 12%, transparent);
  --cal-event-radius: 8px;

  /* ── Agenda: personalização de chips e slots bloqueados (handoff 11/07) ── */
  --agenda-blocked-tone: #64748b;               /* cinza-ardósia da banda bloqueada */
  --agenda-blocked-label-ink: color-mix(in srgb, var(--agenda-blocked-tone) 62%, #334155);
  --agenda-chip-accent-w: 4px;                  /* espessura da barra de acento (fixo) */
  --agenda-chip-seam: var(--ui-color-fff);      /* anel branco separador entre cards */
  --agenda-chip-shadow-soft: 0 4px 10px rgba(20, 20, 30, 0.10);
  --agenda-chip-shadow-card: 0 8px 18px rgba(33, 33, 52, 0.16);
  --agenda-appearance-pop-shadow: 0 20px 48px rgba(33, 33, 52, 0.20);

  /* ===== WhatsApp Premium (from chatbot_premium.css) ===== */
  --wa-premium-gradient: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 65%, #fff) 0%, var(--primary-color) 100%);
  --wa-premium-shadow: 0 10px 40px color-mix(in srgb, var(--primary-color) 15%, transparent);
  --wa-premium-shadow-lg: 0 20px 60px color-mix(in srgb, var(--primary-color) 20%, transparent);
  --wa-premium-radius: 16px;
  --wa-premium-radius-lg: 24px;
  --wa-premium-radius-pill: 999px;
  --wa-green: #25D366;
  --wa-green-light: #DCF8C6;
  /* Azul da marca Facebook para o botao "Reconectar com Facebook" (Embedded Signup) */
  --facebook-blue: #1877F2;
  --facebook-blue-hover: #166FE0;
  /* Bloco de codigo (resposta Graph API / payload webhook) — estilo "terminal" escuro */
  --code-surface: #10101f;
  --code-border: #232338;
  --code-text: #cbd5e1;
  --code-key: #c792ea;
  --code-string: #9ed47a;
  --wa-status-active: #10B981;
  --wa-status-pending: #F59E0B;
  --wa-status-attention: #EF4444;
  --wa-surface-100: #FFFFFF;
  --wa-surface-200: #F8FAFC;
  --wa-surface-300: #F1F5F9;
  --wa-surface-400: #E2E8F0;
  --wa-text-primary: #1E293B;
  --wa-text-secondary: #64748B;
  --wa-text-muted: #94A3B8;
  --wa-anim-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --wa-anim-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --wa-green-dark: #128C7E;
  --wa-bubble-in: var(--wa-surface-100);
  --wa-bubble-out: var(--wa-green-light);

  /* Primary rgba tint scale (plum) */
  --rgba-plum-04: rgba(106, 5, 114, 0.04);
  --rgba-plum-06: rgba(106, 5, 114, 0.06);
  --rgba-plum-08: rgba(106, 5, 114, 0.08);
  --rgba-plum-10: rgba(106, 5, 114, 0.10);
  --rgba-plum-12: rgba(106, 5, 114, 0.12);
  --rgba-plum-15: rgba(106, 5, 114, 0.15);
  --rgba-plum-25: rgba(106, 5, 114, 0.25);

  /* ===== Semantic Color Aliases (curated tokens) ===== */
  /* These provide meaningful names for frequently used colors */
  
  /* Text colors */
  --color-text-primary: var(--ui-color-1f1f40);
  --color-text-secondary: var(--ui-color-6b7280);
  --color-text-muted: var(--ui-color-9ca3af);
  --color-text-dark: var(--ui-color-111827);
  --color-text-emphasis: var(--ui-color-111);
  --color-text-label: var(--ui-color-374151);
  --color-text-inverse: var(--ui-color-fff);
  
  /* Status colors - Success/Green */
  --color-success: var(--ui-color-16a34a);
  --color-success-light: var(--ui-color-rgba-39-174-96-0-15);
  --color-success-dark: var(--ui-color-166534);
  
  /* Status colors - Warning/Orange */
  --color-warning: var(--ui-color-f59e0b);
  --color-warning-light: var(--ui-color-rgba-245-158-11-0-15);
  --color-warning-dark: var(--ui-color-d97706);
  
  /* Status colors - Danger/Red */
  --color-danger: var(--ui-color-ef4444);
  --color-danger-light: var(--ui-color-rgba-239-68-68-0-05);
  --color-danger-dark: var(--ui-color-b42318);
  --color-success-strong: var(--color-status-success-strong);
  --color-warning-strong: var(--color-status-warning-strong);
  --color-danger-strong: var(--color-danger-dark);
  
  /* Status colors - Info/Blue */
  --color-info: var(--ui-color-2563eb);
  --color-info-light: var(--ui-color-rgba-37-99-235-0-15);
  --color-status-scheduled: var(--agendado-cor);
  --color-status-scheduled-surface: color-mix(in srgb, var(--color-status-scheduled) 12%, var(--ui-color-fff));

  /* Chatbot report funnel scale - derived from active theme tokens. */
  --wa-report-funnel-s1-start: var(--primary-color);
  --wa-report-funnel-s1-end: var(--primary-hover);
  --wa-report-funnel-s2-start: var(--sidebar-bg);
  --wa-report-funnel-s2-end: color-mix(in srgb, var(--sidebar-bg) 56%, var(--sidebar-bg-2));
  --wa-report-funnel-s3-start: var(--sidebar-bg-2);
  --wa-report-funnel-s3-end: color-mix(in srgb, var(--sidebar-bg-2) 82%, var(--ui-surface-card));
  --wa-report-funnel-s4-start: color-mix(in srgb, var(--color-success) 64%, var(--primary-color));
  --wa-report-funnel-s4-end: color-mix(in srgb, var(--color-success) 74%, var(--sidebar-bg-2));
  --wa-report-funnel-s5-start: color-mix(in srgb, var(--color-info) 74%, var(--primary-color));
  --wa-report-funnel-s5-end: color-mix(in srgb, var(--color-info) 82%, var(--sidebar-bg-2));
  
  /* Surface colors */
  --color-surface-hover: var(--ui-color-f3f4f6);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-eee);
  --color-border-muted: #ddd;
  --color-border-strong: var(--ui-color-ccc);
  --color-border-brand-soft: #d8d3df;
  --color-surface-brand-soft: #faf8fc;
  --color-surface-secondary-soft: #dfe4ea;

  /* Typography */
  --font-display: 'Fahkwang', Georgia, serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Financial reconciliation bank marks */
  --recon-bank-bb-bg: linear-gradient(135deg, #FFEF38, #FFC400);
  --recon-bank-bb-text: #003366;
  --recon-bank-itau-bg: linear-gradient(135deg, #003E73, #0E70B8);
  --recon-bank-itau-text: var(--ui-color-fff);
  --recon-bank-bradesco-bg: linear-gradient(135deg, #CC092F, #9F0823);
  --recon-bank-bradesco-text: var(--ui-color-fff);
  --recon-bank-inter-bg: linear-gradient(135deg, #FF7A00, #FF4D00);
  --recon-bank-inter-text: var(--ui-color-fff);
  --recon-bank-caixa-bg: linear-gradient(135deg, #1C72C8, #0050A5);
  --recon-bank-caixa-text: var(--ui-color-fff);
  --recon-bank-santander-bg: linear-gradient(135deg, #EC0000, #A30000);
  --recon-bank-santander-text: var(--ui-color-fff);
  --recon-bank-nubank-bg: linear-gradient(135deg, #820AD1, #5B0C8F);
  --recon-bank-nubank-text: var(--ui-color-fff);
  --recon-bank-btg-bg: linear-gradient(135deg, #0A1E3A, #1A3A6E);
  --recon-bank-btg-text: var(--ui-color-fff);
  --recon-bank-safra-bg: linear-gradient(135deg, #D4A017, #A07010);
  --recon-bank-safra-text: var(--ui-color-fff);
  --recon-bank-sicredi-bg: linear-gradient(135deg, #007D3A, #005A28);
  --recon-bank-sicredi-text: var(--ui-color-fff);
  --recon-bank-sicoob-bg: linear-gradient(135deg, #006B3C, #004D29);
  --recon-bank-sicoob-text: var(--ui-color-fff);
  --recon-bank-banrisul-bg: linear-gradient(135deg, #003F8A, #002A60);
  --recon-bank-banrisul-text: var(--ui-color-fff);
  --recon-bank-bv-bg: linear-gradient(135deg, #EC7000, #C55A00);
  --recon-bank-bv-text: var(--ui-color-fff);
  --recon-bank-c6-bg: linear-gradient(135deg, #242424, #444444);
  --recon-bank-c6-text: #FFD700;
  --recon-bank-pagbank-bg: linear-gradient(135deg, #00C300, #00A000);
  --recon-bank-pagbank-text: var(--ui-color-fff);
  --recon-bank-mercadopago-bg: linear-gradient(135deg, #00BCFF, #0091D9);
  --recon-bank-mercadopago-text: var(--ui-color-fff);
  --recon-bank-stone-bg: linear-gradient(135deg, #00A868, #007A4C);
  --recon-bank-stone-text: var(--ui-color-fff);
  --recon-bank-xp-bg: linear-gradient(135deg, #1A1A2E, #333366);
  --recon-bank-xp-text: #FFD700;
  --recon-bank-neon-bg: linear-gradient(135deg, #9B19D5, #6A0EA5);
  --recon-bank-neon-text: var(--ui-color-fff);
  --recon-bank-original-bg: linear-gradient(135deg, #F9B000, #E09000);
  --recon-bank-original-text: #1A1A1A;
  --recon-bank-abc-bg: linear-gradient(135deg, #004B93, #073763);
  --recon-bank-abc-text: var(--ui-color-fff);
  --recon-bank-amazonia-bg: linear-gradient(135deg, #007A3D, #005A2D);
  --recon-bank-amazonia-text: var(--ui-color-fff);
  --recon-bank-banestes-bg: linear-gradient(135deg, #005BAA, #003F7A);
  --recon-bank-banestes-text: var(--ui-color-fff);
  --recon-bank-bmg-bg: linear-gradient(135deg, #F28C00, #C86D00);
  --recon-bank-bmg-text: var(--ui-color-fff);
  --recon-bank-bs2-bg: linear-gradient(135deg, #00AEEF, #007CB7);
  --recon-bank-bs2-text: var(--ui-color-fff);
  --recon-bank-daycoval-bg: linear-gradient(135deg, #1C3766, #102342);
  --recon-bank-daycoval-text: var(--ui-color-fff);
  --recon-bank-master-bg: linear-gradient(135deg, #1E1E78, #11114A);
  --recon-bank-master-text: var(--ui-color-fff);
  --recon-bank-mercantil-bg: linear-gradient(135deg, #0050A4, #003874);
  --recon-bank-mercantil-text: var(--ui-color-fff);
  --recon-bank-nordeste-bg: linear-gradient(135deg, #1B8F3A, #116426);
  --recon-bank-nordeste-text: var(--ui-color-fff);
  --recon-bank-pan-bg: linear-gradient(135deg, #16B3E8, #087FA8);
  --recon-bank-pan-text: var(--ui-color-fff);
  --recon-bank-picpay-bg: linear-gradient(135deg, #21C25E, #118B3D);
  --recon-bank-picpay-text: var(--ui-color-fff);
  --recon-bank-generic-bg: linear-gradient(135deg, var(--ui-surface-soft), var(--rgba-plum-10));
  --recon-bank-generic-text: var(--primary-color);

  /* Official document surfaces */
  --prescription-paper: var(--ui-color-fff);
  --prescription-ink: var(--ui-color-111);
  --prescription-line: var(--ui-color-111);
  --prescription-notification-a-paper: var(--ui-color-fcf4cf);
  --prescription-notification-b-paper: var(--ui-color-e6f4ff);

  /* Agenda client picker */
  --agenda-client-name-color: var(--color-text-primary);
  --agenda-client-placeholder-color: var(--color-text-muted);
  --agenda-client-pill-bg: var(--agenda-client-option-selected-bg);
  --agenda-client-pill-text: var(--color-text-primary);
  --agenda-client-avatar-bg: color-mix(in srgb, var(--primary-color) 16%, var(--ui-surface-card));
  --agenda-client-avatar-text: var(--primary-color);
  --agenda-client-avatar-border: color-mix(in srgb, var(--primary-color) 28%, transparent);
  --agenda-client-clear-bg: color-mix(in srgb, var(--primary-color) 14%, transparent);
  --agenda-client-clear-bg-hover: color-mix(in srgb, var(--primary-color) 22%, transparent);
  --agenda-client-option-hover-bg: color-mix(in srgb, var(--primary-color) 6%, var(--color-surface-hover));
  --agenda-client-option-selected-bg: color-mix(in srgb, var(--primary-color) 10%, var(--color-surface-hover));
  --agenda-client-option-selected-text: var(--agenda-client-name-color);

  /* Agenda accent surfaces */
  --agenda-sidebar-surface: color-mix(in srgb, var(--cal-accent) 4%, var(--cal-surface));
  --agenda-sidebar-border: var(--cal-border-subtle);
  --agenda-appt-form-bg: var(--agenda-sidebar-surface);
  --agenda-appt-form-divider: color-mix(in srgb, var(--agenda-sidebar-border) 92%, transparent);
  --agenda-appt-toolbar-text: color-mix(in srgb, var(--cal-accent) 46%, var(--color-text-secondary));
  --agenda-appt-field-bg: var(--cal-surface);
  --agenda-appt-field-bg-hover: color-mix(in srgb, var(--cal-accent) 3%, var(--cal-surface));
  --agenda-appt-field-border: color-mix(in srgb, var(--cal-accent) 18%, var(--color-surface-input));
  --agenda-appt-field-border-hover: color-mix(in srgb, var(--cal-accent) 28%, var(--agenda-appt-field-border));
  --agenda-appt-field-border-focus: color-mix(in srgb, var(--cal-accent) 42%, var(--agenda-appt-field-border));
  --agenda-appt-field-ring: color-mix(in srgb, var(--cal-accent) 14%, transparent);
  --agenda-appt-chip-bg: color-mix(in srgb, var(--cal-surface) 88%, var(--cal-accent-soft));
  --agenda-appt-chip-border: color-mix(in srgb, var(--cal-accent) 18%, var(--cal-border-subtle));
  --agenda-appt-chip-text: var(--primary-color);
  --agenda-appt-chip-badge-bg: color-mix(in srgb, var(--primary-color) 10%, var(--cal-surface));
  --agenda-appt-chip-badge-border: color-mix(in srgb, var(--primary-color) 18%, transparent);
  --agenda-appt-chip-remove-bg-hover: color-mix(in srgb, var(--primary-color) 14%, transparent);
  --agenda-accent-hover-bg: color-mix(in srgb, var(--fc-toolbar-btn-active-bg) 14%, transparent);
  --agenda-accent-hover-ring: color-mix(in srgb, var(--fc-toolbar-btn-active-bg) 16%, transparent);
  --agenda-accent-active-bg: color-mix(in srgb, var(--fc-toolbar-btn-active-bg) 18%, transparent);
  --agenda-day-header-label-color: var(--agenda-day-header-label-muted);
  --agenda-day-header-label-muted: color-mix(in srgb, var(--cal-accent) 32%, var(--cal-text-muted));

  /* Agenda quick actions */
  --agenda-quick-fab-bg: var(--cal-accent);
  --agenda-quick-fab-bg-hover: color-mix(in srgb, var(--cal-accent) 88%, var(--color-text-inverse));
  --agenda-quick-fab-text: var(--color-text-inverse);
  --agenda-quick-fab-shadow: 0 18px 34px color-mix(in srgb, var(--cal-accent) 24%, transparent);
  --agenda-quick-panel-bg: color-mix(in srgb, var(--cal-surface) 97%, var(--ui-surface-page));
  --agenda-quick-panel-border: color-mix(in srgb, var(--cal-accent) 18%, var(--cal-border-subtle));
  --agenda-quick-panel-shadow: 0 20px 48px color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  --agenda-quick-item-bg: color-mix(in srgb, var(--cal-surface) 84%, var(--cal-accent-soft));
  --agenda-quick-item-bg-hover: color-mix(in srgb, var(--cal-accent) 16%, var(--cal-surface));
  --agenda-quick-item-label-bg: color-mix(in srgb, var(--color-text-primary) 88%, transparent);
  --agenda-quick-item-label-text: var(--color-text-inverse);
  --agenda-quick-overlay: color-mix(in srgb, var(--color-text-primary) 22%, transparent);
  --agenda-quick-workspace-bg: color-mix(in srgb, var(--ui-surface-page) 78%, var(--cal-surface));
  --agenda-quick-frame-bg: var(--ui-surface-page);
  --agenda-quick-loading-bg: color-mix(in srgb, var(--cal-accent) 12%, var(--cal-surface));

  /* Agenda birthdays */
  --agenda-bday-icon-color: var(--agenda-day-header-label-muted);
  --agenda-bday-icon-color-hover: var(--cal-accent);
  --agenda-bday-icon-on-accent: color-mix(in srgb, var(--color-text-inverse) 82%, var(--cal-accent));
  --agenda-bday-tooltip-border: color-mix(in srgb, var(--cal-accent) 24%, var(--cal-border-subtle));
  --agenda-bday-tooltip-shadow: 0 10px 24px color-mix(in srgb, var(--cal-accent) 16%, transparent);
  --agenda-bday-tooltip-header: color-mix(in srgb, var(--cal-accent) 74%, var(--cal-text-primary));
  --agenda-bday-tooltip-divider: color-mix(in srgb, var(--cal-accent) 18%, transparent);
  --agenda-bday-tooltip-avatar-bg-start: color-mix(in srgb, var(--cal-accent) 78%, var(--cal-surface));
  --agenda-bday-tooltip-avatar-bg-end: color-mix(in srgb, var(--cal-accent) 58%, var(--cal-today-ring));
  --agenda-bday-tooltip-avatar-text: var(--color-text-inverse);
  
  /* Purple accent (brand) */
  --color-brand-muted: var(--ui-color-6b5a77);
  --color-purple-light: var(--ui-color-eee3f4);
  --color-purple-muted: var(--ui-color-efe8f6);

  /* Status surfaces and exact status accents */
  --color-status-success-surface: #eafaf2;
  --color-status-warning-surface: #fff4e5;
  --color-status-danger-surface: #fdecec;
  --color-status-success-strong: #168a4b;
  --color-status-warning-strong: #b54708;
  --color-status-attention-strong: #175cd3;

  /* ===== Auto-generated Color Tokens (raw palette) ===== */
  /* NOTE: These are kept for backwards compatibility. */
  /* Prefer using semantic aliases above for new code. */
  
  /* Gray scale */
  --ui-color-000: #000;
  --ui-color-111: #111;
  --ui-color-333: #333;
  --ui-color-444: #444;
  --ui-color-555: #555;
  --ui-color-666: #666;
  --ui-color-777: #777;
  --ui-color-888: #888;
  --ui-color-999: #999;
  --ui-color-aaa: #aaa;
  --ui-color-ccc: #ccc;
  --ui-color-ddd: #ddd;
  --ui-color-eee: #eee;
  --ui-color-fff: #fff;
  
  /* Dark grays / Near black */
  --ui-color-111827: #111827;
  --ui-color-1f0f2e: #1f0f2e;
  --ui-color-120a2f: #120a2f;
  --ui-color-1c1048: #1c1048;
  --ui-color-1f1f40: #1f1f40;
  --ui-color-1f2937: #1f2937;
  --ui-color-2f2f2f: #2f2f2f;
  --ui-color-2f3542: #2f3542;
  --ui-color-323232: #323232;
  --ui-color-3b1b52: #3b1b52;
  --ui-color-3b2b4a: #3b2b4a;
  --ui-color-3b3b3b: #3b3b3b;
  
  /* Medium grays */
  --ui-color-344054: #344054;
  --ui-color-374151: #374151;
  --ui-color-475467: #475467;
  --ui-color-4b5563: #4b5563;
  --ui-color-4f4f67: #4f4f67;
  --ui-color-57606f: #57606f;
  --ui-color-5a4867: #5a4867;
  --ui-color-5f4c77: #5f4c77;
  --ui-color-6b5a77: #6b5a77;
  --ui-color-6b7280: #6b7280;
  --ui-color-6c757d: #6c757d;
  --ui-color-6f6a76: #6f6a76;
  --ui-color-7a6887: #7a6887;
  --ui-color-7a6a86: #7a6a86;
  --ui-color-7a7a7a: #7a7a7a;
  --ui-color-777777: #777777;
  --ui-color-7f8c8d: #7f8c8d;
  --ui-color-8c8c8c: #8c8c8c;
  --ui-color-98a2b3: #98a2b3;
  --ui-color-9aa1ad: #9aa1ad;
  --ui-color-9ca3af: #9ca3af;
  --ui-color-9c8c74: #9c8c74;
  
  /* Light grays / Borders */
  --ui-color-c7cdd6: #c7cdd6;
  --ui-color-d0d5dd: #d0d5dd;
  --ui-color-d3d3d3: #d3d3d3;
  --ui-color-d6d6d6: #d6d6d6;
  --ui-color-cfd7ef: #cfd7ef;
  --ui-color-e0e0e0: #e0e0e0;
  --ui-color-e5e5e5: #e5e5e5;
  --ui-color-e5e7eb: #e5e7eb;
  --ui-color-e6e6ea: #e6e6ea;
  --ui-color-eaeaea: #eaeaea;
  --ui-color-eaecf0: #eaecf0;
  --ui-color-ec833d: #ec833d;
  --ui-color-ece6f2: #ece6f2;
  --ui-color-ececec: #ececec;
  --ui-color-ecf0f1: #ecf0f1;
  --ui-color-ededed: #ededed;
  --ui-color-eee3f4: #eee3f4;
  --ui-color-eef1f5: #eef1f5;
  --ui-color-eef2f5: #eef2f5;
  --ui-color-efe8f6: #efe8f6;
  
  /* Near white surfaces */
  --ui-color-f1f1f1: #f1f1f1;
  --ui-color-f1f2f6: #f1f2f6;
  --ui-color-f2f2f2: #f2f2f2;
  --ui-color-f3f4f6: #f3f4f6;
  --ui-color-f4f4f4: #f4f4f4;
  --ui-color-f4f6f8: #f4f6f8;
  --ui-color-f4f7f6: #f4f7f6;
  --ui-color-f5f5f5: #f5f5f5;
  --ui-color-f6f6f8: #f6f6f8;
  --ui-color-f6f8ff: #f6f8ff;
  --ui-color-f7edf7: #f7edf7;
  --ui-color-f7f7f7: #f7f7f7;
  --ui-color-f8f5ff: #f8f5ff;
  --ui-color-f9f4fb: #f9f4fb;
  --ui-color-f9f9f9: #f9f9f9;
  --ui-color-f9fafb: #f9fafb;
  --ui-color-faf7fb: #faf7fb;
  --ui-color-faf7fd: #faf7fd;
  --ui-color-faf9fb: #faf9fb;
  --ui-color-fafafa: #fafafa;
  --ui-color-fdfafc: #fdfafc;
  --ui-color-fdfdfd: #fdfdfd;
  --ui-color-fefefe: #fefefe;
  --ui-color-ffffffe8: #ffffffe8;
  
  /* Purple / Brand colors */
  --ui-color-4e0355: #4e0355;
  --ui-color-5a0c5f: #5a0c5f;
  --ui-color-5f35ff: #5f35ff;
  /* Paleta dos temas do handoff (02/08/2026). */
  --ui-color-c8a08a: #c8a08a;
  --ui-color-7c4a35: #7c4a35;
  --ui-color-6b3d2a: #6b3d2a;
  --ui-color-5eead4: #5eead4;
  --ui-color-0d9488: #0d9488;
  --ui-color-0f766e: #0f766e;
  --ui-color-c4b5fd: #c4b5fd;
  --ui-color-a78bfa: #a78bfa;
  --ui-color-7c3aed: #7c3aed;
  --ui-color-f0a3b5: #f0a3b5;
  --ui-color-d6738d: #d6738d;
  --ui-color-b04a63: #b04a63;
  --ui-color-be4a6a: #be4a6a;
  --ui-color-7f1d38: #7f1d38;
  --ui-color-881337: #881337;
  --ui-color-e8927c: #e8927c;
  --ui-color-c1553a: #c1553a;
  --ui-color-a83f28: #a83f28;
  --ui-color-fcd34d: #fcd34d;
  --ui-color-a1610b: #a1610b;
  --ui-color-4aa88a: #4aa88a;
  --ui-color-12503f: #12503f;
  --ui-color-115c45: #115c45;
  --ui-color-b7cfc0: #b7cfc0;
  --ui-color-6e947f: #6e947f;
  --ui-color-41654f: #41654f;
  /* Amostras curadas do painel de cores (02/08/2026). */
  --ui-color-3b82f6: #3b82f6;
  --ui-color-93c5fd: #93c5fd;
  --ui-color-ffffff: #ffffff;
  --ui-color-6a0572: #6a0572;
  --ui-color-6e4f89: #6e4f89;
  --ui-color-6f4f8d: #6f4f8d;
  --ui-color-732d91: #732d91;
  --ui-color-7a2fbc: #7a2fbc;
  --ui-color-7f57aa: #7f57aa;
  --ui-color-865cad: #865cad;
  --ui-color-8a63b2: #8a63b2;
  --ui-color-8b5cf6: #8b5cf6;
  --ui-color-8d4a9a: #8d4a9a;
  --ui-color-906ab7: #906ab7;
  --ui-color-916ab9: #916ab9;
  --ui-color-9333ea: #9333ea;
  --ui-color-9370db: #9370db;
  --ui-color-9874bb: #9874bb;
  --ui-color-9b79bf: #9b79bf;
  --ui-color-9f7fc5: #9f7fc5;
  --ui-color-a892c5: #a892c5;
  --ui-color-a989cc: #a989cc;
  --ui-color-a98ac9: #a98ac9;
  --ui-color-b07ab4: #b07ab4;
  --ui-color-b69bd6: #b69bd6;
  --ui-color-e9dcf3: #e9dcf3;
  --ui-color-f1edf6: #f1edf6;
  --ui-color-f3e8ff: #f3e8ff;
  --ui-color-f3eef4: #f3eef4;
  --ui-color-f3eef8: #f3eef8;
  --ui-color-f5f0ff: #f5f0ff;
  
  /* Green / Success */
  --ui-color-027a48: #027a48;
  --ui-color-166534: #166534;
  --ui-color-16a34a: #16a34a;
  --ui-color-1f7a46: #1f7a46;
  --ui-color-218838: #218838;
  --ui-color-28a745: #28a745;
  --ui-color-2ecc71: #2ecc71;
  --ui-color-12b560: #12b560;
  --ui-color-45a049: #45a049;
  --ui-color-4caf50: #4caf50;
  --ui-color-5b7c2f: #5b7c2f;
  --ui-color-5cb85c: #5cb85c;
  --ui-color-b8f0cc: #b8f0cc;
  --ui-color-f1f5e9: #f1f5e9;
  
  /* Blue / Info */
  --ui-color-007bff: #007bff;
  --ui-color-1a56db: #1a56db;
  --ui-color-2196f3: #2196f3;
  --ui-color-2478c0: #2478c0;
  --ui-color-2563eb: #2563eb;
  --ui-color-1e40af: #1e40af;
  --ui-color-2980b9: #2980b9;
  --ui-color-4ea0ff: #4ea0ff;
  --ui-color-5bc0de: #5bc0de;
  --ui-color-e3f2fd: #e3f2fd;
  --ui-color-e6f4ff: #e6f4ff;
  --ui-color-e8f0ff: #e8f0ff;
  
  /* Orange / Yellow / Warning */
  --ui-color-a86b06: #a86b06;
  --ui-color-b26a00: #b26a00;
  --ui-color-b7950b: #b7950b;
  --ui-color-d0df4e: #d0df4e;
  --ui-color-d97706: #d97706;
  --ui-color-f0ad4e: #f0ad4e;
  --ui-color-f1c40f: #f1c40f;
  --ui-color-f59e0b: #f59e0b;
  --ui-color-fcf4cf: #fcf4cf;
  --ui-color-fff9db: #fff9db;
  --ui-color-fffdf2: #fffdf2;
  
  /* Red / Danger */
  --ui-color-6b0b0b: #6b0b0b;
  --ui-color-7a3a3a: #7a3a3a;
  --ui-color-b03a2e: #b03a2e;
  --ui-color-b42318: #b42318;
  --ui-color-c0392b: #c0392b;
  --ui-color-c92a2a: #c92a2a;
  --ui-color-d32f2f: #d32f2f;
  --ui-color-d9534f: #d9534f;
  --ui-color-dc2626: #dc2626;
  --ui-color-e74c3c: #e74c3c;
  --ui-color-ef4444: #ef4444;
  --ui-color-ef9a9a: #ef9a9a;
  --ui-color-f3b7b7: #f3b7b7;
  --ui-color-f44336: #f44336;
  --ui-color-ffebee: #ffebee;
  --ui-color-ffecec: #ffecec;
  
  /* Pink / Magenta */
  --ui-color-be185d: #be185d;
  --ui-color-db2777: #db2777;
  
  /* WhatsApp brand */
  --ui-color-25d366: #25d366;

  /* Central de Suporte — cores exatas do design (handoff) que ainda não eram token */
  --ui-color-f1eef9: #f1eef9;
  --ui-color-f3f1f8: #f3f1f8;
  --ui-color-e7e3f2: #e7e3f2;
  --ui-color-ece9f5: #ece9f5;
  --ui-color-241b3a: #241b3a;
  --ui-color-6b6580: #6b6580;
  --ui-color-9a93ad: #9a93ad;
  --ui-color-eaf1ff: #eaf1ff;
  --ui-color-128c7e: #128c7e;
  
  /* Misc / Other */
  --ui-color-6ebfeb: #6ebfeb;
  --ui-color-764ba2: #764ba2;
  --ui-color-667eea: #667eea;
  --ui-color-7b5cff: #7b5cff;
  --ui-color-a6ecff: #a6ecff;
  --ui-color-bdc3c7: #bdc3c7;
  --ui-color-rgba-0-0-0-0-03: rgba(0, 0, 0, 0.03);
  --ui-color-rgba-0-0-0-0-04: rgba(0, 0, 0, 0.04);
  --ui-color-rgba-0-0-0-0-05: rgba(0, 0, 0, 0.05);
  --ui-color-rgba-0-0-0-0-06: rgba(0, 0, 0, 0.06);
  --ui-color-rgba-0-0-0-0-08: rgba(0, 0, 0, 0.08);
  --ui-color-rgba-0-0-0-0-1: rgba(0, 0, 0, 0.1);
  --ui-color-rgba-0-0-0-0-12: rgba(0, 0, 0, 0.12);
  --ui-color-rgba-0-0-0-0-18: rgba(0, 0, 0, 0.18);
  --ui-color-rgba-0-0-0-0-2: rgba(0, 0, 0, 0.2);
  --ui-color-rgba-0-0-0-0-25: rgba(0, 0, 0, 0.25);
  --ui-color-rgba-0-0-0-0-3: rgba(0, 0, 0, 0.3);
  --ui-color-rgba-0-0-0-0-35: rgba(0, 0, 0, 0.35);
  --ui-color-rgba-0-0-0-0-4: rgba(0, 0, 0, 0.4);
  --ui-color-rgba-0-0-0-0-45: rgba(0, 0, 0, 0.45);
  --ui-color-rgba-0-0-0-0-5: rgba(0, 0, 0, 0.5);
  --ui-color-rgba-0-0-0-0-6: rgba(0, 0, 0, 0.6);
  --ui-color-rgba-106-5-114-0-02: rgba(106, 5, 114, 0.02);
  --ui-color-rgba-106-5-114-0-06: rgba(106, 5, 114, 0.06);
  --ui-color-rgba-106-5-114-0-08: rgba(106, 5, 114, 0.08);
  --ui-color-rgba-106-5-114-0-1: rgba(106, 5, 114, 0.1);
  --ui-color-rgba-106-5-114-0-12: rgba(106, 5, 114, 0.12);
  --ui-color-rgba-106-5-114-0-15: rgba(106, 5, 114, 0.15);
  --ui-color-rgba-106-5-114-0-2: rgba(106, 5, 114, 0.2);
  --ui-color-rgba-106-5-114-0-25: rgba(106, 5, 114, 0.25);
  --ui-color-rgba-106-5-114-0-35: rgba(106, 5, 114, 0.35);
  --ui-color-rgba-106-5-114-0-55: rgba(106, 5, 114, 0.55);
  --ui-color-rgba-122-53-232-0-08: rgba(122, 53, 232, 0.08);
  --ui-color-rgba-122-78-166-0-1: rgba(122, 78, 166, 0.1);
  --ui-color-rgba-125-90-180-0-12: rgba(125, 90, 180, 0.12);
  --ui-color-rgba-125-90-180-0-16: rgba(125, 90, 180, 0.16);
  --ui-color-rgba-128-90-180-0-12: rgba(128, 90, 180, 0.12);
  --ui-color-rgba-169-138-201-0-18: rgba(169, 138, 201, 0.18);
  --ui-color-rgba-20-12-34-0-35: rgba(20, 12, 34, 0.35);
  --ui-color-rgba-16-185-129-0-15: rgba(16, 185, 129, 0.15);
  --ui-color-rgba-16-185-129-0-2: rgba(16, 185, 129, 0.2);
  --ui-color-rgba-20-20-30-0-06: rgba(20, 20, 30, 0.06);
  --ui-color-rgba-231-76-60-0-15: rgba(231, 76, 60, 0.15);
  --ui-color-rgba-231-76-60-0-2: rgba(231, 76, 60, 0.2);
  --ui-color-rgba-231-76-60-0-35: rgba(231, 76, 60, 0.35);
  --ui-color-rgba-239-68-68-0-05: rgba(239, 68, 68, 0.05);
  --ui-color-rgba-239-68-68-0-1: rgba(239, 68, 68, 0.1);
  --ui-color-rgba-239-68-68-0-15: rgba(239, 68, 68, 0.15);
  --ui-color-rgba-239-68-68-0-2: rgba(239, 68, 68, 0.2);
  --ui-color-rgba-239-68-68-0-6: rgba(239, 68, 68, 0.6);
  --ui-color-rgba-24-10-38-0-92: rgba(24, 10, 38, 0.92);
  --ui-color-rgba-243-156-18-0-18: rgba(243, 156, 18, 0.18);
  --ui-color-rgba-255-255-255-0-06: rgba(255, 255, 255, 0.06);
  --ui-color-rgba-255-255-255-0-12: rgba(255, 255, 255, 0.12);
  --ui-color-rgba-255-255-255-0-14: rgba(255, 255, 255, 0.14);
  --ui-color-rgba-255-255-255-0-15: rgba(255, 255, 255, 0.15);
  --ui-color-rgba-255-255-255-0-18: rgba(255, 255, 255, 0.18);
  --ui-color-rgba-255-255-255-0-2: rgba(255, 255, 255, 0.2);
  --ui-color-rgba-255-255-255-0-22: rgba(255, 255, 255, 0.22);
  --ui-color-rgba-255-255-255-0-24: rgba(255, 255, 255, 0.24);
  --ui-color-rgba-255-255-255-0-28: rgba(255, 255, 255, 0.28);
  --ui-color-rgba-255-255-255-0-35: rgba(255, 255, 255, 0.35);
  --ui-color-rgba-255-255-255-0-6: rgba(255, 255, 255, 0.6);
  --ui-color-rgba-255-255-255-0-85: rgba(255, 255, 255, 0.85);
  --ui-color-rgba-255-255-255-0-9: rgba(255, 255, 255, 0.9);
  --ui-color-rgba-38-8-60-0-3: rgba(38, 8, 60, 0.3);
  --ui-color-rgba-39-174-96-0-15: rgba(39, 174, 96, 0.15);
  --ui-color-rgba-37-99-235-0-15: rgba(37, 99, 235, 0.15);
  --ui-color-rgba-37-211-102-0-15: rgba(37, 211, 102, 0.15);
  --ui-color-rgba-37-211-102-0-2: rgba(37, 211, 102, 0.2);
  --ui-color-rgba-245-158-11-0-15: rgba(245, 158, 11, 0.15);
  --ui-color-rgba-55-12-86-0-25: rgba(55, 12, 86, 0.25);
  --ui-color-rgba-60-35-130-0-08: rgba(60, 35, 130, 0.08);
  --ui-color-rgba-69-16-99-0-08: rgba(69, 16, 99, 0.08);
  --ui-color-rgba-69-16-99-0-12: rgba(69, 16, 99, 0.12);
  --ui-color-rgba-69-16-99-0-16: rgba(69, 16, 99, 0.16);
  --ui-color-rgba-69-16-99-0-18: rgba(69, 16, 99, 0.18);
  --ui-color-rgba-69-16-99-0-2: rgba(69, 16, 99, 0.2);
  --ui-color-rgba-69-16-99-0-25: rgba(69, 16, 99, 0.25);
  --ui-color-rgba-76-175-80-0-2: rgba(76, 175, 80, 0.2);
  --ui-color-rgba-76-175-80-0-35: rgba(76, 175, 80, 0.35);
  --ui-color-rgba-80-60-120-0-6: rgba(80, 60, 120, 0.6);
  --ui-color-rgba-88-98-118-0: rgba(88, 98, 118, 0);
  --ui-color-rgba-90-72-103-0-25: rgba(90, 72, 103, 0.25);
  --ui-color-rgba-90-72-103-0-3: rgba(90, 72, 103, 0.3);
  --ui-color-rgba-90-72-103-0-35: rgba(90, 72, 103, 0.35);
  --ui-color-rgba-102-126-234-0-25: rgba(102, 126, 234, 0.25);
  --ui-color-rgba-102-126-234-0-3: rgba(102, 126, 234, 0.3);
  --ui-color-rgba-102-126-234-0-35: rgba(102, 126, 234, 0.35);

  /* WA Premium / Inbox Tabs */
  --ui-gradient-premium: linear-gradient(135deg, var(--ui-color-667eea) 0%, var(--ui-color-764ba2) 100%);
  --ui-shadow-premium-sm: 0 4px 12px var(--ui-color-rgba-102-126-234-0-25);
  --ui-color-10b981: #10B981;
  --ui-color-e53935: #e53935;
  --ui-color-rgba-16-185-129-0-1: rgba(16, 185, 129, 0.1);

  /* Config hero gradient tokens */
  --ui-color-rgba-255-255-255-0-70: rgba(255, 255, 255, 0.70);

  /* ── Auth & Landing — paleta da identidade visual das páginas públicas ──
     Curada: superfícies (deep/panel/surface), acentos roxo/violeta,
     textos e estados. Variações translúcidas derivam destas via color-mix
     no CSS de página, evitando dezenas de tokens rgba avulsos. */
  --auth-bg-deep: #0f0b23;
  --auth-bg-panel-1: #120a2f;
  --auth-bg-panel-2: #1c1048;
  --auth-bg-panel-3: #4322a4;
  --auth-bg-panel-4: #5e39dd;
  --auth-accent-deep: #6a0dad;
  --auth-accent-strong: #5f35ff;
  --auth-accent: #7f56ff;
  --auth-accent-mid: #7a4fff;
  --auth-accent-light: #8f68ff;
  --auth-accent-soft: #a78bff;
  --auth-accent-tint: #d8c8ff;
  --auth-eyebrow-text: #6d48ec;
  --auth-eyebrow-dot: #8a63ff;
  --auth-surface-1: #fbfaff;
  --auth-surface-2: #f4eefe;
  --auth-surface-card: #ffffff;
  --auth-text: #19162a;
  --auth-text-strong: #1a1340;
  --auth-text-label: #2c2650;
  --auth-text-input: #201a3d;
  --auth-text-soft: #6d6885;
  --auth-text-placeholder: #aaa3c5;
  --auth-border: #e7e4f2;
  --auth-line: #ebe4fa;
  --auth-success: #95f7b3;
  --auth-error-text: #b53a31;
  --auth-error-border: #c0392b;
  --auth-google: #ea4335;

  /* === Landing page: cores brutas do design (auto-tokenizadas) === */
  --ui-color-07051a: #07051a;
  --ui-color-08061a: #08061a;
  --ui-color-0e0820: #0e0820;
  --ui-color-0f0a28: #0f0a28;
  --ui-color-11d3a5: #11d3a5;
  --ui-color-14093a: #14093a;
  --ui-color-173122: #173122;
  --ui-color-178157: #178157;
  --ui-color-183027: #183027;
  --ui-color-1a1240: #1a1240;
  --ui-color-1a3a52: #1a3a52;
  --ui-color-1f2342: #1f2342;
  --ui-color-231d42: #231d42;
  --ui-color-241d44: #241d44;
  --ui-color-25124d: #25124d;
  --ui-color-2a1f00: #2a1f00;
  --ui-color-2bc78a: #2bc78a;
  --ui-color-2c1378: #2c1378;
  --ui-color-312a5f: #312a5f;
  --ui-color-32bcad: #32bcad;
  --ui-color-34a853: #34a853;
  --ui-color-4285f4: #4285f4;
  --ui-color-4ade80: #4ade80;
  --ui-color-635bff: #635bff;
  --ui-color-65e3a8: #65e3a8;
  --ui-color-6c4dff: #6c4dff;
  --ui-color-6f45ff: #6f45ff;
  --ui-color-8158ff: #8158ff;
  --ui-color-8b6cff: #8b6cff;
  --ui-color-8e67ff: #8e67ff;
  --ui-color-94c8ff: #94c8ff;
  --ui-color-95e2ff: #95e2ff;
  --ui-color-98d9ff: #98d9ff;
  --ui-color-b06600: #b06600;
  --ui-color-b5f0c8: #b5f0c8;
  --ui-color-b7eaff: #b7eaff;
  --ui-color-c9b5ff: #c9b5ff;
  --ui-color-c9ffe0: #c9ffe0;
  --ui-color-d5c5ff: #d5c5ff;
  --ui-color-d9c7ff: #d9c7ff;
  --ui-color-ddd2ff: #ddd2ff;
  --ui-color-e8ddff: #e8ddff;
  --ui-color-ede0ff: #ede0ff;
  --ui-color-f0a3ff: #f0a3ff;
  --ui-color-f7f3ff: #f7f3ff;
  --ui-color-f7f5ff: #f7f5ff;
  --ui-color-faf6ff: #faf6ff;
  --ui-color-faf7ff: #faf7ff;
  --ui-color-fbbf24: #fbbf24;
  --ui-color-fda4a4: #fda4a4;
  --ui-color-ff4f00: #ff4f00;
  --ui-color-ff8da1: #ff8da1;
  --ui-color-ffa040: #ffa040;
  --ui-color-ffd089: #ffd089;
  --ui-color-rgba-0-0-0-0-14: rgba(0,0,0,0.14);
  --ui-color-rgba-0-0-0-0-22: rgba(0,0,0,0.22);
  --ui-color-rgba-0-0-0-0-24: rgba(0,0,0,0.24);
  --ui-color-rgba-0-0-0-0-28: rgba(0,0,0,0.28);
  --ui-color-rgba-0-0-0-0-36: rgba(0,0,0,0.36);
  --ui-color-rgba-0-0-0-0-7: rgba(0,0,0,0.7);
  --ui-color-rgba-0-0-0-1: rgba(0,0,0,1);
  --ui-color-rgba-10-10-30-0-12: rgba(10,10,30,0.12);
  --ui-color-rgba-10-10-30-0-3: rgba(10,10,30,0.3);
  --ui-color-rgba-10-7-24-0-1: rgba(10,7,24,0.1);
  --ui-color-rgba-10-7-32-0-14: rgba(10,7,32,0.14);
  --ui-color-rgba-102-214-255-0-06: rgba(102,214,255,0.06);
  --ui-color-rgba-102-214-255-0-14: rgba(102,214,255,0.14);
  --ui-color-rgba-102-214-255-0-16: rgba(102,214,255,0.16);
  --ui-color-rgba-102-214-255-0-18: rgba(102,214,255,0.18);
  --ui-color-rgba-103-77-215-0-24: rgba(103,77,215,0.24);
  --ui-color-rgba-109-77-255-0-08: rgba(109,77,255,0.08);
  --ui-color-rgba-109-77-255-0-36: rgba(109,77,255,0.36);
  --ui-color-rgba-109-77-255-0-4: rgba(109,77,255,0.4);
  --ui-color-rgba-111-69-255-0-1: rgba(111,69,255,0.1);
  --ui-color-rgba-111-69-255-0-42: rgba(111,69,255,0.42);
  --ui-color-rgba-111-82-255-0-22: rgba(111,82,255,0.22);
  --ui-color-rgba-111-82-255-0-24: rgba(111,82,255,0.24);
  --ui-color-rgba-116-220-255-0-14: rgba(116,220,255,0.14);
  --ui-color-rgba-116-83-222-0-04: rgba(116,83,222,0.04);
  --ui-color-rgba-116-88-199-0-14: rgba(116,88,199,0.14);
  --ui-color-rgba-122-104-179-0-16: rgba(122,104,179,0.16);
  --ui-color-rgba-122-85-255-0-25: rgba(122,85,255,0.25);
  --ui-color-rgba-127-86-255-0-04: rgba(127,86,255,0.04);
  --ui-color-rgba-127-86-255-0-08: rgba(127,86,255,0.08);
  --ui-color-rgba-127-86-255-0-1: rgba(127,86,255,0.1);
  --ui-color-rgba-127-86-255-0-12: rgba(127,86,255,0.12);
  --ui-color-rgba-127-86-255-0-14: rgba(127,86,255,0.14);
  --ui-color-rgba-127-86-255-0-18: rgba(127,86,255,0.18);
  --ui-color-rgba-127-86-255-0-2: rgba(127,86,255,0.2);
  --ui-color-rgba-127-86-255-0-22: rgba(127,86,255,0.22);
  --ui-color-rgba-127-86-255-0-24: rgba(127,86,255,0.24);
  --ui-color-rgba-127-86-255-0-28: rgba(127,86,255,0.28);
  --ui-color-rgba-127-86-255-0-3: rgba(127,86,255,0.3);
  --ui-color-rgba-127-86-255-0-32: rgba(127,86,255,0.32);
  --ui-color-rgba-138-99-255-0-12: rgba(138,99,255,0.12);
  --ui-color-rgba-140-111-255-0-52: rgba(140,111,255,0.52);
  --ui-color-rgba-141-130-255-0-14: rgba(141,130,255,0.14);
  --ui-color-rgba-141-130-255-0-26: rgba(141,130,255,0.26);
  --ui-color-rgba-141-226-255-0-22: rgba(141,226,255,0.22);
  --ui-color-rgba-143-104-255-0-1: rgba(143,104,255,0.1);
  --ui-color-rgba-143-104-255-0-22: rgba(143,104,255,0.22);
  --ui-color-rgba-143-104-255-0-24: rgba(143,104,255,0.24);
  --ui-color-rgba-143-104-255-0-3: rgba(143,104,255,0.3);
  --ui-color-rgba-143-104-255-0-32: rgba(143,104,255,0.32);
  --ui-color-rgba-143-104-255-0-34: rgba(143,104,255,0.34);
  --ui-color-rgba-149-247-179-0-08: rgba(149,247,179,0.08);
  --ui-color-rgba-149-247-179-0-1: rgba(149,247,179,0.1);
  --ui-color-rgba-149-247-179-0-12: rgba(149,247,179,0.12);
  --ui-color-rgba-149-247-179-0-14: rgba(149,247,179,0.14);
  --ui-color-rgba-149-247-179-0-16: rgba(149,247,179,0.16);
  --ui-color-rgba-149-247-179-0-18: rgba(149,247,179,0.18);
  --ui-color-rgba-149-247-179-0-2: rgba(149,247,179,0.2);
  --ui-color-rgba-149-247-179-0-22: rgba(149,247,179,0.22);
  --ui-color-rgba-149-247-179-0-38: rgba(149,247,179,0.38);
  --ui-color-rgba-149-247-179-0-42: rgba(149,247,179,0.42);
  --ui-color-rgba-149-247-179-0-48: rgba(149,247,179,0.48);
  --ui-color-rgba-149-247-179-0-5: rgba(149,247,179,0.5);
  --ui-color-rgba-149-247-179-0-6: rgba(149,247,179,0.6);
  --ui-color-rgba-149-247-179-0-7: rgba(149,247,179,0.7);
  --ui-color-rgba-149-247-179-0-92: rgba(149,247,179,0.92);
  --ui-color-rgba-15-11-35-0-55: rgba(15,11,35,0.55);
  --ui-color-rgba-152-217-255-0-16: rgba(152,217,255,0.16);
  --ui-color-rgba-160-120-255-0-16: rgba(160,120,255,0.16);
  --ui-color-rgba-160-120-255-0-18: rgba(160,120,255,0.18);
  --ui-color-rgba-160-120-255-0-3: rgba(160,120,255,0.3);
  --ui-color-rgba-160-124-255-0-28: rgba(160,124,255,0.28);
  --ui-color-rgba-160-124-255-0-3: rgba(160,124,255,0.3);
  --ui-color-rgba-165-124-255-0-1: rgba(165,124,255,0.1);
  --ui-color-rgba-165-124-255-0-22: rgba(165,124,255,0.22);
  --ui-color-rgba-17-44-34-0-18: rgba(17,44,34,0.18);
  --ui-color-rgba-17-44-34-0-22: rgba(17,44,34,0.22);
  --ui-color-rgba-18-140-126-0-4: rgba(18,140,126,0.4);
  --ui-color-rgba-180-140-255-0-18: rgba(180,140,255,0.18);
  --ui-color-rgba-180-140-255-0-2: rgba(180,140,255,0.2);
  --ui-color-rgba-183-150-255-0-26: rgba(183,150,255,0.26);
  --ui-color-rgba-184-154-255-0-34: rgba(184,154,255,0.34);
  --ui-color-rgba-185-147-255-0-34: rgba(185,147,255,0.34);
  --ui-color-rgba-185-147-255-0-42: rgba(185,147,255,0.42);
  --ui-color-rgba-196-235-186-0-92: rgba(196,235,186,0.92);
  --ui-color-rgba-199-175-255-0-18: rgba(199,175,255,0.18);
  --ui-color-rgba-199-175-255-0-2: rgba(199,175,255,0.2);
  --ui-color-rgba-199-175-255-0-22: rgba(199,175,255,0.22);
  --ui-color-rgba-199-175-255-0-24: rgba(199,175,255,0.24);
  --ui-color-rgba-199-175-255-0-28: rgba(199,175,255,0.28);
  --ui-color-rgba-199-175-255-0-3: rgba(199,175,255,0.3);
  --ui-color-rgba-199-175-255-0-32: rgba(199,175,255,0.32);
  --ui-color-rgba-199-175-255-0-34: rgba(199,175,255,0.34);
  --ui-color-rgba-20-12-50-0-3: rgba(20,12,50,0.3);
  --ui-color-rgba-201-181-255-0-34: rgba(201,181,255,0.34);
  --ui-color-rgba-201-181-255-0-4: rgba(201,181,255,0.4);
  --ui-color-rgba-201-181-255-0-6: rgba(201,181,255,0.6);
  --ui-color-rgba-201-181-255-0-7: rgba(201,181,255,0.7);
  --ui-color-rgba-209-82-219-0-3: rgba(209,82,219,0.3);
  --ui-color-rgba-209-82-219-0-4: rgba(209,82,219,0.4);
  --ui-color-rgba-217-199-255-0-1: rgba(217,199,255,0.1);
  --ui-color-rgba-217-199-255-0-7: rgba(217,199,255,0.7);
  --ui-color-rgba-219-204-255-0-5: rgba(219,204,255,0.5);
  --ui-color-rgba-219-204-255-0-6: rgba(219,204,255,0.6);
  --ui-color-rgba-22-163-74-0-3: rgba(22,163,74,0.3);
  --ui-color-rgba-220-244-214-0-96: rgba(220,244,214,0.96);
  --ui-color-rgba-23-49-34-0-7: rgba(23,49,34,0.7);
  --ui-color-rgba-239-68-68-0-16: rgba(239,68,68,0.16);
  --ui-color-rgba-245-158-11-0-12: rgba(245,158,11,0.12);
  --ui-color-rgba-245-158-11-0-22: rgba(245,158,11,0.22);
  --ui-color-rgba-245-158-11-0-28: rgba(245,158,11,0.28);
  --ui-color-rgba-245-158-11-0-3: rgba(245,158,11,0.3);
  --ui-color-rgba-245-158-11-0-4: rgba(245,158,11,0.4);
  --ui-color-rgba-247-243-255-0-96: rgba(247,243,255,0.96);
  --ui-color-rgba-249-246-255-0-96: rgba(249,246,255,0.96);
  --ui-color-rgba-251-249-255-0-98: rgba(251,249,255,0.98);
  --ui-color-rgba-255-255-255-0-015: rgba(255,255,255,0.015);
  --ui-color-rgba-255-255-255-0-02: rgba(255,255,255,0.02);
  --ui-color-rgba-255-255-255-0-03: rgba(255,255,255,0.03);
  --ui-color-rgba-255-255-255-0-04: rgba(255,255,255,0.04);
  --ui-color-rgba-255-255-255-0-05: rgba(255,255,255,0.05);
  --ui-color-rgba-255-255-255-0-07: rgba(255,255,255,0.07);
  --ui-color-rgba-255-255-255-0-08: rgba(255,255,255,0.08);
  --ui-color-rgba-255-255-255-0-1: rgba(255,255,255,0.1);
  --ui-color-rgba-255-255-255-0-11: rgba(255,255,255,0.11);
  --ui-color-rgba-255-255-255-0-16: rgba(255,255,255,0.16);
  --ui-color-rgba-255-255-255-0-26: rgba(255,255,255,0.26);
  --ui-color-rgba-255-255-255-0-3: rgba(255,255,255,0.3);
  --ui-color-rgba-255-255-255-0-32: rgba(255,255,255,0.32);
  --ui-color-rgba-255-255-255-0-4: rgba(255,255,255,0.4);
  --ui-color-rgba-255-255-255-0-42: rgba(255,255,255,0.42);
  --ui-color-rgba-255-255-255-0-46: rgba(255,255,255,0.46);
  --ui-color-rgba-255-255-255-0-5: rgba(255,255,255,0.5);
  --ui-color-rgba-255-255-255-0-52: rgba(255,255,255,0.52);
  --ui-color-rgba-255-255-255-0-55: rgba(255,255,255,0.55);
  --ui-color-rgba-255-255-255-0-56: rgba(255,255,255,0.56);
  --ui-color-rgba-255-255-255-0-58: rgba(255,255,255,0.58);
  --ui-color-rgba-255-255-255-0-62: rgba(255,255,255,0.62);
  --ui-color-rgba-255-255-255-0-66: rgba(255,255,255,0.66);
  --ui-color-rgba-255-255-255-0-68: rgba(255,255,255,0.68);
  --ui-color-rgba-255-255-255-0-72: rgba(255,255,255,0.72);
  --ui-color-rgba-255-255-255-0-74: rgba(255,255,255,0.74);
  --ui-color-rgba-255-255-255-0-76: rgba(255,255,255,0.76);
  --ui-color-rgba-255-255-255-0-78: rgba(255,255,255,0.78);
  --ui-color-rgba-255-255-255-0-8: rgba(255,255,255,0.8);
  --ui-color-rgba-255-255-255-0-82: rgba(255,255,255,0.82);
  --ui-color-rgba-255-255-255-0-84: rgba(255,255,255,0.84);
  --ui-color-rgba-255-255-255-0-86: rgba(255,255,255,0.86);
  --ui-color-rgba-255-255-255-0-88: rgba(255,255,255,0.88);
  --ui-color-rgba-255-255-255-0-94: rgba(255,255,255,0.94);
  --ui-color-rgba-255-255-255-0-96: rgba(255,255,255,0.96);
  --ui-color-rgba-255-255-255-0-98: rgba(255,255,255,0.98);
  --ui-color-rgba-26-15-80-0-22: rgba(26,15,80,0.22);
  --ui-color-rgba-42-31-0-0-7: rgba(42,31,0,0.7);
  --ui-color-rgba-43-199-138-0-1: rgba(43,199,138,0.1);
  --ui-color-rgba-43-199-138-0-14: rgba(43,199,138,0.14);
  --ui-color-rgba-43-199-138-0-2: rgba(43,199,138,0.2);
  --ui-color-rgba-43-199-138-0-24: rgba(43,199,138,0.24);
  --ui-color-rgba-73-51-154-0-05: rgba(73,51,154,0.05);
  --ui-color-rgba-73-51-154-0-08: rgba(73,51,154,0.08);
  --ui-color-rgba-73-51-154-0-1: rgba(73,51,154,0.1);
  --ui-color-rgba-73-51-154-0-12: rgba(73,51,154,0.12);
  --ui-color-rgba-75-50-180-0-18: rgba(75,50,180,0.18);
  --ui-color-rgba-8-6-26-0-16: rgba(8,6,26,0.16);
  --ui-color-rgba-8-6-26-0-38: rgba(8,6,26,0.38);
  --ui-color-rgba-8-7-24-0-24: rgba(8,7,24,0.24);
  --ui-color-rgba-8-7-24-0-35: rgba(8,7,24,0.35);
  --ui-color-rgba-8-7-24-0-4: rgba(8,7,24,0.4);
  --ui-color-rgba-8-7-24-0-45: rgba(8,7,24,0.45);
  --ui-color-rgba-84-51-214-0-28: rgba(84,51,214,0.28);
  --ui-color-rgba-84-71-145-0-04: rgba(84,71,145,0.04);
  --ui-color-rgba-84-71-145-0-11: rgba(84,71,145,0.11);
  --ui-color-rgba-88-68-182-0-02: rgba(88,68,182,0.02);
  --ui-color-rgba-88-68-182-0-14: rgba(88,68,182,0.14);
  --ui-color-rgba-9-7-30-0-42: rgba(9,7,30,0.42);
  --ui-color-rgba-95-53-255-0-1: rgba(95,53,255,0.1);
  --ui-color-rgba-95-53-255-0-12: rgba(95,53,255,0.12);
  --ui-color-rgba-95-53-255-0-14: rgba(95,53,255,0.14);
  --ui-color-rgba-95-53-255-0-16: rgba(95,53,255,0.16);
  --ui-color-rgba-95-53-255-0-18: rgba(95,53,255,0.18);
  --ui-color-rgba-95-53-255-0-22: rgba(95,53,255,0.22);
  --ui-color-rgba-95-53-255-0-24: rgba(95,53,255,0.24);
  --ui-color-rgba-95-53-255-0-25: rgba(95,53,255,0.25);
  --ui-color-rgba-95-53-255-0-28: rgba(95,53,255,0.28);
  --ui-color-rgba-95-53-255-0-3: rgba(95,53,255,0.3);
  --ui-color-rgba-95-53-255-0-34: rgba(95,53,255,0.34);
  --ui-color-rgba-95-53-255-0-4: rgba(95,53,255,0.4);
  --ui-color-rgba-95-53-255-0-42: rgba(95,53,255,0.42);

  /* === Landing page: tokens semanticos (--lp-*) === */
  --lp-hero-bg-1: var(--ui-color-120a2f);
  --lp-hero-bg-2: var(--ui-color-1c1048);
  --lp-hero-bg-3: var(--ui-color-5f35ff);
  --lp-hero-bg-4: var(--ui-color-8b6cff);
  --lp-hero-text: var(--ui-surface-card);
  --lp-hero-text-soft: var(--ui-color-rgba-255-255-255-0-76);
  --lp-hero-border: var(--ui-color-rgba-255-255-255-0-12);
  --lp-hero-card-bg: var(--ui-color-rgba-255-255-255-0-08);
  --lp-hero-card-bg-strong: var(--ui-color-rgba-255-255-255-0-12);
  --lp-form-bg: var(--ui-surface-card);
  --lp-form-text: var(--auth-text);
  --lp-form-text-soft: var(--auth-text-soft);
  --lp-form-border: var(--auth-border);
  --lp-accent: var(--auth-accent-deep);
  --lp-accent-2: var(--auth-accent);
  --lp-accent-3: var(--auth-accent-soft);
  --lp-accent-bright: var(--ui-color-c9b5ff);
  --lp-success: var(--auth-success);
  --lp-info: var(--ui-color-98d9ff);
  --lp-page-soft: var(--ui-color-rgba-255-255-255-0-02);
  --lp-page-card: var(--ui-color-rgba-255-255-255-0-04);
  --lp-page-line: var(--ui-color-rgba-255-255-255-0-1);
  --lp-page-text: var(--ui-surface-card);
  --lp-page-text-soft: var(--ui-color-rgba-255-255-255-0-66);
  --lp-hero-shadow: 0 30px 80px var(--ui-color-rgba-8-6-26-0-38);
  --lp-demo-speed: 1;
  --lp-section-pad: 64px;

}

[data-theme="soft-clinic"] {
  color-scheme: light;
  --primary-color: var(--ui-color-2563eb);
  --agendado-cor: var(--ui-color-6ebfeb);
  --primary-hover: var(--ui-color-1e40af);
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);

  --ui-surface-page: var(--ui-color-f9fafb);
  --ui-surface-card: var(--ui-color-fff);
  --ui-surface-soft: var(--ui-palette-Purplegreen-2);
  --ui-border-color: var(--ui-color-d0d5dd);

  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-344054);
  --text-muted: var(--ui-color-6b7280);

  --sidebar-bg: var(--ui-palette-Purplegreen-2);
  --sidebar-bg-2: var(--ui-palette-Purplegreen-4);
  --sidebar-text: var(--ui-color-1f2937);
  --sidebar-active-bg: var(--ui-color-rgba-255-255-255-0-6);
  --sidebar-active-text: var(--ui-color-1f2937);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));

  --color-text-primary: var(--ui-color-344054);
  --color-text-secondary: var(--ui-color-475467);
  --color-text-muted: var(--ui-color-6b7280);
  --color-text-label: var(--ui-color-374151);
  --color-text-emphasis: var(--ui-color-1f2937);

  --color-surface-hover: var(--ui-color-f3f4f6);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-d0d5dd);
  --color-border-muted: var(--ui-color-e5e7eb);
  --color-border-strong: var(--ui-color-475467);
  --color-border-brand-soft: var(--ui-palette-Purplegreen-3);
  --color-surface-brand-soft: var(--ui-palette-Purplegreen-2);
  --color-surface-secondary-soft: var(--ui-palette-Purplegreen-3);
}

[data-theme="clinical-minimal"] {
  color-scheme: light;
  --primary-color: var(--ui-color-475467);
  --primary-hover: var(--ui-color-344054);
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);

  --ui-surface-page: var(--ui-color-f9fafb);
  --ui-surface-card: var(--ui-color-fff);
  --ui-surface-soft: var(--ui-color-f3f4f6);
  --ui-border-color: var(--ui-color-d0d5dd);

  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-344054);
  --text-muted: var(--ui-color-6b7280);

  --sidebar-bg: var(--ui-color-475467);
  --sidebar-bg-2: var(--ui-color-344054);
  --sidebar-text: var(--ui-color-f8f5ff);
  --sidebar-active-bg: var(--ui-color-fff);
  --sidebar-active-text: var(--ui-color-344054);
  --brand-gradient: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));

  --color-text-primary: var(--ui-color-344054);
  --color-text-secondary: var(--ui-color-475467);
  --color-text-muted: var(--ui-color-6b7280);
  --color-text-label: var(--ui-color-374151);
  --color-text-emphasis: var(--ui-color-1f2937);

  --color-surface-hover: var(--ui-color-f3f4f6);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-d0d5dd);
  --color-border-muted: var(--ui-color-e5e7eb);
  --color-border-strong: var(--ui-color-475467);
  --color-border-brand-soft: var(--ui-color-e5e7eb);
  --color-surface-brand-soft: var(--ui-color-f3f4f6);
  --color-surface-secondary-soft: var(--ui-color-f9fafb);
}

[data-theme="health"] {
  color-scheme: light;
  --primary-color: var(--ui-color-115c45);
  --primary-hover: var(--ui-color-166534);
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);

  --ui-surface-page: var(--ui-color-f9fafb);
  --ui-surface-card: var(--ui-color-fff);
  --ui-surface-soft: var(--ui-palette-Purplegreen-1);
  --ui-border-color: var(--ui-color-d0d5dd);

  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-344054);
  --text-muted: var(--ui-color-6b7280);

  --sidebar-bg: var(--ui-color-4aa88a);
  --sidebar-bg-2: var(--ui-color-12503f);
  --sidebar-text: var(--ui-color-f8f5ff);
  --sidebar-active-bg: var(--ui-color-rgba-255-255-255-0-18);
  --sidebar-active-text: var(--ui-color-fff);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));

  --color-text-primary: var(--ui-color-344054);
  --color-text-secondary: var(--ui-color-475467);
  --color-text-muted: var(--ui-color-6b7280);
  --color-text-label: var(--ui-color-374151);
  --color-text-emphasis: var(--ui-color-1f2937);

  --color-surface-hover: var(--ui-color-f3f4f6);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-d0d5dd);
  --color-border-muted: var(--ui-color-e5e7eb);
  --color-border-strong: var(--ui-color-475467);
  --color-border-brand-soft: var(--ui-palette-Purplegreen-3);
  --color-surface-brand-soft: var(--ui-palette-Purplegreen-1);
  --color-surface-secondary-soft: var(--ui-palette-Purplegreen-2);
}

[data-theme="light-room"] {
  color-scheme: light;
  --primary-color: var(--ui-color-667eea);
  --primary-hover: var(--ui-color-5f35ff);
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);

  --ui-surface-page: var(--ui-color-f9fafb);
  --ui-surface-card: var(--ui-color-fff);
  --ui-surface-soft: var(--ui-color-f3f4f6);
  --ui-border-color: var(--ui-color-d0d5dd);

  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-344054);
  --text-muted: var(--ui-color-6b7280);

  --sidebar-bg: var(--ui-color-98a2b3);
  --sidebar-bg-2: var(--ui-color-667eea);
  --sidebar-text: var(--ui-color-f8f5ff);
  --sidebar-active-bg: var(--ui-color-rgba-255-255-255-0-18);
  --sidebar-active-text: var(--ui-color-fff);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));

  --color-text-primary: var(--ui-color-344054);
  --color-text-secondary: var(--ui-color-475467);
  --color-text-muted: var(--ui-color-6b7280);
  --color-text-label: var(--ui-color-374151);
  --color-text-emphasis: var(--ui-color-1f2937);

  --color-surface-hover: var(--ui-color-f3f4f6);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-d0d5dd);
  --color-border-muted: var(--ui-color-e5e7eb);
  --color-border-strong: var(--ui-color-475467);
  --color-border-brand-soft: var(--ui-color-98a2b3);
  --color-surface-brand-soft: var(--ui-color-f3f4f6);
  --color-surface-secondary-soft: var(--ui-color-f9fafb);
}

[data-theme="cotton-candy"] {
  color-scheme: light;
  --primary-color: var(--ui-color-9333ea);
  --primary-hover: var(--ui-color-732d91);
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);

  --ui-surface-page: var(--ui-color-f9fafb);
  --ui-surface-card: var(--ui-color-fff);
  --ui-surface-soft: var(--ui-palette-orchid-6);
  --ui-border-color: var(--ui-color-d0d5dd);

  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-344054);
  --text-muted: var(--ui-color-6b7280);

  --sidebar-bg: var(--ui-palette-orchid-3);
  --sidebar-bg-2: var(--ui-palette-orchid-6);
  --sidebar-text: var(--ui-color-f8f5ff);
  --sidebar-active-bg: var(--ui-color-rgba-255-255-255-0-18);
  --sidebar-active-text: var(--ui-color-fff);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));

  --color-text-primary: var(--ui-color-344054);
  --color-text-secondary: var(--ui-color-475467);
  --color-text-muted: var(--ui-color-6b7280);
  --color-text-label: var(--ui-color-374151);
  --color-text-emphasis: var(--ui-color-1f2937);

  --color-surface-hover: var(--ui-color-f3f4f6);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-d0d5dd);
  --color-border-muted: var(--ui-color-e5e7eb);
  --color-border-strong: var(--ui-color-475467);
  --color-border-brand-soft: var(--ui-palette-orchid-4);
  --color-surface-brand-soft: var(--ui-palette-orchid-6);
  --color-surface-secondary-soft: var(--ui-palette-orchid-5);
}

[data-theme="clinsuite-aura"] {
  color-scheme: light;
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);
  --cal-offhours-overlay: color-mix(in srgb, var(--ui-color-fff) 18%, transparent);
  --cal-shadow-soft: 0 2px 8px color-mix(in srgb, var(--primary-color) 10%, transparent);
  --cal-shadow-card: 0 8px 20px color-mix(in srgb, var(--primary-color) 10%, transparent);
  --cal-shadow-hover: 0 12px 24px color-mix(in srgb, var(--primary-color) 14%, transparent);

  --ui-surface-page: var(--ui-color-f9fafb);
  --ui-surface-card: var(--ui-color-fff);
  --ui-surface-soft: var(--ui-color-f5f0ff);
  --ui-border-color: var(--ui-color-d0d5dd);

  --primary-color: var(--ui-color-8b5cf6);
  --primary-hover: var(--ui-color-5f35ff);
  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-344054);
  --text-muted: var(--ui-color-6b7280);

  --sidebar-bg: color-mix(in srgb, var(--ui-color-8b5cf6) 18%, var(--ui-color-fff));
  --sidebar-bg-2: color-mix(in srgb, var(--ui-color-667eea) 24%, var(--ui-color-f5f0ff));
  --sidebar-text: var(--ui-color-344054);
  --sidebar-active-bg: color-mix(in srgb, var(--ui-color-fff) 72%, transparent);
  --sidebar-active-text: var(--ui-color-344054);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));

  --color-text-primary: var(--ui-color-344054);
  --color-text-secondary: var(--ui-color-475467);
  --color-text-muted: var(--ui-color-6b7280);
  --color-text-label: var(--ui-color-374151);
  --color-text-emphasis: var(--ui-color-1f2937);

  --color-surface-hover: var(--ui-color-f5f0ff);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-d0d5dd);
  --color-border-muted: var(--ui-color-e5e7eb);
  --color-border-strong: var(--ui-color-475467);
  --color-border-brand-soft: color-mix(in srgb, var(--primary-color) 24%, var(--ui-color-fff));
  --color-surface-brand-soft: color-mix(in srgb, var(--primary-color) 9%, var(--ui-color-fff));
  --color-surface-secondary-soft: var(--ui-color-e8f0ff);

  --wa-surface-100: var(--ui-color-fff);
  --wa-surface-200: var(--ui-color-f9fafb);
  --wa-surface-300: var(--ui-color-f5f0ff);
  --wa-surface-400: var(--ui-color-d0d5dd);
  --wa-text-primary: var(--ui-color-344054);
  --wa-text-secondary: var(--ui-color-475467);
  --wa-text-muted: var(--ui-color-6b7280);
  --wa-premium-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ui-color-8b5cf6) 16%, var(--ui-color-fff)) 0%,
    color-mix(in srgb, var(--ui-color-667eea) 20%, var(--ui-color-f5f0ff)) 100%
  );
  --wa-green-light: var(--ui-color-rgba-16-185-129-0-1);
}

[data-theme="good-life"] {
  color-scheme: light;
  --primary-color: var(--ui-color-41654f);
  --primary-hover: var(--ui-color-166534);
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);

  --ui-surface-page: var(--ui-color-f9fafb);
  --ui-surface-card: var(--ui-color-fff);
  --ui-surface-soft: var(--ui-palette-Purplegreen-1);
  --ui-border-color: var(--ui-color-d0d5dd);

  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-344054);
  --text-muted: var(--ui-color-6b7280);

  --sidebar-bg: var(--ui-color-b7cfc0);
  --sidebar-bg-2: var(--ui-color-6e947f);
  --sidebar-text: var(--ui-color-f8f5ff);
  --sidebar-active-bg: var(--ui-color-rgba-255-255-255-0-18);
  --sidebar-active-text: var(--ui-color-fff);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));

  --color-text-primary: var(--ui-color-344054);
  --color-text-secondary: var(--ui-color-475467);
  --color-text-muted: var(--ui-color-6b7280);
  --color-text-label: var(--ui-color-374151);
  --color-text-emphasis: var(--ui-color-1f2937);

  --color-surface-hover: var(--ui-color-f3f4f6);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-d0d5dd);
  --color-border-muted: var(--ui-color-e5e7eb);
  --color-border-strong: var(--ui-color-475467);
  --color-border-brand-soft: var(--ui-color-98a2b3);
  --color-surface-brand-soft: var(--ui-palette-Purplegreen-1);
  --color-surface-secondary-soft: var(--ui-palette-Purplegreen-3);
}

[data-theme="peace-brain"] {
  color-scheme: light;
  --primary-color: var(--ui-color-2563eb);
  --agendado-cor: var(--ui-color-6ebfeb);
  --primary-hover: var(--ui-color-1e40af);
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);

  --ui-surface-page: var(--ui-color-f9fafb);
  --ui-surface-card: var(--ui-color-fff);
  --ui-surface-soft: var(--ui-palette-Purplegreen-3);
  --ui-border-color: var(--ui-color-d0d5dd);

  --header-bg: var(--ui-color-fff);
  --text-color: var(--ui-color-344054);
  --text-muted: var(--ui-color-6b7280);

  --sidebar-bg: var(--ui-palette-Purplegreen-3);
  --sidebar-bg-2: var(--ui-palette-Purplegreen-5);
  --sidebar-text: var(--ui-color-344054);
  --sidebar-active-bg: var(--ui-color-rgba-255-255-255-0-18);
  --sidebar-active-text: var(--ui-color-1f2937);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));

  --color-text-primary: var(--ui-color-344054);
  --color-text-secondary: var(--ui-color-475467);
  --color-text-muted: var(--ui-color-6b7280);
  --color-text-label: var(--ui-color-374151);
  --color-text-emphasis: var(--ui-color-1f2937);

  --color-surface-hover: var(--ui-color-f3f4f6);
  --color-surface-muted: var(--ui-color-f9fafb);
  --color-surface-border: var(--ui-color-e5e7eb);
  --color-surface-input: var(--ui-color-d0d5dd);
  --color-border: var(--ui-color-d0d5dd);
  --color-border-muted: var(--ui-color-e5e7eb);
  --color-border-strong: var(--ui-color-475467);
  --color-border-brand-soft: var(--ui-palette-Purplegreen-4);
  --color-surface-brand-soft: var(--ui-palette-Purplegreen-3);
  --color-surface-secondary-soft: var(--ui-palette-Purplegreen-2);
}

/* Violeta Premium — tema baseado na identidade visual da landing/login.
   Reaproveita a paleta auth-* (roxo/violeta vibrante). */

/* ── Temas do handoff "Formato do sistema" (02/08/2026) ──────────────────────────
   Cada tema define só as TRÊS cores de marca (gradiente início/fim e cor de ação);
   superfícies e texto herdam da base clara. Foi assim que o designer descreveu a
   tabela, e evita 40 linhas repetidas por tema para divergirem depois. */
[data-theme="cacau"] {
  color-scheme: light;
  --primary-color: var(--ui-color-6b3d2a);
  --primary-hover: var(--ui-color-7c4a35);
  --sidebar-bg: var(--ui-color-c8a08a);
  --sidebar-bg-2: var(--ui-color-7c4a35);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);
  --sidebar-active-text: var(--primary-color);
}
[data-theme="teal-oceano"] {
  color-scheme: light;
  --primary-color: var(--ui-color-0f766e);
  --primary-hover: var(--ui-color-0d9488);
  --sidebar-bg: var(--ui-color-5eead4);
  --sidebar-bg-2: var(--ui-color-0d9488);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);
  --sidebar-active-text: var(--primary-color);
}
[data-theme="lavanda"] {
  color-scheme: light;
  --primary-color: var(--ui-color-7c3aed);
  --primary-hover: var(--ui-color-a78bfa);
  --sidebar-bg: var(--ui-color-c4b5fd);
  --sidebar-bg-2: var(--ui-color-a78bfa);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);
  --sidebar-active-text: var(--primary-color);
}
[data-theme="rose-blush"] {
  color-scheme: light;
  --primary-color: var(--ui-color-b04a63);
  --primary-hover: var(--ui-color-d6738d);
  --sidebar-bg: var(--ui-color-f0a3b5);
  --sidebar-bg-2: var(--ui-color-d6738d);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);
  --sidebar-active-text: var(--primary-color);
}
[data-theme="bordo"] {
  color-scheme: light;
  --primary-color: var(--ui-color-881337);
  --primary-hover: var(--ui-color-7f1d38);
  --sidebar-bg: var(--ui-color-be4a6a);
  --sidebar-bg-2: var(--ui-color-7f1d38);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);
  --sidebar-active-text: var(--primary-color);
}
[data-theme="terracota"] {
  color-scheme: light;
  --primary-color: var(--ui-color-a83f28);
  --primary-hover: var(--ui-color-c1553a);
  --sidebar-bg: var(--ui-color-e8927c);
  --sidebar-bg-2: var(--ui-color-c1553a);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);
  --sidebar-active-text: var(--primary-color);
}
[data-theme="ambar-mel"] {
  color-scheme: light;
  --primary-color: var(--ui-color-a1610b);
  --primary-hover: var(--ui-color-d97706);
  --sidebar-bg: var(--ui-color-fcd34d);
  --sidebar-bg-2: var(--ui-color-d97706);
  --brand-gradient: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-2));
  --fc-toolbar-btn-bg: color-mix(in srgb, var(--primary-color) 55%, var(--ui-color-fff));
  --fc-toolbar-btn-active-bg: color-mix(in srgb, var(--primary-color) 80%, var(--ui-color-fff));
  --fc-toolbar-title-color: var(--primary-color);
  --sidebar-active-text: var(--primary-color);
}