/* =========================================================================== CAMADA 1 - TOKENS Fonte unica de verdade de cor, tipografia, espaco, raio, sombra e movimento. Nenhum seletor alem de :root. Nenhum outro arquivo CSS pode escrever cor literal (hex, rgb ou hsl). Trocar o tema e editar somente este arquivo. DOIS TEMAS, UM CONJUNTO DE COMPONENTES: :root tema ESCURO. Vale para a tela de login e e o padrao. .ipr-app-body tema CLARO. Redefine as MESMAS variaveis para a area interna do sistema. .ipr-sidebar volta ao escuro dentro da barra lateral. Isto funciona porque custom property CASCATA: redefinir --color-surface-1 num container re-tematiza tudo que esta dentro dele. Nenhum componente foi reescrito para virar claro, e nenhum tem `if tema` em lugar nenhum. `.ipr-card`, `.ipr-table` e `.ipr-badge` continuam com uma definicao so. Consequencia pratica: um tema novo (alto contraste, por exemplo) e um bloco novo AQUI, e nada mais no projeto. A paleta sai da marca: azul #1170E4, navy #0B2145, branco #F0F4FA. Os contrastes marcados foram conferidos contra --color-bg-base. =========================================================================== */ :root { /* --- Superficies (escala de azul escuro) ------------------------------ */ --color-bg-sunken: #04101F; /* fundo do menu lateral */ --color-bg-base: #071A33; /* fundo da pagina */ --color-surface-1: #0D2444; /* cards */ --color-surface-2: #143257; /* elevado, hover de linha */ --color-surface-3: #1B3F6B; /* hover ativo */ /* O campo e um "poco" MAIS ESCURO que o card, nao mais claro: em tema escuro, input mais claro achata a hierarquia e obriga borda fraca. */ --color-input-bg: #081E39; /* --- Bordas ----------------------------------------------------------- */ --color-border-subtle: #143257; --color-border: #1E4173; --color-border-strong: #2C5891; /* Obrigatoria em input, checkbox e select: contraste suficiente contra o preenchimento e contra o card (WCAG 1.4.11, componentes de interface). */ --color-border-control: #43709F; /* --- Texto ------------------------------------------------------------ */ --color-text-primary: #EAF2FF; /* ~15:1 - AAA */ --color-text-secondary: #AEC5E4; /* ~9.6:1 - AAA */ --color-text-muted: #7F9BC0; /* ~5.6:1 - AA */ --color-text-on-accent: #FFFFFF; /* --- Acento (o azul da marca) ---------------------------------------- */ --color-accent-700: #0B4FA8; --color-accent-600: #0E5FC6; --color-accent-500: #1170E4; /* azul da marca; branco por cima da 4.6:1 */ --color-accent-400: #4D9BFF; /* icone, link, o "i" da marca */ --color-accent-300: #8CBEFF; /* link sobre superficie elevada */ --color-accent-tint: rgba(77, 155, 255, .12); --color-accent-tint-strong: rgba(77, 155, 255, .24); --gradient-accent: linear-gradient(180deg, #1B7BEE 0%, #0E5FC6 100%); --gradient-accent-hover: linear-gradient(180deg, #0E5FC6 0%, #0B4FA8 100%); --gradient-hairline: linear-gradient(90deg, transparent, #1170E4 22%, #4D9BFF 50%, #1170E4 78%, transparent); /* Cores decorativas do fundo. Ficam aqui, e nao no CSS da pagina, para que a promessa "trocar tema = mexer so em tokens" valha tambem para a decoracao. As duas auroras sao tons diferentes de proposito: duas luzes da mesma cor se somariam num borrao unico em vez de se cruzarem. */ --color-aurora: rgba(17, 112, 228, .50); /* quente, azul da marca */ --color-aurora-cool: rgba(94, 168, 255, .26); /* fria, mais clara */ --color-mesh-dot: rgba(140, 185, 255, .085); /* Grafico. Uma serie so, entao nao ha paleta categorica: uma cor para a barra e uma variante mais forte para a barra do periodo corrente. Contrastes conferidos contra --color-surface-1 (o cartao): barra 5,5:1 | rotulo do eixo 5,4:1 | valor destacado 13,8:1 */ --color-chart-bar: #4D9BFF; --color-chart-bar-atual: #8CBEFF; --color-chart-axis: #1E4173; /* Fundo da cortina de abertura: mais escuro que a pagina, para a pagina parecer que ACENDE quando a cortina sai. */ --color-curtain: #020A16; /* Vidro do cartao. Precisa de alfa: e o alfa que deixa o desfoque de fundo aparecer. Opaco aqui anularia o backdrop-filter. */ --color-surface-glass: rgba(13, 36, 68, .72); /* Brilho que segue o ponteiro e reflexo que cruza uma superficie. */ --color-sheen: rgba(102, 163, 255, .13); --color-sheen-edge: rgba(214, 232, 255, .30); /* --- Estados ---------------------------------------------------------- */ --color-success: #3DD68C; --color-success-fg: #93E9C0; --color-success-bg: #0A2A1E; --color-success-border: #1E6B4A; --color-danger: #FF7A85; /* Botao solido de perigo. Sao dois tokens e nao um porque o par muda junto: no escuro, vermelho claro com texto escuro; no claro, vermelho escuro com texto branco. Derivar um do outro daria contraste ruim num dos dois. */ --color-danger-solid: #FF7A85; --color-danger-solid-fg: #2B1218; --color-danger-fg: #FFB4BB; --color-danger-bg: #2B1218; --color-danger-border: #7A2B35; --color-warning: #F6B93B; --color-warning-fg: #FFDA8C; --color-warning-bg: #2A1F08; --color-warning-border: #7A5A16; --color-info: #4D9BFF; --color-info-fg: #B7D6FF; --color-info-bg: #0E2440; --color-info-border: #285080; /* --- Foco ------------------------------------------------------------- */ --color-focus: #7FB4FF; --ring-width: 2px; --ring-offset: 2px; --shadow-focus: 0 0 0 3px rgba(127, 180, 255, .22); --shadow-focus-danger: 0 0 0 3px rgba(255, 122, 133, .18); /* --- Tipografia ------------------------------------------------------- */ /* Stack de sistema: zero requisicao externa, zero dependencia de CDN e nenhum dado do visitante indo para terceiros. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-size-2xs: .6875rem; --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.375rem; --font-size-2xl: 1.75rem; --font-size-3xl: clamp(1.75rem, 3.2vw, 2.5rem); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-tight: 1.15; --line-snug: 1.35; --line-normal: 1.6; --tracking-tight: -.02em; --tracking-wide: .08em; --tracking-eyebrow: .14em; /* --- Espaco (base 4px) ------------------------------------------------ */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* --- Raio ------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* --- Sombra ----------------------------------------------------------- */ /* O realce interno de 1px no topo e o que faz um card parecer solido, e nao um retangulo chapado, em tema escuro. */ --shadow-sm: 0 1px 2px rgba(2, 8, 20, .40); --shadow-md: 0 4px 12px -2px rgba(2, 8, 20, .50); --shadow-lg: 0 18px 40px -12px rgba(2, 8, 20, .65); --shadow-xl: 0 32px 64px -16px rgba(2, 8, 20, .75); --shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, .06); --shadow-accent-glow: 0 6px 22px -6px rgba(17, 112, 228, .55); /* --- Movimento -------------------------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* Saida longa e SEM repique. E o que separa movimento de produto caro de movimento de site: acelera cedo e passa quase todo o percurso freando. Curva elastica (com overshoot) faria a marca parecer de brinquedo. */ --ease-expo: cubic-bezier(.16, 1, .3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms; --dur-cinema: 850ms; /* Recolher a sidebar. Curto de proposito: acima de ~250ms um painel que encolhe deixa de parecer resposta e passa a parecer espera. */ --dur-panel: 220ms; /* Periodos das tres camadas do fundo animado. PRIMOS ENTRE SI de proposito: com valores redondos (20/30/40) as tres voltariam juntas a posicao inicial a cada minuto e o olho perceberia o loop. Assim a combinacao so se repete depois de 19x23x31 = 13.547s, quase quatro horas. Mexer em um deles: manter primo com os outros dois. */ --dur-ambient-1: 19s; --dur-ambient-2: 23s; --dur-ambient-3: 31s; /* Momento em que a cortina de abertura sai de cena. TUDO que a pagina anima na chegada deriva deste numero, entao acelerar ou alongar a abertura inteira e mexer AQUI e em mais lugar nenhum. */ --intro-exit: 1850ms; /* --- Medidas de layout ------------------------------------------------ */ --container-narrow: 27rem; /* o card de login */ --container-lg: 80rem; --sidebar-width: 16.5rem; --topbar-height: 4rem; --measure: 66ch; /* --- Z-index ---------------------------------------------------------- */ --z-sticky: 100; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-intro: 700; /* a cortina cobre ate o toast */ } /* =========================================================================== TEMA CLARO - area interna do sistema So redefine variaveis. Nao ha uma unica declaracao de layout aqui, e essa e a regra que mantem a promessa: se um dia este bloco sair, tudo volta ao escuro sem quebrar nada. Contrastes conferidos (WCAG AA, calculados e nao estimados): texto primario 15,6:1 | secundario 7,1:1 | muted 4,7:1 sobre a pagina borda de controle 3,2:1 | branco sobre o azul do botao 4,7:1 os quatro selos entre 5,7:1 e 6,8:1 =========================================================================== */ .ipr-app-body { /* --- Superficies ---------------------------------------------------- */ --color-bg-sunken: #E9EEF6; --color-bg-base: #F4F7FB; /* fundo da pagina, nao branco puro */ --color-surface-1: #FFFFFF; /* cartao */ --color-surface-2: #F0F4FA; /* hover de linha */ --color-surface-3: #E4EBF5; /* No escuro o campo era um "poco" mais escuro que o cartao. No claro isso se inverte: o campo e branco e quem o delimita e a BORDA. Manter o campo mais escuro aqui deixaria o formulario com cara de desabilitado. */ --color-input-bg: #FFFFFF; /* --- Bordas ---------------------------------------------------------- */ --color-border-subtle: #EBF0F7; --color-border: #DDE5EF; --color-border-strong: #C4D0E0; --color-border-control: #7D91AC; /* 3,2:1: exigencia de WCAG 1.4.11 */ /* --- Texto ----------------------------------------------------------- */ --color-text-primary: #10243F; --color-text-secondary: #47597A; --color-text-muted: #606F8A; --color-text-on-accent: #FFFFFF; /* --- Acento ----------------------------------------------------------- Link e icone precisam ESCURECER no tema claro. O #4D9BFF que funciona sobre navy da 2,1:1 sobre branco: seria ilegivel. */ --color-accent-400: #0B5FD0; --color-accent-300: #0B5FD0; --color-accent-tint: rgba(17, 112, 228, .08); --color-accent-tint-strong: rgba(17, 112, 228, .20); /* --- Estados: fundo claro, texto escuro ------------------------------ */ --color-success: #0F6B44; --color-success-fg: #0F6B44; --color-success-bg: #E7F6EF; --color-success-border: #B7E2CD; --color-danger: #B3261E; --color-danger-fg: #B3261E; --color-danger-bg: #FDECEA; --color-danger-border: #F3C2BD; --color-danger-solid: #B3261E; --color-danger-solid-fg: #FFFFFF; --color-warning: #8A5300; --color-warning-fg: #8A5300; --color-warning-bg: #FDF3E0; --color-warning-border: #EFD59B; --color-info: #0B4FA8; --color-info-fg: #0B4FA8; --color-info-bg: #E8F1FE; --color-info-border: #BBD5F7; /* --- Foco ------------------------------------------------------------ */ --color-focus: #0B5FD0; --shadow-focus: 0 0 0 3px rgba(11, 95, 208, .18); --shadow-focus-danger: 0 0 0 3px rgba(179, 38, 30, .16); /* --- Sombra ----------------------------------------------------------- No claro a sombra e AZULADA e discreta. Sombra preta sobre fundo claro fica cinza-sujo, que e a marca registrada de tema claro mal adaptado. */ --shadow-sm: 0 1px 2px rgba(16, 36, 63, .06); --shadow-md: 0 2px 8px -2px rgba(16, 36, 63, .10); --shadow-lg: 0 12px 28px -10px rgba(16, 36, 63, .14); --shadow-xl: 0 20px 44px -14px rgba(16, 36, 63, .16); /* O realce interno branco dava solidez ao cartao no escuro. Sobre branco ele e literalmente invisivel, entao vira `none` em vez de ficar somando uma camada que nao faz nada. */ --shadow-highlight: none; --shadow-accent-glow: 0 6px 18px -6px rgba(17, 112, 228, .38); /* --- Grafico ---------------------------------------------------------- */ --color-chart-bar: #1170E4; /* 4,7:1 sobre branco */ --color-chart-bar-atual: #0B4FA8; /* 7,8:1 */ --color-chart-axis: #DDE5EF; --color-sheen: rgba(17, 112, 228, .06); --color-sheen-edge: rgba(255, 255, 255, .55); --color-mesh-dot: rgba(16, 36, 63, .06); } /* --------------------------------------------------------------------------- A SIDEBAR CONTINUA ESCURA Mesmo truque, ao contrario: as variaveis voltam aos valores do tema escuro dentro da barra. Por isso `.ipr-nav__link`, `.ipr-avatar` e `.ipr-eyebrow` funcionam nos dois lados sem nenhuma regra especifica de sidebar. --------------------------------------------------------------------------- */ .ipr-sidebar { --color-bg-sunken: #071A33; --color-surface-1: #10294B; --color-surface-2: #16345E; --color-surface-3: #1E4173; --color-text-primary: #FFFFFF; --color-text-secondary: #C9DAF2; /* 11,2:1 sobre o navy */ --color-text-muted: #8FA6C7; /* 6,4:1 */ --color-accent-300: #7FB4FF; --color-accent-400: #7FB4FF; --color-accent-tint: rgba(127, 180, 255, .12); --color-accent-tint-strong: rgba(127, 180, 255, .26); --color-border-subtle: #16345E; --color-border: #1E4173; --shadow-highlight: inset 0 1px 0 rgba(255, 255, 255, .06); }