/* ============================================================================= Analisp Brand Tokens — camada global do design system (fallback Algar) ---------------------------------------------------------------------------- Fonte: skill analisp-design-system (data pack Algar) + ui-design-system.mdc. Esta camada CENTRALIZA os tokens de marca antes consumidos de forma duplicada por paginas (--aa-*, --cpe-*, --gs-*). As paginas devem aliar seus tokens locais a estes (`--aa-ink: var(--brand-ink)`), nao redefinir valores de marca. ORDEM DE CARGA (App.razor): site.css -> fonts -> ESTE -> onu-card-tokens.css -> demais. Carregado depois de site.css para poder referenciar --rz-*, e antes de onu-card-tokens.css/paginas para servir de base. ----------------------------------------------------------------------------- CONTRATO DE PARIDADE DE TEMA (mesmo de onu-card-tokens.css) ----------------------------------------------------------------------------- O toggle de tema in-app e o + ThemeService. O Radzen NAO aplica classe/atributo no /: ele troca a folha base (material3-base.css <-> material3-dark-base.css) e cada uma redefine os --rz-* em :root. Logo: - NEUTROS (texto/borda/superficie) DEVEM derivar dos --rz-* que TROCAM: --rz-text-color, --rz-text-secondary-color, --rz-base-background-color, --rz-panel/-body/-card-background-color. - ACENTOS DE MARCA Algar (ink/teal/verde/azul/amarelo/laranja) sao HEX FIXO: identicos em light/dark (cor de marca, theme-independent). - Para adaptar um acento ao tema, usar color-mix(in srgb, X%, var(--rz-text-color) Y%) — como --rz-text-color troca, o resultado escurece no light e clareia no dark. Os seletores .dark-theme / [data-bs-theme] / .light-theme sao INERTES em runtime (nunca casam). NAO usar para paridade. NAO introduzir #000000 em UI. ============================================================================= */ :root { /* ---------- Acentos de marca Algar (HEX fixo, theme-independent) ---------- */ --brand-ink: #0A645A; /* Teal escuro — tinta padrao (nunca #000) */ --brand-ink-soft: #646E6E; --brand-teal: #28BEA5; --brand-teal-light: #1EFFD2; --brand-verde: #00EBB0; /* primaria */ --brand-azul: #00BEFF; /* primaria */ --brand-azul-claro: #00E6FF; --brand-amarelo: #FFC300; /* apoio — atencao/medio */ --brand-laranja: #FF9100; /* apoio — atencao */ /* ---------- Tipografia ---------- */ --brand-font-title: 'Exo', 'Montserrat', system-ui, sans-serif; --brand-font-body: 'Montserrat', 'Exo', system-ui, sans-serif; /* ---------- Gradientes validos (max 2 cores, >=1 primaria) ---------- */ --brand-grad-brand: linear-gradient(135deg, var(--brand-verde), var(--brand-azul-claro)); --brand-grad-hero: linear-gradient(135deg, color-mix(in srgb, var(--brand-verde) 14%, transparent), color-mix(in srgb, var(--brand-azul-claro) 8%, transparent)); /* ---------- Superficies/bordas theme-aware (seguem o toggle) ---------- */ --brand-surface-soft: color-mix(in srgb, var(--brand-teal) 6%, var(--rz-base-background-color, #fff) 94%); --brand-surface-faint: color-mix(in srgb, transparent, var(--rz-text-color, var(--brand-ink)) 4%); --brand-border: color-mix(in srgb, transparent, var(--rz-text-color, var(--brand-ink)) 12%); --brand-border-teal: color-mix(in srgb, var(--brand-teal) 24%, transparent 76%); --brand-border-focus: color-mix(in srgb, var(--brand-teal) 52%, transparent 48%); --brand-focus-ring: color-mix(in srgb, var(--brand-teal) 22%, transparent 78%); --brand-muted: color-mix(in srgb, transparent, var(--rz-text-color, var(--brand-ink)) 45%); --brand-divider: color-mix(in srgb, transparent, var(--rz-text-color, var(--brand-ink)) 10%); --brand-hover: color-mix(in srgb, transparent, var(--rz-text-color, var(--brand-ink)) 6%); /* ---------- Sombras (tinta teal escuro, nunca preto puro) ---------- */ --brand-shadow-sm: 0 1px 3px rgba(10, 100, 90, 0.12); --brand-shadow-md: 0 4px 14px rgba(10, 100, 90, 0.14); --brand-shadow-lg: 0 10px 28px rgba(10, 100, 90, 0.18); /* ---------- Raios ---------- */ --brand-radius-card: 20px; --brand-radius-panel: 14px; --brand-radius-chip: 12px; /* ---------- Easing ---------- */ --brand-ease: cubic-bezier(0.4, 0, 0.2, 1); }