/* ============================================================================ DESIGN SYSTEM - School Management Website Modern, Premium, Conversion-Focused Design Tokens ============================================================================ */ /* Fonts are loaded from layout to avoid @import waterfalls. */ :root { /* ===== COLORS ===== */ /* Primary Brand */ --color-primary-50: #f0fdf4; --color-primary-100: #dcfce7; --color-primary-200: #bbf7d0; --color-primary-300: #86efac; --color-primary-400: #4ade80; --color-primary-500: #57b846; /* Main brand color */ --color-primary-600: #16a34a; --color-primary-700: #15803d; --color-primary-800: #166534; --color-primary-900: #14532d; /* Secondary (Purple gradient accent) */ --color-secondary-400: #c084fc; --color-secondary-500: #a855f7; --color-secondary-600: #9333ea; /* Neutral Scale */ --color-neutral-50: #fafafa; --color-neutral-100: #f5f5f5; --color-neutral-200: #e5e5e5; --color-neutral-300: #d4d4d4; --color-neutral-400: #a3a3a3; --color-neutral-500: #737373; --color-neutral-600: #525252; --color-neutral-700: #404040; --color-neutral-800: #262626; --color-neutral-900: #171717; /* Semantic Colors */ --color-success: #10b981; --color-success-light: #d1fae5; --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-error: #ef4444; --color-error-light: #fee2e2; --color-info: #3b82f6; --color-info-light: #dbeafe; /* Surfaces */ --color-surface: #ffffff; --color-surface-secondary: #f9fafb; --color-surface-tertiary: #f3f4f6; /* Text */ --color-text-primary: #111827; --color-text-secondary: #4b5563; --color-text-tertiary: #9ca3af; --color-text-inverse: #ffffff; /* Borders */ --color-border-light: #e5e7eb; --color-border-medium: #d1d5db; --color-border-dark: #9ca3af; /* Gradient */ --gradient-primary: linear-gradient(135deg, #c850c0 0%, #9053c7 50%, #4158d0 100%); --gradient-primary-hover: linear-gradient(135deg, #d060d0 0%, #a063d7 50%, #5168e0 100%); --gradient-subtle: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%); /* ===== TYPOGRAPHY ===== */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Font Sizes */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* Line Heights */ --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* Letter Spacing */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* ===== SPACING ===== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ===== BORDERS ===== */ --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 4px; /* Border Radius */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ===== SHADOWS ===== */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); /* ===== TRANSITIONS ===== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* ===== Z-INDEX ===== */ --z-index-dropdown: 1000; --z-index-sticky: 1020; --z-index-fixed: 1030; --z-index-modal-backdrop: 1040; --z-index-modal: 1050; --z-index-popover: 1060; --z-index-tooltip: 1070; /* ===== BREAKPOINTS (for reference in media queries) ===== */ --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-2xl: 1400px; /* Container Max Widths */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-2xl: 1320px; } /* ===== GLOBAL RESETS & BASE STYLES ===== */ * { box-sizing: border-box; } html { font-size: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text-primary); margin: 0; padding: 0; } /* Reduced motion support for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Focus visible for keyboard navigation */ *:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } /* Remove default focus outline but keep focus-visible */ *:focus:not(:focus-visible) { outline: none; }