:root{ /* Cores base (tema claro corporativo) */ --bg: #f5f7fb; --surface: #ffffff; --surface-2: #f1f3f8; --text: #1f2937; --muted: #6b7280; /* Marca / Ação */ --brand: #2b6ef6; --brand-600: #1f5ce3; --brand-700: #1a4cc0; /* Estado */ --ok: #16a34a; --warn: #f59e0b; --info: #0ea5e9; --danger: #ef4444; /* Badges status */ --badge-ack-bg: #fff3cd; /* aguardando ack */ --badge-ack-tx: #7a5b00; --badge-rec-bg: #cfe2ff; /* aguardando recebimento */ --badge-rec-tx: #084298; --badge-done-bg: #d1e7dd; /* recebido */ --badge-done-tx: #0f5132; /* Bordas, raio e sombras */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --shadow-sm: 0 2px 10px rgba(0,0,0,.05); --shadow-md: 0 8px 24px rgba(0,0,0,.08); --shadow-lg: 0 12px 36px rgba(0,0,0,.12); /* Tipografia */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji"; --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-24: 24px; /* Espaçamentos */ --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; } /* Modo escuro opcional (só alternar .theme-dark no ou ) */ .theme-dark{ --bg: #0f172a; --surface: #0b1222; --surface-2: #0e1628; --text: #e5e7eb; --muted: #9ca3af; --brand: #4f83ff; --brand-600: #3a6af0; --brand-700: #2f57c9; --shadow-sm: 0 2px 10px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 12px 36px rgba(0,0,0,.5); }