global.css•2.17 kB
:root {
/* Color System */
--color-primary: #0066cc;
--color-primary-light: #3385d6;
--color-primary-dark: #004c99;
--color-secondary: #64748b;
--color-secondary-light: #94a3b8;
--color-secondary-dark: #475569;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #dc2626;
--color-background: #f8fafc;
--color-surface: #ffffff;
--color-text: #0f172a;
--color-text-light: #64748b;
/* Typography */
--font-family: system-ui, -apple-system, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
/* Borders */
--border-radius-sm: 0.25rem;
--border-radius-base: 0.5rem;
--border-radius-lg: 0.75rem;
--border-color: #e2e8f0;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
/* Transitions */
--transition-base: 200ms ease-in-out;
}
/* Base Styles */
html {
font-family: var(--font-family);
background-color: var(--color-background);
color: var(--color-text);
}
body {
margin: 0;
min-height: 100vh;
}
/* Form Elements */
input,
textarea,
select {
border: 1px solid var(--border-color);
border-radius: var(--border-radius-base);
padding: var(--spacing-3);
font-family: var(--font-family);
font-size: var(--font-size-base);
transition: border-color var(--transition-base);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-primary);
}
button {
font-family: var(--font-family);
font-size: var(--font-size-base);
border-radius: var(--border-radius-base);
transition: all var(--transition-base);
}
/* Utility Classes */
.error-text {
color: var(--color-error);
}
.success-text {
color: var(--color-success);
}