/* ========================================================================== Design System V2 — Portal Institucional Enterprise "São Luís do Curu" Tokens CSS (light · dark · high-contrast) + filtros de daltonismo. Este arquivo declara o contrato visual da versão V2. É carregado exclusivamente quando Entity.portal_layout_version == 'v2', via templates/V2/base/base_public.html. Estratégia: - Tokens HSL sem wrapper (ex.: "212 72% 32%") para permitir composição com opacidade via hsl(var(--token) / 0.7). - Tokens customizáveis por tenant são preenchidos pelo context processor theme_css quando ThemeConfig.is_active. Caso contrário, os defaults declarados aqui prevalecem. - Dark mode via classe .dark em . Alto contraste via .high-contrast (sobrepõe ambos os modos anteriores). ========================================================================== */ :root { /* ---------- Superfícies ---------- */ --background: 210 20% 98%; --foreground: 214 32% 14%; --card: 0 0% 100%; --card-foreground: 214 32% 14%; --popover: 0 0% 100%; --popover-foreground: 214 32% 14%; /* ---------- Marca ---------- */ --primary: 212 72% 32%; --primary-foreground: 0 0% 100%; --secondary: 210 18% 95%; --secondary-foreground: 214 32% 14%; --muted: 210 14% 93%; --muted-foreground: 214 12% 48%; --accent: 187 82% 42%; --accent-foreground: 0 0% 100%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; /* ---------- UI ---------- */ --border: 214 18% 89%; --input: 214 18% 89%; --ring: 212 72% 32%; --radius: 0.625rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: 1rem; --radius-2xl: 1.25rem; /* ---------- Estados semânticos ---------- */ --success: var(--gov-green); --success-foreground: 0 0% 100%; --warning: var(--gov-orange); --warning-foreground: 0 0% 100%; --info: var(--accent); --info-foreground: 0 0% 100%; --danger: var(--destructive); --danger-foreground: var(--destructive-foreground); /* ---------- Tokens governamentais ---------- */ --gov-blue-dark: 214 45% 18%; --gov-blue-mid: 212 55% 26%; --gov-green: 152 58% 38%; --gov-gold: 43 85% 52%; --gov-orange: 24 92% 55%; --gov-red: 0 72% 51%; --gov-surface: 210 25% 97%; --hero-overlay: 214 45% 10%; /* ---------- Seção de transparência ---------- */ --transparency-bg: 212 72% 32%; --transparency-fg: 0 0% 100%; /* ---------- Sidebar (compat shadcn) ---------- */ --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; /* ---------- Motion (respeito a prefers-reduced-motion aplicado em v2-components.css) ---------- */ --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 150ms; --duration-base: 200ms; --duration-normal: 250ms; --duration-slow: 300ms; --duration-slower: 500ms; /* ---------- Spacing / elevation / z-index ---------- */ --space-page-y: 3rem; --space-section-y: 2rem; --shadow-card: 0 18px 30px -30px rgb(15 23 42 / 0.24); --shadow-panel: 0 18px 36px -28px rgb(15 23 42 / 0.18); --shadow-elevated: 0 24px 48px -36px rgb(15 23 42 / 0.22); --z-header: 50; --z-dropdown: 100; --z-modal: 1050; /* ---------- Tipografia V2 ---------- */ --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif; --font-heading: "Merriweather Sans", "Source Sans 3", "Segoe UI", sans-serif; --font-display: var(--font-heading); --gold: var(--gov-gold); /* ---------- Escala de fonte acessível (controle A+ / A / A-) ---------- */ --a11y-font-scale: 1; } /* ========================================================================== Dark mode ========================================================================== */ .dark { --background: 214 32% 8%; --foreground: 210 18% 95%; --card: 214 32% 12%; --card-foreground: 210 18% 95%; --popover: 214 32% 12%; --popover-foreground: 210 18% 95%; --primary: 212 65% 55%; --primary-foreground: 0 0% 100%; --secondary: 214 25% 18%; --secondary-foreground: 210 18% 95%; --muted: 214 20% 18%; --muted-foreground: 214 12% 62%; --accent: 187 70% 48%; --accent-foreground: 0 0% 100%; --destructive: 0 62% 35%; --destructive-foreground: 210 40% 98%; --border: 214 20% 22%; --input: 214 20% 22%; --ring: 212 65% 55%; --success: var(--gov-green); --warning: var(--gov-orange); --info: var(--accent); --danger: var(--destructive); --gov-blue-dark: 214 35% 12%; --gov-blue-mid: 212 45% 20%; --gov-green: 152 50% 35%; --gov-gold: 43 75% 48%; --gov-surface: 214 25% 14%; --hero-overlay: 214 45% 6%; --transparency-bg: 212 55% 20%; --transparency-fg: 0 0% 100%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } /* ========================================================================== High contrast (sobrepõe light/dark — WCAG 2.1 AAA para texto) ========================================================================== */ .high-contrast { --background: 0 0% 0%; --foreground: 0 0% 100%; --card: 0 0% 5%; --card-foreground: 0 0% 100%; --popover: 0 0% 5%; --popover-foreground: 0 0% 100%; --primary: 60 100% 50%; --primary-foreground: 0 0% 0%; --secondary: 0 0% 15%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 15%; --muted-foreground: 0 0% 80%; --accent: 60 100% 50%; --accent-foreground: 0 0% 0%; --border: 0 0% 40%; --input: 0 0% 40%; --ring: 60 100% 50%; --success: 120 100% 50%; --warning: 60 100% 50%; --info: 180 100% 50%; --danger: 0 100% 65%; --gov-blue-dark: 0 0% 5%; --gov-blue-mid: 0 0% 10%; --gov-surface: 0 0% 8%; --hero-overlay: 0 0% 0%; --transparency-bg: 0 0% 5%; --transparency-fg: 0 0% 100%; }