/* ============================================================ CloudEASE Design Tokens ============================================================ Single source of truth for all visual values. Components reference tokens — never hardcode values. Usage: background-color: var(--ce-color-primary); Never: background-color: #005EB8; All colors checked for WCAG 2.1 AA contrast compliance. All font sizes in rem. Base: 1rem = 16px. ============================================================ */ :root { /* --------------------------------------------------------- COLORS — Brand --------------------------------------------------------- */ --ce-color-primary: #005EB8; --ce-color-primary-hover: #004A91; --ce-color-primary-active: #003B74; --ce-color-primary-light: #E8F1FA; /* tinted backgrounds */ --ce-color-main: #1B7D3A; /* green, 4.7:1 on white */ --ce-color-main-hover: #156830; /* darker green hover */ --ce-color-main-active: #115527; /* darkest green active */ /* --------------------------------------------------------- COLORS — Semantic Contrast ratios verified against white backgrounds. Text colors verified at 4.5:1+, UI at 3:1+. --------------------------------------------------------- */ --ce-color-success: #15692C; /* 5.3:1 on white, 4.6:1 on success-light */ --ce-color-success-light: #E9F5EC; --ce-color-warning: #8A6900; /* 4.6:1 on white */ --ce-color-warning-light: #FFF8E1; --ce-color-error: #B7201D; /* 5.2:1 on white, 5.0:1 on error-light */ --ce-color-error-hover: #A71D1A; /* darker error for hover states */ --ce-color-error-light: #FDECEA; --ce-color-info: #005EB8; --ce-color-info-light: #E8F1FA; /* --------------------------------------------------------- COLORS — Text --------------------------------------------------------- */ --ce-color-text: #1A1A1A; /* primary text, 15.3:1 on white */ --ce-color-text-secondary: #4A4A4A; /* secondary text, 9.7:1 on white */ --ce-color-text-muted: #6B6B6B; /* hints/captions, 5.0:1 on white */ --ce-color-text-on-primary: #FFFFFF; /* text on brand blue, 7.0:1 */ --ce-color-text-on-dark: #FFFFFF; --ce-color-text-link: #005EB8; --ce-color-text-link-hover: #004A91; /* --------------------------------------------------------- COLORS — Surfaces & Borders --------------------------------------------------------- */ --ce-color-bg: #F2F4F7; /* page background */ --ce-color-bg-white: #FFFFFF; /* cards, panels */ --ce-color-bg-hover: #E8EAED; /* row/item hover */ --ce-color-bg-active: #DCE0E5; /* row/item active */ --ce-color-bg-header: #005EB8; /* header background, solid */ --ce-color-bg-header-super: #003D73; /* superadmin nav bar, darker blue */ --ce-color-bg-header-dark: #333333; /* superadmin top bar, matches legacy */ --ce-color-bg-caution: #FFFDE7; /* light yellow row highlight, caution status */ --ce-color-alert-danger-on-dark: #FF8080; /* alert count on dark bg, 5.2:1 contrast */ --ce-color-flag-offline: #4A90E2; /* distinct blue for offline mode indicator */ --ce-color-border: #D1D5DB; /* default borders */ --ce-color-border-light: #E5E7EB; /* subtle dividers */ --ce-color-border-focus: #005EB8; /* focus ring color */ --ce-color-border-error: #C5221F; /* Semi-transparent overlays — used in nav, modals, components */ --ce-color-overlay-dark: rgba(0, 0, 0, 0.5); --ce-color-overlay-light: rgba(0, 0, 0, 0.05); --ce-color-overlay-loading: rgba(255, 255, 255, 0.85); --ce-color-white-alpha-10: rgba(255, 255, 255, 0.1); --ce-color-white-alpha-15: rgba(255, 255, 255, 0.15); --ce-color-white-alpha-30: rgba(255, 255, 255, 0.3); --ce-color-black-alpha-08: rgba(0, 0, 0, 0.08); --ce-color-black-alpha-15: rgba(0, 0, 0, 0.15); /* --------------------------------------------------------- COLORS — Charts / Data Visualization All checked for 3:1+ contrast against white. Use patterns/labels in addition to color (WCAG 1.4.1). --------------------------------------------------------- */ --ce-color-chart-1: #005EB8; /* primary blue (total paid, transactions) */ --ce-color-chart-2: #B07AF0; /* purple (coupons) */ --ce-color-chart-3: #609dda; /* blue (credit) */ --ce-color-chart-4: #FDE68A; /* soft amber (coins) */ --ce-color-chart-5: #DC2626; /* red (occupancy) */ --ce-color-chart-6: #609d60; /* green (bills) */ --ce-color-chart-7: #E3E3E3; /* light gray (total due) */ --ce-color-chart-8: #F59E0B; /* warm orange (tax) */ --ce-color-chart-9: #FFF3C4; /* light yellow (overage) */ --ce-color-chart-bar-gray: #A0A4AB; /* mid-gray for chart bars (compare to prior) */ /* --------------------------------------------------------- TYPOGRAPHY All sizes in rem. Never use px or pt for text. Base: 1rem = 16px (browser default). --------------------------------------------------------- */ --ce-font-family: Tahoma, Geneva, sans-serif; --ce-font-family-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; --ce-font-size-xs: 0.75rem; /* 12px — badges, captions */ --ce-font-size-sm: 0.875rem; /* 14px — secondary text, table cells */ --ce-font-size-base: 1rem; /* 16px — body text */ --ce-font-size-md: 1.125rem; /* 18px — emphasized text */ --ce-font-size-lg: 1.1875rem; /* 19px — section titles */ --ce-font-size-xl: 1.25rem; /* 20px — page subtitles */ --ce-font-size-2xl: 1.375rem; /* 22px — page titles / h1 */ --ce-font-size-3xl: 1.5rem; /* 24px — dashboard numbers */ --ce-font-weight-normal: 400; --ce-font-weight-medium: 500; --ce-font-weight-semibold: 600; --ce-font-weight-bold: 700; --ce-line-height-tight: 1.25; /* headings */ --ce-line-height-small: 1.0; /* compact section labels */ --ce-line-height-normal: 1.5; /* body text — WCAG friendly */ --ce-line-height-relaxed: 1.75; /* long-form reading */ /* --------------------------------------------------------- SPACING Compact but readable scale. Designed for data-dense layouts that survive 200-400% zoom. --------------------------------------------------------- */ --ce-space-2xs: 0.125rem; /* 2px — micro adjustments */ --ce-space-xs: 0.25rem; /* 4px — tight gaps */ --ce-space-sm: 0.5rem; /* 8px — within components */ --ce-space-md: 0.75rem; /* 12px — compact padding */ --ce-space-base: 1rem; /* 16px — standard padding */ --ce-space-lg: 1.5rem; /* 24px — between sections */ --ce-space-xl: 2rem; /* 32px — major sections */ --ce-space-2xl: 3rem; /* 48px — page-level gaps */ /* --------------------------------------------------------- LAYOUT Fluid widths. No fixed pixel widths on containers. All breakpoints in em for zoom compatibility. --------------------------------------------------------- */ --ce-width-content: 75rem; /* 1200px — max content width */ --ce-width-narrow: 50rem; /* 800px — forms, detail pages */ --ce-width-modal: 30rem; /* 480px — default modal width */ --ce-width-wide: 90rem; /* 1440px — wide tables */ /* Breakpoints — use in media queries with em units. @media (min-width: 30em) { } --------------------------------------------------------- */ --ce-breakpoint-sm: 30em; /* 480px */ --ce-breakpoint-md: 48em; /* 768px */ --ce-breakpoint-lg: 64em; /* 1024px */ --ce-breakpoint-xl: 80em; /* 1280px */ /* --------------------------------------------------------- BORDERS & RADIUS --------------------------------------------------------- */ --ce-radius-sm: 0.1875rem; /* 3px — inputs, small elements */ --ce-radius-base: 0.375rem; /* 6px — cards, panels */ --ce-radius-lg: 0.5rem; /* 8px — modals */ --ce-radius-full: 9999px; /* pills, badges */ --ce-border-width: 1px; --ce-border: var(--ce-border-width) solid var(--ce-color-border); --ce-border-light: var(--ce-border-width) solid var(--ce-color-border-light); /* --------------------------------------------------------- SHADOWS Subtle depth. Not decorative — functional separation. --------------------------------------------------------- */ --ce-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --ce-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --ce-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --ce-shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15); /* --------------------------------------------------------- FOCUS Visible focus indicators for keyboard navigation. Contrast 3:1+ against adjacent colors (WCAG 2.4.7). --------------------------------------------------------- */ --ce-focus-ring-width: 3px; --ce-focus-ring-color: var(--ce-color-primary); --ce-focus-ring-offset: 2px; --ce-focus-ring: var(--ce-focus-ring-width) solid var(--ce-focus-ring-color); /* --------------------------------------------------------- TRANSITIONS Respect prefers-reduced-motion (handled in reset.css). --------------------------------------------------------- */ --ce-transition-fast: 120ms ease-in-out; --ce-transition-base: 200ms ease-in-out; --ce-transition-slow: 300ms ease-in-out; /* --------------------------------------------------------- Z-INDEX SCALE Predictable stacking. No magic numbers. --------------------------------------------------------- */ --ce-z-dropdown: 100; --ce-z-sticky: 200; --ce-z-tooltip: 300; --ce-z-modal-backdrop: 400; --ce-z-modal: 500; --ce-z-skip-link: 1000; /* --------------------------------------------------------- TABLES Data-dense defaults. Compact but readable. --------------------------------------------------------- */ --ce-table-cell-padding-x: var(--ce-space-md); --ce-table-cell-padding-y: var(--ce-space-sm); --ce-table-header-bg: var(--ce-color-bg); --ce-table-row-hover-bg: var(--ce-color-bg-hover); --ce-table-border: var(--ce-border-light); /* --------------------------------------------------------- FORMS --------------------------------------------------------- */ --ce-input-height: 2.5rem; /* 40px — comfortable touch target */ --ce-input-padding-x: var(--ce-space-md); --ce-input-padding-y: var(--ce-space-sm); --ce-input-bg: var(--ce-color-bg-white); --ce-input-border: var(--ce-border); --ce-input-border-focus: var(--ce-border-width) solid var(--ce-color-border-focus); --ce-input-radius: var(--ce-radius-sm); --ce-input-font-size: var(--ce-font-size-sm); } /* ============================================================= REDUCED MOTION Respect user preference. Disable transitions/animations. ============================================================= */ @media (prefers-reduced-motion: reduce) { :root { --ce-transition-fast: 0ms; --ce-transition-base: 0ms; --ce-transition-slow: 0ms; } }