/* =================================== ErbsUI - CSS Variables =================================== */ /* CSS Variables - Color Palette */ :root { /* =================================== Primary Color Scale (50-900) Base: #1E5E36 (ERBS brand green) =================================== */ --erbs-primary-50: #E8F5E9; --erbs-primary-100: #C8E6C9; --erbs-primary-200: #A5D6A7; --erbs-primary-300: #81C784; --erbs-primary-400: #4CAF50; --erbs-primary: #1E5E36; --erbs-primary-hover: #2A7A48; --erbs-primary-600: #2A7A48; --erbs-primary-700: #1B4E2D; --erbs-primary-800: #153E24; --erbs-primary-900: #0F2E19; --erbs-primary-light: #E8F5E9; --erbs-teal: #0D9488; --erbs-teal-light: #CCFBF1; /* Accent Color — sophisticated blue for data, statistics, and secondary actions. Complements the ERBS green primary without replacing brand identity. */ --erbs-accent-50: #EFF6FF; --erbs-accent-100: #DBEAFE; --erbs-accent-200: #BFDBFE; --erbs-accent-300: #93C5FD; --erbs-accent-400: #60A5FA; --erbs-accent: #2563EB; --erbs-accent-hover: #1D4ED8; --erbs-accent-600: #1D4ED8; --erbs-accent-700: #1E40AF; --erbs-accent-800: #1E3A8A; --erbs-accent-900: #172554; --erbs-accent-rgb: 37, 99, 235; --erbs-accent-alpha-05: rgba(var(--erbs-accent-rgb), 0.05); --erbs-accent-alpha-08: rgba(var(--erbs-accent-rgb), 0.08); --erbs-accent-alpha-10: rgba(var(--erbs-accent-rgb), 0.10); --erbs-accent-alpha-12: rgba(var(--erbs-accent-rgb), 0.12); --erbs-accent-alpha-16: rgba(var(--erbs-accent-rgb), 0.16); /* Alias legado — referências antigas usavam --erbs-color-primary. Mantido para compatibilidade; novos estilos devem usar --erbs-primary. */ --erbs-color-primary: var(--erbs-primary); /* =================================== Neutral Scale (Slate - cool gray) For surfaces, borders, text hierarchy =================================== */ --erbs-neutral-50: #F8FAFC; --erbs-neutral-100: #F1F5F9; --erbs-neutral-200: #E2E8F0; --erbs-neutral-300: #CBD5E1; --erbs-neutral-400: #94A3B8; --erbs-neutral-500: #64748B; --erbs-neutral-600: #475569; --erbs-neutral-700: #334155; --erbs-neutral-800: #1E293B; --erbs-neutral-900: #0F172A; /* =================================== Surface Colors - Layer hierarchy For visual depth without heavy shadows =================================== */ --erbs-surface-1: #FFFFFF; /* Base surface (cards, panels) */ --erbs-surface-2: #FAFAFA; /* Secondary surface (page bg) — neutral, warm */ --erbs-surface-3: #F4F4F5; /* Tertiary surface (hover, inputs bg) */ --erbs-surface-elevated: #FFFFFF; /* Elevated (modals, dropdowns) */ --erbs-surface-overlay: rgba(15, 23, 42, 0.4); /* Modal backdrop */ /* Background Colors - WCAG AA compliant (aliases to surface tokens) */ --erbs-bg: #FFFFFF; --erbs-bg-secondary: #FAFAFA; --erbs-bg-hover: #F4F4F5; --erbs-sidebar-bg: var(--erbs-neutral-50); --erbs-page-bg: #FAFAFA; /* Border & Divider — subtle, neutral (less blue than slate) */ --erbs-border: #E8E8E8; --erbs-divider: #D4D4D4; /* Border Width */ --erbs-border-width-thin: 1px; --erbs-border-width-medium: 2px; --erbs-border-width-thick: 3px; /* Skeleton/Shimmer Colors */ --erbs-skeleton-base: var(--erbs-bg-secondary); --erbs-skeleton-shine: #e8e8e8; /* =================================== Text Colors - WCAG AA compliant 4 levels for clear hierarchy =================================== */ --erbs-text-primary: #0F172A; /* Headings, important text */ --erbs-text-secondary: #475569; /* Body text, labels */ --erbs-text-muted: #64748B; /* Placeholder, hints, tertiary */ --erbs-text-subtle: #94A3B8; /* Disabled, very subtle text */ --erbs-text-disabled: #CBD5E1; /* Disabled inputs text */ --erbs-text-on-color: #FFFFFF; /* Text on colored backgrounds (primary, success, danger) */ /* =================================== Focus Ring - WCAG 2.1 compliant Standardized across all interactive elements =================================== */ --erbs-focus-ring-color: var(--erbs-primary); --erbs-focus-ring-width: 2px; --erbs-focus-ring-offset: 2px; --erbs-focus-ring-shadow: 0 0 0 3px rgba(var(--erbs-primary-rgb), 0.10); --erbs-focus-ring-shadow-danger: 0 0 0 3px rgba(var(--erbs-danger-rgb), 0.10); /* Feedback Colors - Bootstrap 5 Standard Colors */ --erbs-success: #198754; /* Bootstrap success */ --erbs-danger: #dc3545; /* Bootstrap danger */ --erbs-warning: #ffc107; /* Bootstrap warning */ --erbs-info: #0dcaf0; /* Bootstrap info */ --erbs-light: #f8f9fa; /* Bootstrap light */ --erbs-dark: #212529; /* Bootstrap dark */ /* Alpha variants */ /* RGB Values for rgba() usage */ --erbs-primary-rgb: 30, 94, 54; --erbs-success-rgb: 25, 135, 84; --erbs-danger-rgb: 220, 53, 69; --erbs-warning-rgb: 255, 193, 7; --erbs-info-rgb: 13, 202, 240; --erbs-light-rgb: 248, 249, 250; --erbs-dark-rgb: 33, 37, 41; /* Hover variants — substituem cores hardcoded em estados hover */ --erbs-success-hover: #157347; --erbs-danger-hover: #bb2d3b; --erbs-warning-hover: #c49000; --erbs-info-hover: #0890ad; /* Button variants — tons mais escuros para contraste com texto branco */ --erbs-warning-btn: #d39e00; --erbs-info-btn: #0aa0c0; /* Text variants — tons escuros para texto sobre backgrounds suaves (badges, alerts) */ --erbs-warning-text: #946800; --erbs-info-text: #0a8a9e; --erbs-primary-text: #0b3a20; /* =================================== Alpha variants - complete scale For backgrounds, borders, hover states =================================== */ --erbs-primary-alpha-05: rgba(var(--erbs-primary-rgb), 0.05); --erbs-primary-alpha-08: rgba(var(--erbs-primary-rgb), 0.08); --erbs-primary-alpha-10: rgba(var(--erbs-primary-rgb), 0.1); --erbs-primary-alpha-12: rgba(var(--erbs-primary-rgb), 0.12); --erbs-primary-alpha-16: rgba(var(--erbs-primary-rgb), 0.16); --erbs-primary-focus: rgba(var(--erbs-primary-rgb), 0.12); --erbs-success-alpha-05: rgba(var(--erbs-success-rgb), 0.05); --erbs-success-alpha-08: rgba(var(--erbs-success-rgb), 0.08); --erbs-success-alpha-10: rgba(var(--erbs-success-rgb), 0.1); --erbs-success-alpha-12: rgba(var(--erbs-success-rgb), 0.12); --erbs-success-alpha-16: rgba(var(--erbs-success-rgb), 0.16); --erbs-danger-alpha-05: rgba(var(--erbs-danger-rgb), 0.05); --erbs-danger-alpha-08: rgba(var(--erbs-danger-rgb), 0.08); --erbs-danger-alpha-10: rgba(var(--erbs-danger-rgb), 0.1); --erbs-danger-alpha-12: rgba(var(--erbs-danger-rgb), 0.12); --erbs-danger-alpha-16: rgba(var(--erbs-danger-rgb), 0.16); --erbs-warning-alpha-05: rgba(var(--erbs-warning-rgb), 0.05); --erbs-warning-alpha-08: rgba(var(--erbs-warning-rgb), 0.08); --erbs-warning-alpha-10: rgba(var(--erbs-warning-rgb), 0.1); --erbs-warning-alpha-12: rgba(var(--erbs-warning-rgb), 0.12); --erbs-warning-alpha-16: rgba(var(--erbs-warning-rgb), 0.16); --erbs-info-alpha-05: rgba(var(--erbs-info-rgb), 0.05); --erbs-info-alpha-08: rgba(var(--erbs-info-rgb), 0.08); --erbs-info-alpha-10: rgba(var(--erbs-info-rgb), 0.1); --erbs-info-alpha-12: rgba(var(--erbs-info-rgb), 0.12); --erbs-info-alpha-16: rgba(var(--erbs-info-rgb), 0.16); --erbs-accent-alpha-16: rgba(var(--erbs-accent-rgb), 0.16); /* =================================== State Tokens — loading, disabled, hover =================================== */ --erbs-loading-shimmer: linear-gradient(90deg, var(--erbs-skeleton-base) 25%, var(--erbs-skeleton-shine) 50%, var(--erbs-skeleton-base) 75%); --erbs-state-hover-bg: var(--erbs-bg-hover); --erbs-state-active-bg: var(--erbs-primary-alpha-08); --erbs-state-selected-bg: var(--erbs-primary-alpha-12); --erbs-state-disabled-bg: var(--erbs-bg-secondary); --erbs-state-disabled-text: var(--erbs-text-subtle); /* Spacing Scale - Proportional */ --erbs-spacing-0: 0; --erbs-spacing-px: 1px; --erbs-spacing-0-5: 0.125rem; /* 2px */ --erbs-spacing-1: 0.25rem; /* 4px */ --erbs-spacing-2: 0.5rem; /* 8px */ --erbs-spacing-3: 0.75rem; /* 12px */ --erbs-spacing-4: 1rem; /* 16px */ --erbs-spacing-5: 1.25rem; /* 20px */ --erbs-spacing-6: 1.5rem; /* 24px */ --erbs-spacing-8: 2rem; /* 32px */ --erbs-spacing-10: 2.5rem; /* 40px */ --erbs-spacing-12: 3rem; /* 48px */ --erbs-spacing-16: 4rem; /* 64px */ --erbs-spacing-20: 5rem; /* 80px */ --erbs-spacing-24: 6rem; /* 96px */ /* Legacy spacing (for backward compatibility) */ --erbs-spacing-xs: var(--erbs-spacing-1); --erbs-spacing-sm: var(--erbs-spacing-2); --erbs-spacing-md: var(--erbs-spacing-4); --erbs-spacing-lg: var(--erbs-spacing-6); --erbs-spacing-xl: var(--erbs-spacing-8); --erbs-spacing-xxl: var(--erbs-spacing-12); /* =================================== Border Radius - Unified Scale =================================== */ --erbs-radius-none: 0; /* 0px - Square (tables, dividers) */ --erbs-radius-xs: 2px; /* 2px - Indicators, small tags */ --erbs-radius-sm: 4px; /* 4px - Scrollbar, tooltip, small elements */ --erbs-radius-control: 6px; /* 6px - Buttons, inputs, selects (SaaS standard) */ --erbs-radius-md: 8px; /* 8px - Dropdowns, alerts, info boxes */ --erbs-radius-lg: 12px; /* 12px - Cards, modals */ --erbs-radius-xl: 16px; /* 16px - Large containers */ --erbs-radius-2xl: 20px; /* 20px - Feature panels */ --erbs-radius-3xl: 24px; /* 24px - Large feature cards */ --erbs-radius-full: 9999px; /* Full rounded - avatars, badges */ /* =================================== Shadows — refined for SaaS aesthetic Subtler, layered, with colored variants =================================== */ --erbs-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --erbs-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03); --erbs-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.02); --erbs-shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.05), 0 4px 6px rgba(15, 23, 42, 0.02); --erbs-shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.06), 0 8px 10px rgba(15, 23, 42, 0.02); --erbs-shadow-card: var(--erbs-shadow-sm); /* Subtle elevation for cards */ --erbs-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.03); --erbs-shadow-primary: 0 2px 8px rgba(var(--erbs-primary-rgb), 0.12); --erbs-shadow-accent: 0 2px 8px rgba(var(--erbs-accent-rgb), 0.12); --erbs-shadow-focus: 0 0 0 3px rgba(var(--erbs-primary-rgb), 0.10); /* =================================== Scrollbar =================================== */ --erbs-scrollbar-width: 8px; --erbs-scrollbar-width-thin: 4px; --erbs-scrollbar-track: var(--erbs-bg-secondary); --erbs-scrollbar-thumb: var(--erbs-border); --erbs-scrollbar-thumb-hover: var(--erbs-text-muted); /* =================================== Transitions - Duration tokens Standardized for consistency =================================== */ --erbs-duration-instant: 0ms; --erbs-duration-fast: 150ms; --erbs-duration-normal: 200ms; --erbs-duration-slow: 300ms; --erbs-duration-slower: 500ms; /* Transition presets */ --erbs-transition-fast: background-color var(--erbs-duration-fast) var(--erbs-ease-standard), color var(--erbs-duration-fast) var(--erbs-ease-standard), border-color var(--erbs-duration-fast) var(--erbs-ease-standard), box-shadow var(--erbs-duration-fast) var(--erbs-ease-standard); --erbs-transition-transform: transform var(--erbs-duration-normal) var(--erbs-ease-standard); --erbs-transition-layout: margin-left var(--erbs-duration-slow) var(--erbs-ease-standard), width var(--erbs-duration-slow) var(--erbs-ease-standard); --erbs-transition-colors: color var(--erbs-duration-fast) var(--erbs-ease-standard), background-color var(--erbs-duration-fast) var(--erbs-ease-standard), border-color var(--erbs-duration-fast) var(--erbs-ease-standard); --erbs-transition-opacity: opacity var(--erbs-duration-fast) var(--erbs-ease-standard); --erbs-transition-shadow: box-shadow var(--erbs-duration-fast) var(--erbs-ease-standard); /* =================================== Z-Index Strategy Aligned with shadow levels =================================== */ --erbs-z-behind: -1; /* Behind content (decorative) */ --erbs-z-base: 1; /* Base content */ --erbs-z-dropdown: 1000; /* Dropdowns, menus */ --erbs-z-sticky: 1020; /* Sticky headers */ --erbs-z-fixed: 1030; /* Fixed elements */ --erbs-z-modal-backdrop: 1040;/* Modal backdrop */ --erbs-z-modal: 1050; /* Modal content */ --erbs-z-popover: 1060; /* Popovers, datepickers */ --erbs-z-tooltip: 1070; /* Tooltips */ --erbs-z-toast: 1080; /* Toast notifications */ --erbs-z-maximum: 9999; /* Emergency override (mobile sidebar) */ /* Layout Dimensions */ --erbs-sidebar-width: 240px; --erbs-sidebar-collapsed-width: 72px; --erbs-sidebar-width-md: 220px; --erbs-sidebar-width-sm: 200px; --erbs-header-height: 4rem; /* =================================== Typography Scale - Unified With line-height per size for professional typesetting =================================== */ --erbs-text-3xs: 0.625rem; /* 10px - Badges, labels */ --erbs-text-3xs-leading: 1.4; --erbs-text-2xs: 0.6875rem; /* 11px - Table headers compact */ --erbs-text-2xs-leading: 1.4; --erbs-text-xs: 0.75rem; /* 12px - Captions, helper text */ --erbs-text-xs-leading: 1.5; --erbs-text-sm: 0.875rem; /* 14px - Body text, buttons */ --erbs-text-sm-leading: 1.5; --erbs-text-base: 1rem; /* 16px - Default body */ --erbs-text-base-leading: 1.5; --erbs-text-lg: 1.125rem; /* 18px - Lead text */ --erbs-text-lg-leading: 1.5; --erbs-text-xl: 1.25rem; /* 20px - Subheadings */ --erbs-text-xl-leading: 1.4; --erbs-text-2xl: 1.5rem; /* 24px - Section titles */ --erbs-text-2xl-leading: 1.3; --erbs-text-3xl: 1.875rem; /* 30px - Large stats */ --erbs-text-3xl-leading: 1.2; --erbs-text-4xl: 2.25rem; /* 36px - Display headings */ --erbs-text-4xl-leading: 1.2; /* =================================== Font Weights =================================== */ --erbs-font-light: 300; --erbs-font-regular: 400; --erbs-font-medium: 500; --erbs-font-semibold: 600; --erbs-font-bold: 700; /* =================================== Letter Spacing Negative for headings, positive for uppercase =================================== */ --erbs-letter-spacing-tighter: -0.05em; --erbs-letter-spacing-tight: -0.025em; --erbs-letter-spacing-normal: 0; --erbs-letter-spacing-wide: 0.025em; --erbs-letter-spacing-wider: 0.05em; /* =================================== Content Widths - Reading experience For limiting content width on large screens =================================== */ --erbs-content-width-sm: 20rem; /* 320px - Narrow content */ --erbs-content-width-md: 30rem; /* 480px - Medium content */ --erbs-content-width-lg: 48rem; /* 768px - Large content */ --erbs-content-width-xl: 62rem; /* 992px - Extra large */ --erbs-content-width-2xl: 71.25rem;/* 1140px - Maximum readable */ /* =================================== Breakpoints (reference only — use in media queries) =================================== */ --erbs-breakpoint-xs: 375px; --erbs-breakpoint-sm: 480px; --erbs-breakpoint-md: 768px; --erbs-breakpoint-lg: 1024px; --erbs-breakpoint-xl: 1200px; --erbs-breakpoint-2xl: 1366px; /* Font Family - Inter (Local) */ --erbs-font: 'Inter', sans-serif; /* Icon Sizes - Unified Scale */ --erbs-icon-xs: 12px; --erbs-icon-sm: 16px; --erbs-icon-md: 20px; --erbs-icon-lg: 24px; --erbs-icon-xl: 32px; /* Motion - Unified Easing */ --erbs-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --erbs-ease-enter: cubic-bezier(0, 0, 0.2, 1); --erbs-ease-exit: cubic-bezier(0.4, 0, 1, 1); }