/* * ============================================================================ * St. Cloud State University - Design System Foundation * ============================================================================ * * CSS Custom Properties (Variables) for SCSU Design System * * PURPOSE: * This file defines the core design tokens (colors, typography, spacing) that * form the foundation of the SCSU design system. All other CSS files reference * these variables to ensure consistency across applications. * * MIGRATION PATH: * When moving to scsu-main-styles.css: * 1. These variables should be defined at :root level in the main stylesheet * 2. All component files will automatically inherit these values * 3. No changes needed to component files - they already use CSS variables * * USAGE: * Reference these variables in other stylesheets using var(--variable-name) * Example: color: var(--scsu-color-primary); * * ============================================================================ */ :root { /* ======================================== BRAND COLORS Official SCSU colors for consistent branding ======================================== */ --scsu-color-primary: #b31b34; /* SCSU Red - Primary brand color */ --scsu-color-primary-dark: #9a1729; /* Darker red for hover states */ --scsu-color-primary-light: #d8465a; /* Lighter red for backgrounds */ --scsu-color-secondary: #2b2b2b; /* SCSU Dark Gray */ --scsu-color-secondary-dark: #000000; /* Black for emphasis */ --scsu-color-secondary-light: #404040; /* Medium gray for hover */ --scsu-color-white: #ffffff; --scsu-color-black: #000000; /* ======================================== SEMANTIC COLORS Colors with specific meaning/purpose ======================================== */ --scsu-color-success: #198754; /* Green for success states */ --scsu-color-info: #0dcaf0; /* Cyan for informational */ --scsu-color-warning: #ffc107; /* Yellow for warnings */ --scsu-color-danger: #dc3545; /* Red for errors/danger */ /* ======================================== GRAYSCALE PALETTE Neutral colors for text, borders, backgrounds ======================================== */ --scsu-gray-100: #f8f9fa; --scsu-gray-200: #e9ecef; --scsu-gray-300: #dee2e6; --scsu-gray-400: #ced4da; --scsu-gray-500: #adb5bd; --scsu-gray-600: #6c757d; --scsu-gray-700: #495057; --scsu-gray-800: #343a40; --scsu-gray-900: #212529; /* ======================================== TEXT COLORS Optimized for readability and contrast ======================================== */ --scsu-text-primary: #212529; /* Main body text */ --scsu-text-secondary: #6c757d; /* Secondary/muted text */ --scsu-text-muted: #adb5bd; /* De-emphasized text */ --scsu-text-inverse: #ffffff; /* Text on dark backgrounds */ /* ======================================== BACKGROUND COLORS ======================================== */ --scsu-bg-body: #ffffff; --scsu-bg-light: #f8f9fa; --scsu-bg-dark: #2b2b2b; --scsu-bg-overlay: rgba(0, 0, 0, 0.5); /* ======================================== BORDER COLORS ======================================== */ --scsu-border-color: #dee2e6; --scsu-border-color-light: #e9ecef; --scsu-border-color-dark: #404040; /* ======================================== TYPOGRAPHY Font families, sizes, weights, and line heights ======================================== */ /* Font Families */ /* Note: sans-serif font is inherited from scsu-main-styles.css — do not override here */ --scsu-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Font Sizes */ --scsu-font-size-base: 1rem; /* 16px */ --scsu-font-size-sm: 0.875rem; /* 14px */ --scsu-font-size-lg: 1.125rem; /* 18px */ --scsu-font-size-xl: 1.25rem; /* 20px */ /* Headings */ --scsu-font-size-h1: 2.5rem; /* 40px */ --scsu-font-size-h2: 2rem; /* 32px */ --scsu-font-size-h3: 1.75rem; /* 28px */ --scsu-font-size-h4: 1.5rem; /* 24px */ --scsu-font-size-h5: 1.25rem; /* 20px */ --scsu-font-size-h6: 1rem; /* 16px */ /* Font Weights */ --scsu-font-weight-light: 300; --scsu-font-weight-normal: 400; --scsu-font-weight-medium: 500; --scsu-font-weight-semibold: 600; --scsu-font-weight-bold: 700; /* Line Heights */ --scsu-line-height-base: 1.5; --scsu-line-height-sm: 1.25; --scsu-line-height-lg: 1.75; --scsu-line-height-heading: 1.2; /* ======================================== SPACING SCALE Consistent spacing using 8px base unit ======================================== */ --scsu-spacing-0: 0; --scsu-spacing-1: 0.25rem; /* 4px */ --scsu-spacing-2: 0.5rem; /* 8px */ --scsu-spacing-3: 0.75rem; /* 12px */ --scsu-spacing-4: 1rem; /* 16px */ --scsu-spacing-5: 1.5rem; /* 24px */ --scsu-spacing-6: 2rem; /* 32px */ --scsu-spacing-7: 2.5rem; /* 40px */ --scsu-spacing-8: 3rem; /* 48px */ --scsu-spacing-9: 4rem; /* 64px */ --scsu-spacing-10: 5rem; /* 80px */ /* ======================================== BORDER RADIUS Consistent corner rounding ======================================== */ --scsu-border-radius-none: 0; --scsu-border-radius-sm: 0.125rem; /* 2px */ --scsu-border-radius: 0.25rem; /* 4px - default */ --scsu-border-radius-md: 0.375rem; /* 6px */ --scsu-border-radius-lg: 0.5rem; /* 8px */ --scsu-border-radius-xl: 1rem; /* 16px */ --scsu-border-radius-pill: 50rem; /* Fully rounded */ --scsu-border-radius-circle: 50%; /* Perfect circle */ /* ======================================== SHADOWS Depth and elevation system ======================================== */ --scsu-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --scsu-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --scsu-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --scsu-shadow-xl: 0 1.5rem 4rem rgba(0, 0, 0, 0.2); --scsu-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --scsu-shadow-focus: 0 0 0 0.25rem rgba(179, 27, 52, 0.5); /* ======================================== TRANSITIONS Smooth animations and timing ======================================== */ --scsu-transition-fast: 0.15s ease-in-out; --scsu-transition-base: 0.3s ease-in-out; --scsu-transition-slow: 0.5s ease-in-out; /* ======================================== Z-INDEX SCALE Layering system for overlays, modals, tooltips ======================================== */ --scsu-z-dropdown: 1000; --scsu-z-sticky: 1020; --scsu-z-fixed: 1030; --scsu-z-modal-backdrop: 1040; --scsu-z-modal: 1050; --scsu-z-popover: 1060; --scsu-z-tooltip: 1070; /* ======================================== BREAKPOINTS Responsive design breakpoints ======================================== */ --scsu-breakpoint-xs: 0; --scsu-breakpoint-sm: 576px; --scsu-breakpoint-md: 768px; --scsu-breakpoint-lg: 992px; --scsu-breakpoint-xl: 1200px; --scsu-breakpoint-xxl: 1400px; /* ======================================== COMPONENT-SPECIFIC VARIABLES ======================================== */ /* Forms */ --scsu-input-height: 2.5rem; /* 40px */ --scsu-input-padding-x: 0.75rem; --scsu-input-padding-y: 0.5rem; --scsu-input-border-width: 1px; --scsu-input-border-color: var(--scsu-border-color); --scsu-input-border-radius: var(--scsu-border-radius); --scsu-input-focus-border-color: var(--scsu-color-primary); /* Buttons */ --scsu-btn-padding-x: 1.5rem; --scsu-btn-padding-y: 0.5rem; --scsu-btn-font-weight: var(--scsu-font-weight-semibold); --scsu-btn-border-width: 2px; /* Tables */ --scsu-table-cell-padding-x: 0.75rem; --scsu-table-cell-padding-y: 0.5rem; --scsu-table-border-color: var(--scsu-border-color); /* Cards */ --scsu-card-padding: 1.5rem; --scsu-card-border-radius: var(--scsu-border-radius); --scsu-card-border-color: var(--scsu-border-color); --scsu-card-bg: var(--scsu-bg-body); } /* ============================================================================ ACCESSIBILITY REQUIREMENTS These values ensure WCAG 2.1 AA compliance: - Text contrast ratio: Minimum 4.5:1 (normal text), 3:1 (large text) - Interactive element size: Minimum 44x44 pixels - Focus indicators: Visible and high contrast ============================================================================ */ /* End of SCSU Design System Foundation */