/* * Dr. Carlos Parra — Design System v1.0 * Tokens globais + utilidades compartilhadas * * Este arquivo é carregado no global (base_unified.html) * Tokens espelham a config Tailwind (cores, radius, shadows, fonts). * Classes utilitárias migradas aqui NO PR-F1.2 substituem CSS inline dos 26 templates. */ /* ======================================== * 1. DESIGN TOKENS — CSS Variables * ======================================== * Expostas globalmente pra uso em CSS customizado. * Espelham a paleta Tailwind acima. */ :root { /* Paleta primária */ --color-primary-50: #ECFDF5; --color-primary-100: #D1FAE5; --color-primary-500: #10B981; --color-primary-600: #27AE60; --color-primary-700: #1E8449; --color-primary-800: #166534; /* Semânticos */ --color-success: #10B981; --color-success-bg: #ECFDF5; --color-danger: #EF4444; --color-danger-bg: #FEF2F2; --color-warning: #F59E0B; --color-warning-bg: #FFFBEB; --color-info: #3B82F6; --color-info-bg: #EFF6FF; /* Neutros */ --color-neutral-50: #F9FAFB; --color-neutral-100: #F3F4F6; --color-neutral-200: #E5E7EB; --color-neutral-300: #D1D5DB; --color-neutral-400: #9CA3AF; --color-neutral-500: #6B7280; --color-neutral-600: #4B5563; --color-neutral-700: #374151; --color-neutral-800: #1F2937; --color-neutral-900: #111827; /* Radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* Spacing escala (multiplos de 4px) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Shadows suaves */ --shadow-soft: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03); --shadow-soft-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03); --shadow-soft-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.03); /* Tipografia */ --font-sans: "DM Sans", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-serif: "Source Serif 4", Georgia, serif; /* Layout */ --sidebar-width: 260px; --sidebar-collapsed: 64px; --header-height: 60px; /* Transições */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; } /* ======================================== * 2. BASE — Reset visual consistente * ======================================== */ body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Monospace em valores financeiros, CPF, datas */ .font-mono, code, kbd, samp, pre { font-family: var(--font-mono); } /* ======================================== * 3. FOCUS VISIBLE consistente (acessibilidade) * ======================================== */ :focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: var(--radius-md); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } /* Skip link — visível só no foco via teclado (WCAG 2.4.1 Bypass Blocks) */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--color-primary-600); color: #fff; padding: 0.75rem 1.25rem; font-weight: 600; text-decoration: none; z-index: 100; border-radius: 0 0 var(--radius-md) 0; transition: top var(--transition-fast); } .skip-link:focus, .skip-link:focus-visible { top: 0; outline: 2px solid #fff; outline-offset: -4px; } /* ======================================== * 4. Classes compartilhadas (legado + novo) * ======================================== * Migradas de