/* ============================================================ CNPA Boleto — Design System "Maré" Tokens: cor, tipografia, espaço, raio, sombra, motion Conteúdo pt-BR · Mobile-first · WCAG AA (AAA no Portal) ------------------------------------------------------------ Conceito: marítimo vivo e moderno, acolhedor mas confiável. Água, maré, rede, horizonte, sol da manhã. "A colônia cuidando do pescador" — próximo, claro, honesto. ============================================================ */ /* As fontes (Newsreader + Plus Jakarta Sans) são carregadas via no (templates/base.html) com preconnect — @import aqui bloquearia o render em cascata (2º request após o parse deste CSS). */ :root { /* --------------------------------------------------------- 1. PALETA BASE --------------------------------------------------------- */ /* Maré — primária (teal / água viva). Ação, links, marca. */ --mare-50: #EAFBFC; --mare-100: #CBF3F6; --mare-200: #9DE8EE; --mare-300: #5FD6E1; --mare-400: #22B8CF; /* ciano claro — destaque, fim do gradiente */ --mare-500: #0E9DAC; --mare-600: #0E7C86; /* TEAL BASE — primária da marca */ --mare-700: #0F636C; --mare-800: #114E56; --mare-900: #0B3B47; /* Oceano — petróleo profundo */ /* Sol / Areia — secundária (âmbar quente). Calor humano, pontualidade/desconto. Usar com parcimônia. */ --areia-50: #FEF6EA; --areia-100: #FCE8C9; --areia-200: #F9D49A; --areia-300: #F6BE68; --areia-400: #F4A23B; /* SOL BASE */ --areia-500: #E8871A; --areia-600: #C06A12; /* Névoa — neutros (cinza-azulado frio). Fundos, bordas, texto secundário. */ --nevoa-0: #FFFFFF; --nevoa-50: #F6F9FB; /* quase-branco — fundo de tela */ --nevoa-100: #EDF2F5; --nevoa-200: #DCE5EA; --nevoa-300: #C2D0D8; --nevoa-400: #94A8B2; --nevoa-500: #6B818C; --nevoa-600: #51646E; --nevoa-700: #3A4A52; --nevoa-800: #29363C; --nevoa-900: #1C2B30; /* grafite */ /* Semânticos — status (sempre cor + ícone + rótulo, nunca só cor) */ --pago-50: #E7F8F1; --pago-500: #10B981; --pago-600: #0E9E72; /* Pago / em dia / sucesso — verde-mar */ --aberto-50: #FEF4E2; --aberto-200: #F6DCA0; --aberto-500: #F59E0B; --aberto-600: #D9850A; /* Em aberto / atenção — âmbar */ --vencido-50: #FDECEC; --vencido-200: #F9A8A8; --vencido-500: #EF4444; --vencido-600: #DC2F2F;/* Vencido / inadimplente / erro — coral */ --cancelado: var(--nevoa-500); /* Cancelado — neutro */ --contestacao-50: #EEF2FF; --contestacao-200: #C7D2FE; --contestacao-600: #4f46e5; /* Em contestação — indigo (literal do bundle, centralizado) */ --info-500: var(--mare-600); /* Informação — Maré */ /* --------------------------------------------------------- 2. TOKENS SEMÂNTICOS DE COR (papéis) --------------------------------------------------------- */ --bg: var(--nevoa-50); /* fundo de aplicação */ --bg-elev: var(--nevoa-0); /* superfície elevada (cards) */ --bg-sunken: var(--nevoa-100); /* área rebaixada / campos */ --fg1: var(--nevoa-900); /* texto principal / alto contraste */ --fg2: var(--nevoa-600); /* texto secundário */ --fg3: var(--nevoa-500); /* texto terciário / legenda */ --fg-on-mare: #FFFFFF; /* texto sobre teal/gradiente */ --fg-on-mare-90: rgba(255,255,255,0.9); /* sobre teal — rótulos/destaques (ex.: features do hero) */ --fg-on-mare-88: rgba(255,255,255,0.88); /* sobre teal — texto em card (ex.: "você está em dia") */ --fg-on-mare-85: rgba(255,255,255,0.85); /* sobre teal — texto de apoio em painel (ex.: gerar mensalidade) */ --fg-on-mare-82: rgba(255,255,255,0.82); /* sobre teal — texto de apoio (ex.: descrição do hero) */ --fg-on-mare-80: rgba(255,255,255,0.8); /* sobre teal — texto em selo/recibo (portal) */ --fg-on-mare-60: rgba(255,255,255,0.6); /* sobre teal — legenda discreta (ex.: rodapé do hero) */ --fg-on-areia: var(--mare-900); /* texto sobre âmbar */ --brand: var(--mare-600); /* cor de marca / ação primária */ --brand-hover: var(--mare-700); --brand-press: var(--mare-800); --link: var(--mare-700); --border: var(--nevoa-200); /* borda padrão */ --border-strong: var(--nevoa-300); --ring: var(--mare-400); /* anel de foco visível */ /* Gradiente assinatura: água → raso (teal → ciano) */ --grad-mare: linear-gradient(135deg, var(--mare-700) 0%, var(--mare-600) 45%, var(--mare-400) 100%); /* Gradiente herói (profundo → raso) */ --grad-hero: linear-gradient(150deg, var(--mare-900) 0%, var(--mare-700) 50%, var(--mare-500) 100%); /* Gradiente sol (calor, parcimônia) */ --grad-sol: linear-gradient(135deg, var(--areia-500) 0%, var(--areia-300) 100%); /* --------------------------------------------------------- 3. TIPOGRAFIA --------------------------------------------------------- */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; /* serifa moderna, calor institucional */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* humanista, legível */ --font-num: 'Plus Jakarta Sans', system-ui, sans-serif; /* valores monetários (tabular-nums) */ /* Escala tipográfica (rem; 1rem = 16px). Portal usa ponta maior; Colônia, ponta comportada. */ --text-xs: 0.75rem; /* 12px — micro rótulos (somente Colônia) */ --text-sm: 0.875rem; /* 14px — corpo denso (Colônia) */ --text-base: 1rem; /* 16px — corpo */ --text-lg: 1.125rem; /* 18px — corpo acessível (Portal) */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px — valor R$ em destaque */ --text-5xl: 3.75rem; /* 60px — herói */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal:1.5; --leading-relaxed:1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-extra: 800; /* --------------------------------------------------------- 4. ESPAÇO (escala 4pt) — respiro arejado --------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* alvo de toque mínimo no Portal */ --space-16: 64px; --space-20: 80px; /* --------------------------------------------------------- 5. RAIO — cantos generosos --------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; /* botões */ --radius-lg: 18px; --radius-xl: 22px; /* cards */ --radius-2xl: 28px; /* heros, cartão de pagamento */ --radius-pill: 999px; /* badges, chips */ /* --------------------------------------------------------- 6. SOMBRA — suave, em camadas (luz fria) --------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(11, 59, 71, 0.06); --shadow-sm: 0 1px 3px rgba(11, 59, 71, 0.08), 0 1px 2px rgba(11, 59, 71, 0.04); --shadow-md: 0 4px 12px rgba(11, 59, 71, 0.08), 0 2px 4px rgba(11, 59, 71, 0.05); --shadow-lg: 0 12px 28px rgba(11, 59, 71, 0.12), 0 4px 10px rgba(11, 59, 71, 0.06); --shadow-xl: 0 24px 50px rgba(11, 59, 71, 0.16); --shadow-mare: 0 12px 28px rgba(14, 124, 134, 0.28); /* realce colorido sob CTA primária */ --shadow-focus: 0 0 0 3px rgba(34, 184, 207, 0.45); /* anel de foco */ /* --------------------------------------------------------- 7. MOTION — discreto e amigável --------------------------------------------------------- */ --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* --------------------------------------------------------- 8. LAYOUT --------------------------------------------------------- */ --portal-max: 480px; /* largura de conteúdo do Portal (mobile-first) */ --sidebar-w: 256px; /* sidebar do Painel da Colônia */ --tap-min: 48px; /* alvo de toque acessível */ } /* ============================================================ ESTILOS SEMÂNTICOS (classes utilitárias canônicas) ============================================================ */ .ds-h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); } .ds-h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); } .ds-h3 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--fg1); } .ds-eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--mare-600); } .ds-body { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg1); } .ds-body-lg { /* corpo do Portal do Pescador (acessível) */ font-family: var(--font-sans); font-size: var(--text-lg); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg1); } .ds-small { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg2); } .ds-caption { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg3); } /* Valor monetário em R$ — tabular, precisão financeira */ .ds-money { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--fg1); } .ds-money-hero { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-size: var(--text-4xl); font-weight: var(--weight-extra); letter-spacing: var(--tracking-tight); line-height: 1; } /* Reset leve útil para previews/kits */ .ds-reset * { box-sizing: border-box; }