/* ===========================================================================
CAMADA 1 - TOKENS
Fonte unica de verdade de cor, tipografia, espaco, raio, sombra e movimento.
Nenhum seletor alem de :root e dos blocos de tema.
Nenhum outro arquivo CSS pode escrever cor literal (hex, rgb ou hsl).
Trocar o tema e editar somente este arquivo.
A IDENTIDADE VISUAL
07/10/2026: a paleta saiu MEDIDA dos arquivos de IDVisual/, e nao estimada:
azul Presto #0048F8 o "i" e o "Pro" do logotipo
tinta #000820 a palavra "iPresto" sobre fundo claro
navy #001038 o cartao escuro do icone
perola #E0E8F0 o "P" em relevo
09/10/2026, SEGUNDA VOLTA: o cliente achou a primeira sutil demais (vidro,
brilho, gradiente, sobretitulo miudo em caixa alta) e pediu "cara de React
com Tailwind". A interface virou PLANA E NITIDA, no desenho que o
shadcn/ui popularizou: fundo liso, borda de 1px que se ve, raio de 6 a
12px, botao solido, titulo semibold, texto de apoio em 14px. O azul e o
branco da marca continuam; sairam os efeitos.
A fonte "iPresto Sans" passou a ser a Inter (licenca OFL, hospedada em
static/fonts/), a fonte do Tailwind UI: mais firme que a Geist em 13 e
14px, e com tamanho optico (o eixo `opsz` aperta o desenho sozinho nos
titulos). Tem algarismos tabulares, que as colunas de dinheiro usam.
DUAS CAMADAS DE NOME:
--azul-600, --navy-900, --perola-50 a PALETA, crua. So este arquivo usa.
--color-accent-600, --color-bg-base o PAPEL de cada cor. Os componentes
so conhecem estes.
DOIS TEMAS, UM CONJUNTO DE COMPONENTES:
:root tema ESCURO. Vale para login, cadastro e a apresentacao.
.ipr-app-body tema CLARO. Redefine os MESMOS papeis para a area interna.
.ipr-sidebar volta ao escuro dentro da barra lateral.
Funciona porque custom property CASCATA: redefinir --color-surface-1 num
container re-tematiza tudo que esta dentro dele.
Os contrastes anotados foram CALCULADOS (WCAG 2.2), e nao estimados.
=========================================================================== */
:root {
/* --- Paleta: azul Presto --------------------------------------------- */
--azul-50: #EFF4FF;
--azul-100: #DBE6FE;
--azul-200: #BFD3FE;
--azul-300: #93B4FD;
--azul-400: #6090FA;
--azul-500: #3B6EF6;
--azul-600: #0B48F5; /* o azul do logotipo (#0048F8), arredondado */
--azul-700: #0839C9;
--azul-800: #0B2F9C;
--azul-900: #0E2A78;
/* --- Paleta: navy (o escuro da marca, sem brilho) --------------------- */
--navy-1000: #020617;
--navy-950: #040B1E;
--navy-900: #081127;
--navy-850: #0C1630;
--navy-800: #111C38;
--navy-750: #172340;
--navy-700: #1E2B4A;
--navy-600: #2A3858;
--navy-500: #52628A; /* borda de controle no escuro: 3,4:1 */
/* --- Paleta: perola (os neutros frios, na linha do slate do Tailwind) -- */
--perola-0: #FFFFFF;
--perola-25: #FCFCFD;
--perola-50: #F8FAFC;
--perola-100: #F1F5F9;
--perola-150: #EAEFF5;
--perola-200: #E2E8F0;
--perola-300: #CBD5E1;
--perola-400: #94A3B8;
--perola-500: #64748B;
--perola-600: #475569;
--perola-700: #334155;
--perola-800: #1E293B;
--perola-900: #0F172A;
/* --- Superficies ------------------------------------------------------ */
/* O escuro e UM fundo so, liso: a referencia do cliente nao tem cartao de
vidro nem luz derramada. O que separa as coisas e a borda. */
--color-bg-sunken: var(--navy-1000);
--color-bg-base: var(--navy-1000);
--color-surface-1: var(--navy-900); /* cartao, quando houver */
--color-surface-2: var(--navy-850); /* hover de linha */
--color-surface-3: var(--navy-800); /* hover ativo */
--color-input-bg: var(--navy-950);
/* Superficie que nunca e transparente: dica e menu que flutuam por cima de
qualquer coisa precisam de fundo solido, em qualquer tema. */
--color-surface-opaco: var(--navy-900);
/* --- Bordas ----------------------------------------------------------- */
--color-border-subtle: var(--navy-800);
--color-border: var(--perola-800);
--color-border-strong: var(--perola-700);
/* Obrigatoria em input, checkbox e select: 3,4:1 contra a pagina
(WCAG 1.4.11, componentes de interface). */
--color-border-control: var(--navy-500);
/* --- Texto ------------------------------------------------------------ */
--color-text-primary: var(--perola-50); /* 19,2:1 sobre a pagina */
--color-text-secondary: var(--perola-300); /* 13,8:1 */
--color-text-muted: var(--perola-400); /* 7,6:1 */
--color-text-on-accent: var(--perola-0);
/* --- Acento ----------------------------------------------------------- */
--color-accent-700: var(--azul-700);
--color-accent-600: var(--azul-600); /* o botao: branco por cima, 6,4:1 */
--color-accent-500: var(--azul-500);
--color-accent-400: var(--azul-400); /* icone */
--color-accent-300: var(--azul-400); /* link: 6,7:1 sobre a pagina */
--color-accent-tint: rgba(59, 110, 246, .14);
--color-accent-tint-strong: rgba(59, 110, 246, .28);
/* Um fio que acende e apaga nas pontas. So a apresentacao usa, como
imagem de fundo. */
--gradient-hairline: linear-gradient(90deg, transparent, var(--azul-600) 22%, var(--azul-300) 50%, var(--azul-600) 78%, transparent);
/* Cores decorativas da apresentacao. Ficam aqui, e nao no CSS da pagina,
para que a promessa "trocar tema = mexer so em tokens" valha tambem para
a decoracao. A area interna nao usa nenhuma delas. */
--color-aurora: rgba(11, 72, 245, .45);
--color-aurora-cool: rgba(96, 144, 250, .22);
--color-mesh-dot: rgba(147, 180, 253, .08);
--color-surface-glass: rgba(8, 17, 39, .72);
--color-sheen: rgba(96, 144, 250, .12);
--color-sheen-edge: rgba(219, 230, 254, .30);
/* Grafico. Uma serie so: uma cor para a barra e uma mais forte para o
periodo corrente. */
--color-chart-bar: var(--azul-400);
--color-chart-bar-atual: var(--azul-300);
--color-chart-axis: var(--color-border);
--color-chart-trilho: rgba(96, 144, 250, .08);
/* --- Estados ---------------------------------------------------------- */
--color-success: #4ADE80;
--color-success-fg: #86EFAC;
--color-success-bg: #052E1A;
--color-success-border: #166534;
--color-danger: #F87171;
/* Botao solido de perigo. O par muda junto: no escuro, vermelho claro com
texto escuro; no claro, vermelho escuro com texto branco. */
--color-danger-solid: #F87171;
--color-danger-solid-fg: #2B0A0A;
--color-danger-fg: #FCA5A5;
--color-danger-bg: #2A0B0F;
--color-danger-border: #7F1D1D;
--color-warning: #FBBF24;
--color-warning-fg: #FCD34D;
--color-warning-bg: #261A05;
--color-warning-border: #78530F;
--color-info: var(--azul-300);
--color-info-fg: var(--azul-200);
--color-info-bg: #0A1A47;
--color-info-border: #1E3A8A;
/* --- Foco ------------------------------------------------------------- */
/* Anel de 3px, translucido, mais a borda acesa: o foco do shadcn/ui. */
--color-focus: var(--azul-400);
--ring-width: 2px;
--ring-offset: 2px;
--shadow-focus: 0 0 0 3px rgba(96, 144, 250, .32);
--shadow-focus-danger: 0 0 0 3px rgba(248, 113, 113, .28);
/* --- Tipografia ------------------------------------------------------- */
/* A FONTE PROPRIA, com reserva de sistema. Se o arquivo nao carregar, a
tela continua legivel na fonte do sistema; `font-display: swap` (no
@font-face, em base.css) faz o texto aparecer na hora. */
--font-sans: "iPresto Sans", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif;
/* ESCALA DE INTERFACE, a do Tailwind. O corpo e 14px (`text-sm`), e o
texto de apoio TAMBEM: foi o apoio em 13px, cinza, que deixou a primeira
versao com cara de apagada. Legenda e dica ficam em 12px. Campo de texto
sobe para 16px no toque (ver base.css): abaixo disso o iPhone aproxima a
tela inteira a cada campo focado. */
--font-size-2xs: .75rem; /* 12px: rotulo pequeno */
--font-size-xs: .75rem; /* 12px: dica, legenda */
--font-size-sm: .875rem; /* 14px: texto de apoio */
--font-size-md: .875rem; /* 14px: o corpo */
--font-size-lg: 1rem; /* 16px: titulo de cartao */
--font-size-xl: 1.25rem; /* 20px: titulo de secao */
--font-size-2xl: 1.5rem; /* 24px: titulo de pagina, numero de destaque */
--font-size-3xl: clamp(1.75rem, 2.4vw, 1.875rem);
--font-size-4xl: clamp(2.25rem, 4.2vw, 3rem);
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 600; /* o "bold" do sistema e semibold, como no shadcn */
--font-weight-black: 700; /* so em numero de abertura e na apresentacao */
--line-tight: 1.2;
--line-snug: 1.4;
--line-normal: 1.5;
--tracking-tight: -.025em; /* titulos, como o `tracking-tight` */
--tracking-snug: -.01em;
--tracking-wide: .025em;
--tracking-eyebrow: 0; /* rotulo em caixa normal: sem espacamento */
/* --- Espaco (base 4px) ------------------------------------------------ */
--space-px: 1px;
--space-0-5: .125rem;
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
--space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem;
/* --- Raio ------------------------------------------------------------- */
/* A escala do Tailwind: controle em 8px (`rounded-md` do shadcn), cartao em
12px, dialogo em 16px. Mais redondo que isso vira bolha, e e uma das
coisas que deixava a primeira versao mole. */
--radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px;
--radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px;
--radius-pill: 999px;
/* --- Medidas de controle ---------------------------------------------- */
--control-h-sm: 2.25rem; /* 36px */
--control-h: 2.5rem; /* 40px: `h-10` */
--control-h-lg: 2.75rem; /* 44px */
/* --- Cobertura ---------------------------------------------------------- */
/* Fundo de dialogo e de gaveta, e cobertura sobre a logo enviada pelo
usuario. Sempre escura: o texto que ela carrega e branco. */
--color-overlay: rgba(2, 6, 23, .60);
--color-overlay-suave: rgba(2, 6, 23, .36);
/* --- Sombra ----------------------------------------------------------- */
/* No escuro quase nao se usa sombra: quem separa e a borda. */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px -1px rgba(0, 0, 0, .35);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .40), 0 2px 4px -2px rgba(0, 0, 0, .40);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .45), 0 4px 6px -4px rgba(0, 0, 0, .45);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .50), 0 8px 10px -6px rgba(0, 0, 0, .50);
--shadow-highlight: none;
/* A borda de uma tabela que rola de lado: diz que ha mais coluna para la. */
--color-sombra-rolagem: rgba(0, 0, 0, .55);
/* Esqueleto de carregamento: o bloco e o brilho que passa por ele. */
--color-esqueleto: rgba(255, 255, 255, .06);
--color-esqueleto-brilho: rgba(255, 255, 255, .12);
/* --- Movimento -------------------------------------------------------- */
--ease-out: cubic-bezier(.22, 1, .36, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
/* Saida longa e SEM repique: acelera cedo e passa quase todo o percurso
freando. Curva elastica faria a marca parecer de brinquedo. */
--ease-expo: cubic-bezier(.16, 1, .3, 1);
--dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 360ms;
/* Recolher a sidebar. Acima de ~250ms um painel que encolhe deixa de
parecer resposta e passa a parecer espera. */
--dur-panel: 220ms;
/* Chegada do conteudo de uma pagina interna. */
--dur-page: 220ms;
/* Periodos das camadas do fundo animado da apresentacao. PRIMOS ENTRE SI
de proposito: a combinacao so se repete depois de 19x23x31 = 13.547s. */
--dur-ambient-1: 19s;
--dur-ambient-2: 23s;
--dur-ambient-3: 31s;
/* Momento em que o icone da abertura comeca a pousar no login e a tela de
baixo aparece. TUDO que a pagina anima na chegada deriva deste numero. */
--intro-exit: 900ms;
/* Quanto dura o pouso do icone no cabecalho do login. */
--intro-pouso: 420ms;
/* --- Medidas de layout ------------------------------------------------ */
--container-narrow: 24rem; /* a coluna de login: `max-w-sm` */
--container-lg: 80rem;
/* Teto da coluna de conteudo da area interna. Num monitor de 2560px, cartao
esticado ate a borda vira faixa e a leitura vira um passeio lateral. */
--conteudo-max: 92rem;
--sidebar-width: 16rem;
--sidebar-compacta: 4.5rem;
--topbar-height: 3.75rem;
--measure: 66ch;
/* --- Z-index ---------------------------------------------------------- */
--z-sticky: 100; --z-dropdown: 300; --z-overlay: 400; --z-drawer: 450; --z-modal: 500;
--z-toast: 600; --z-progresso: 650;
--z-intro: 700; /* a cortina cobre ate o toast */
}
/* ===========================================================================
TEMA CLARO - area interna do sistema
So redefine papeis. Nao ha uma unica declaracao de layout aqui.
Contrastes conferidos (WCAG AA, calculados):
texto primario 17,9:1 | secundario 7,6:1 | muted 4,8:1 sobre o cartao
muted 4,5:1 sobre a pagina | borda de controle 3,3:1
branco sobre o azul do botao 6,4:1 | os quatro selos acima de 5:1
=========================================================================== */
.ipr-app-body {
/* O TEMA DOS CONTROLES NATIVOS, e nao so das nossas cores. O
do base.html vale para o
documento inteiro e foi escrito para o login, que e escuro; aqui o
esquema volta para claro, e lista de