91 lines
2.3 KiB
SCSS
91 lines
2.3 KiB
SCSS
/* Path: Frontend/src/styles/themes/_tokens.scss */
|
|
|
|
:root {
|
|
--gray-0: hsl(210 20% 99%);
|
|
--gray-50: hsl(220 20% 97%);
|
|
--gray-100: hsl(220 16% 93%);
|
|
--gray-200: hsl(220 13% 87%);
|
|
--gray-300: hsl(220 11% 75%);
|
|
--gray-400: hsl(220 9% 58%);
|
|
--gray-500: hsl(220 10% 45%);
|
|
--gray-600: hsl(220 14% 34%);
|
|
--gray-700: hsl(220 18% 24%);
|
|
--gray-800: hsl(220 22% 16%);
|
|
--gray-900: hsl(220 28% 10%);
|
|
|
|
--blue-400: hsl(218 88% 61%);
|
|
--blue-500: hsl(221 83% 53%);
|
|
--blue-600: hsl(224 76% 48%);
|
|
|
|
--green-500: hsl(154 60% 40%);
|
|
--red-500: hsl(0 72% 54%);
|
|
--amber-500: hsl(36 100% 50%);
|
|
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.625rem;
|
|
--radius-lg: 0.875rem;
|
|
--radius-xl: 1.25rem;
|
|
--radius-pill: 999px;
|
|
|
|
--control-size-md: 2.25rem;
|
|
--control-size-lg: 2.5rem;
|
|
--content-width-wide: 72rem;
|
|
--blur-overlay: 18px;
|
|
|
|
--shadow-soft: 0 12px 32px hsl(220 30% 10% / 0.08);
|
|
--shadow-strong: 0 20px 48px hsl(220 30% 10% / 0.16);
|
|
|
|
--z-base: 1;
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-overlay: 400;
|
|
--z-modal: 500;
|
|
--z-toast: 600;
|
|
|
|
--motion-duration-fast: 140ms;
|
|
--motion-duration-base: 220ms;
|
|
--motion-duration-slow: 320ms;
|
|
--motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
|
|
// Typography
|
|
// ============================
|
|
|
|
--font-size-caption: 0.75rem;
|
|
--font-size-label: 0.875rem;
|
|
--font-size-body: 1rem;
|
|
--font-size-title: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
|
|
--font-size-heading: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
|
|
--font-size-display: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);
|
|
|
|
--line-height-caption: 1.4;
|
|
--line-height-label: 1.35;
|
|
--line-height-body: 1.55;
|
|
--line-height-title: 1.3;
|
|
--line-height-heading: 1.15;
|
|
--line-height-display: 1.05;
|
|
|
|
--font-weight-caption: 500;
|
|
--font-weight-label: 600;
|
|
--font-weight-body: 400;
|
|
--font-weight-title: 600;
|
|
--font-weight-heading: 600;
|
|
--font-weight-display: 700;
|
|
|
|
--letter-spacing-caption: 0.01em;
|
|
--letter-spacing-label: 0.005em;
|
|
--letter-spacing-body: 0;
|
|
--letter-spacing-title: -0.01em;
|
|
--letter-spacing-heading: -0.02em;
|
|
--letter-spacing-display: -0.03em;
|
|
}
|