/* ============================================================================= Design Tokens — Pirkanmaan Voimia Source: voimia.fi ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLORS — Brand --------------------------------------------------------------------------- */ /* Primary (purple) */ --color-primary: #6C2471; --color-primary-rgb: 108, 36, 113; --color-primary-dark: #561d5a; /* hover / pressed */ --color-primary-subtle: #e2d3e3; /* tinted background */ /* Secondary (pink / magenta) */ --color-secondary: #C0155E; --color-secondary-rgb: 192, 21, 94; --color-secondary-dark: #951152; /* hover / pressed */ --color-secondary-subtle: #f2d0df; /* tinted background */ /* Neutral */ --color-white: #ffffff; --color-black: #000000; --color-body-text: #212529; --color-muted: #6c757d; --color-light-bg: #F0E9F1; /* lavender tint — cards, callouts */ --color-surface: #F4F4F4; /* sidebar / panel */ --color-border: #dee2e6; /* Semantic */ --color-success: #198754; --color-warning: #ffc107; --color-danger: #dc3545; --color-info: #0dcaf0; /* Focus ring */ --color-focus-ring: rgba(108, 36, 113, 0.25); /* --------------------------------------------------------------------------- TYPOGRAPHY — Font families --------------------------------------------------------------------------- */ /* Body copy */ --font-body: "Figtree", system-ui, -apple-system, sans-serif; /* Display / hero headings */ --font-display: "Lexend Deca", system-ui, sans-serif; /* Section headings / editorial */ --font-heading: "Libre Caslon Text", Georgia, serif; /* Monospace */ --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* --------------------------------------------------------------------------- TYPOGRAPHY — Font sizes (fluid scale, static values at ≥ 1200 px) --------------------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px — h5 */ --text-xl: 1.5rem; /* 24px — h4 */ --text-2xl: 1.75rem; /* 28px — h3 */ --text-3xl: 2rem; /* 32px — h2 */ --text-4xl: 2.5rem; /* 40px — h1 */ --text-5xl: 3rem; /* 48px — display-6 */ --text-6xl: 3.5rem; /* 56px — section heading */ --text-7xl: 4rem; /* 64px — hero heading */ --text-8xl: 5rem; /* 80px — display-1 */ /* Fluid heading sizes (clamp) */ --text-h1: clamp(1.375rem, calc(1.375rem + 1.5vw), 2.5rem); --text-h2: clamp(1.325rem, calc(1.325rem + 0.9vw), 2rem); --text-h3: clamp(1.3rem, calc(1.3rem + 0.6vw), 1.75rem); --text-h4: clamp(1.275rem, calc(1.275rem + 0.3vw), 1.5rem); --text-h5: 1.25rem; --text-h6: 1rem; --text-section-heading: clamp(1.475rem, calc(1.475rem + 2.7vw), 3.5rem); --text-hero: clamp(1.525rem, calc(1.525rem + 3.3vw), 4rem); /* --------------------------------------------------------------------------- TYPOGRAPHY — Font weights --------------------------------------------------------------------------- */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* --------------------------------------------------------------------------- TYPOGRAPHY — Line heights --------------------------------------------------------------------------- */ --line-height-tight: 1.2; /* headings */ --line-height-snug: 1.3; --line-height-base: 1.5; /* body */ --line-height-relaxed: 1.6; /* long-form text */ /* --------------------------------------------------------------------------- 8 PX GRID — Spacing scale All values are strict multiples of 8 px. --------------------------------------------------------------------------- */ --space-0: 0px; --space-1: 8px; /* 0.5rem */ --space-2: 16px; /* 1rem */ --space-3: 24px; /* 1.5rem */ --space-4: 32px; /* 2rem */ --space-5: 40px; /* 2.5rem */ --space-6: 48px; /* 3rem */ --space-7: 56px; /* 3.5rem */ --space-8: 64px; /* 4rem */ --space-10: 80px; /* 5rem */ --space-12: 96px; /* 6rem */ --space-16: 128px; /* 8rem */ --space-20: 160px; /* 10rem */ --space-24: 192px; /* 12rem */ /* Semantic aliases */ --space-xs: var(--space-1); /* 8px */ --space-sm: var(--space-2); /* 16px */ --space-md: var(--space-3); /* 24px */ --space-lg: var(--space-4); /* 32px */ --space-xl: var(--space-6); /* 48px */ --space-2xl: var(--space-8); /* 64px */ --space-3xl: var(--space-12); /* 96px */ /* --------------------------------------------------------------------------- BORDER RADIUS --------------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 4px; --radius-base: 6px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 30px; /* cards, blockquotes */ --radius-3xl: 40px; /* image captions */ --radius-4xl: 50px; /* media images */ --radius-pill: 9999px; --radius-circle: 50%; /* --------------------------------------------------------------------------- SHADOWS --------------------------------------------------------------------------- */ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); /* --------------------------------------------------------------------------- BREAKPOINTS (reference only — use via Tailwind config or media queries) --------------------------------------------------------------------------- */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-2xl: 1400px; /* --------------------------------------------------------------------------- ANIMATIONS --------------------------------------------------------------------------- */ --animation-duration-fast: 150ms; --animation-duration-standard: 300ms; --animation-duration-slow: 500ms; --animation-easing-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); --animation-easing-ease-in: cubic-bezier(0.4, 0, 0.6, 1); --animation-easing-spring: cubic-bezier(0.175, 0.885, 0.44, 1); --animation-easing-linear: linear; /* --------------------------------------------------------------------------- SLIDE TRANSITIONS --------------------------------------------------------------------------- */ /* How far the entering/exiting slide travels along the x-axis */ --transition-slide-distance: 5%; /* Entering slide: slower, spring easing for a confident arrival */ --transition-slide-enter-duration: var(--animation-duration-slow); /* 500ms */ --transition-slide-enter-easing: var(--animation-easing-spring); /* Exiting slide: snappier so it gets out of the way quickly */ --transition-slide-exit-duration: var(--animation-duration-standard); /* 300ms */ --transition-slide-exit-easing: var(--animation-easing-ease-in); /* Pause between exit finishing and enter starting */ --transition-slide-pause: 400ms; /* --------------------------------------------------------------------------- Z-INDEX --------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1055; --z-tooltip: 1080; --z-toast: 1090; }