:root { --primary-color: #f0b90b; --primary-dark: #d4a017; --primary-light: #f5c842; --primary-darker: #b8941f; --primary-text: #000000; --secondary-color: #707a8a; --secondary-dark: #5a6470; --secondary-light: #8a95a6; --accent-color: #02c076; --accent-dark: #02a85c; --accent-light: #1dd4a3; --bg-primary: #0b0e11; --bg-secondary: #161a1e; --bg-tertiary: #1e2329; --bg-card: #1e2329; --bg-overlay: rgba(11, 14, 17, 0.8); --text-primary: #f0f0f0; --text-secondary: #b7bdc6; --text-muted: #848e9c; --text-inverse: #0b0e11; --white: #ffffff; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --black: #000000; --success-color: #10b981; --warning-color: #f59e0b; --error-color: #ef4444; --info-color: #3b82f6; --font-family-primary: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-family-heading: 'Poppins', 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-size-h1: 3.5rem; --font-size-h2: 2.5rem; --font-size-h3: 1.875rem; --font-size-p: 1rem; --font-size-small: 0.875rem; --font-size-xs: 0.75rem; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; --spacing-xxl: 5rem; --spacing-4xl: 6rem; --border-radius-sm: 0.25rem; --border-radius-md: 0.5rem; --border-radius-lg: 0.75rem; --border-radius-xl: 1rem; --border-radius-full: 9999px; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --transition-fast: 0.15s ease-in-out; --transition-normal: 0.3s ease-in-out; --transition-slow: 0.5s ease-in-out; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-family-primary); font-size: var(--font-size-p); line-height: var(--line-height-normal); color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-normal), color var(--transition-normal); } h1 { font-family: var(--font-family-heading); font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--text-primary); margin-bottom: var(--spacing-lg); } h2 { font-family: var(--font-family-heading); font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--text-primary); margin-bottom: var(--spacing-md); } h3 { font-family: var(--font-family-heading); font-size: var(--font-size-h3); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); color: var(--text-secondary); margin-bottom: var(--spacing-sm); } p { font-size: var(--font-size-p); line-height: var(--line-height-relaxed); color: var(--text-secondary); margin-bottom: var(--spacing-md); } .text-primary { color: var(--primary-color); } .text-secondary { color: var(--secondary-color); } .text-accent { color: var(--accent-color); } .text-white { color: var(--white); } .text-gray-600 { color: var(--gray-600); } .text-gray-700 { color: var(--gray-700); } .text-gray-800 { color: var(--gray-800); } .text-gray-900 { color: var(--gray-900); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-size-p); font-weight: var(--font-weight-medium); text-decoration: none; border: none; border-radius: var(--border-radius-md); cursor: pointer; transition: all var(--transition-normal); text-align: center; white-space: nowrap; user-select: none; box-shadow: var(--shadow-sm); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .btn-primary { background-color: var(--primary-color); color: var(--primary-text); font-weight: var(--font-weight-semibold); letter-spacing: 0.5px; min-height: 44px; box-shadow: 0 2px 8px rgba(240, 185, 11, 0.3); border: 1px solid var(--primary-color); } .btn-primary:hover { background-color: var(--primary-dark); color: var(--primary-text); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(240, 185, 11, 0.4); border-color: var(--primary-dark); } .btn-secondary { background-color: var(--secondary-color); color: var(--white); } .btn-secondary:hover { background-color: var(--secondary-dark); color: var(--white); } .btn-outline { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); font-weight: var(--font-weight-semibold); letter-spacing: 0.5px; min-height: 44px; } .btn-outline:hover { background-color: var(--primary-color); color: var(--primary-text); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(240, 185, 11, 0.4); } .btn-lg { padding: var(--spacing-md) var(--spacing-xl); font-size: 1.125rem; font-weight: var(--font-weight-bold); min-height: 52px; } .btn-sm { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-small); } a { color: var(--primary-color); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--primary-dark); text-decoration: underline; } .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-xs); } .mb-2 { margin-bottom: var(--spacing-sm); } .mb-3 { margin-bottom: var(--spacing-md); } .mb-4 { margin-bottom: var(--spacing-lg); } .mb-5 { margin-bottom: var(--spacing-xl); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--spacing-xs); } .mt-2 { margin-top: var(--spacing-sm); } .mt-3 { margin-top: var(--spacing-md); } .mt-4 { margin-top: var(--spacing-lg); } .mt-5 { margin-top: var(--spacing-xl); } .p-0 { padding: 0; } .p-1 { padding: var(--spacing-xs); } .p-2 { padding: var(--spacing-sm); } .p-3 { padding: var(--spacing-md); } .p-4 { padding: var(--spacing-lg); } .p-5 { padding: var(--spacing-xl); } @media (max-width: 768px) { :root { --font-size-h1: 2.5rem; --font-size-h2: 2rem; --font-size-h3: 1.5rem; } .container { padding: 0 var(--spacing-sm); } .btn { width: 100%; margin-bottom: var(--spacing-sm); } } @media (max-width: 480px) { :root { --font-size-h1: 2rem; --font-size-h2: 1.75rem; --font-size-h3: 1.25rem; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .animate-fade-in { animation: fadeIn 0.6s ease-out; } .animate-slide-in-left { animation: slideInLeft 0.6s ease-out; } .animate-slide-in-right { animation: slideInRight 0.6s ease-out; } .btn:focus, a:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } @media print { .btn { background-color: transparent !important; color: var(--gray-900) !important; border: 1px solid var(--gray-900) !important; } } .skip-link { position: absolute; top: -9999px; left: 0; background: var(--primary-color); color: var(--primary-text); padding: var(--spacing-sm) var(--spacing-md); z-index: 9999; text-decoration: none; font-weight: var(--font-weight-bold); transition: top 0.3s ease; } .skip-link:focus { top: 0; }