/* ========================================================================== Petrekivka2 — CSS Custom Properties (Design Tokens) Концепція: «Тепла Майстерня» ========================================================================== */ :root { /* ----------------------------------------------------------------------- COLOR PALETTE 60-30-10 Rule: 60% — Background (льон, пергамент) 30% — Surfaces (картки, навігація) 10% — Accents (петриківські кольори) ----------------------------------------------------------------------- */ /* Backgrounds (60%) */ --color-bg-primary: #FAF7F2; /* Натуральний пергамент */ --color-bg-secondary: #F5F0E8; /* Теплий льон */ --color-bg-tertiary: #EDE6D8; /* Глибший льон для контрасту */ /* Surfaces (30%) */ --color-surface-card: #FFF8F0; /* Молочно-кремовий для карток */ --color-surface-elevated: #FFFFFF; /* Білий для піднятих елементів */ --color-surface-muted: #F0EAE0; /* Приглушена поверхня */ /* Accents (10%) — Петриківська палітра */ --color-accent-red: #C84B31; /* Петриківський червоний (калина, квіти) */ --color-accent-red-hover: #A83D28; /* Темніший для hover */ --color-accent-red-light: #F4D5CD; /* Світлий червоний для фонів */ --color-accent-gold: #D4A853; /* Золотий бурштин (колоски, сонце) */ --color-accent-gold-hover: #B8923F; /* Темніший для hover */ --color-accent-gold-light: #F5ECDB; /* Світлий золотий */ --color-accent-blue: #2B4C7E; /* Глибокий синій (волошки) */ --color-accent-blue-hover: #1E3A5F; /* Темніший для hover */ --color-accent-blue-light: #D6E0ED; /* Світлий синій */ --color-accent-green: #4A7C59; /* Зелений листя */ --color-accent-green-hover: #3A6347; /* Темніший для hover */ --color-accent-green-light: #D8E8DC; /* Світлий зелений */ /* Text */ --color-text-primary: #2C2418; /* Майже чорний з теплим відтінком */ --color-text-secondary: #5C5043; /* Приглушений коричневий */ --color-text-tertiary: #8A7E72; /* Ще м'якший — для підписів */ --color-text-inverse: #FAF7F2; /* Для темних фонів */ --color-text-link: #C84B31; /* Посилання = червоний акцент */ --color-text-link-hover: #A83D28; /* Borders */ --color-border-light: #E8E0D4; /* Тонкий бордер для карток */ --color-border-medium: #D4C9BA; /* Середній бордер */ --color-border-focus: #D4A853; /* Фокус = золотий */ /* Status */ --color-success: #4A7C59; --color-error: #C84B31; --color-warning: #D4A853; /* ----------------------------------------------------------------------- TYPOGRAPHY Display: Playfair Display (серіфний, елегантний) Body: Source Sans 3 (чіткий, легкий) Scale ratio: 1.25 (Major Third) ----------------------------------------------------------------------- */ --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', sans-serif; /* Type Scale (1.25 ratio — Major Third) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 1.875rem; /* 30px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px */ /* Font Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Heights */ --leading-tight: 1.2; /* Заголовки */ --leading-snug: 1.35; /* Підзаголовки */ --leading-normal: 1.6; /* Основний текст */ --leading-relaxed: 1.75; /* Великі блоки тексту */ /* Letter Spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ----------------------------------------------------------------------- SPACING SYSTEM Base: 4px (0.25rem) ----------------------------------------------------------------------- */ --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 */ /* ----------------------------------------------------------------------- LAYOUT ----------------------------------------------------------------------- */ --container-max: 1200px; --container-narrow: 800px; --container-wide: 1400px; --grid-columns: 12; --grid-gap: var(--space-6); /* ----------------------------------------------------------------------- BORDERS & RADIUS ----------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --border-thin: 1px solid var(--color-border-light); --border-medium: 2px solid var(--color-border-medium); /* ----------------------------------------------------------------------- SHADOWS Тепла кольорова тінь, не сірий ----------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(44, 36, 24, 0.06), 0 1px 2px rgba(44, 36, 24, 0.04); --shadow-md: 0 4px 6px rgba(44, 36, 24, 0.06), 0 2px 4px rgba(44, 36, 24, 0.04); --shadow-lg: 0 10px 20px rgba(44, 36, 24, 0.08), 0 4px 8px rgba(44, 36, 24, 0.04); --shadow-xl: 0 20px 40px rgba(44, 36, 24, 0.1), 0 8px 16px rgba(44, 36, 24, 0.06); /* Shadow for hover/lift effect */ --shadow-hover: 0 14px 28px rgba(44, 36, 24, 0.1), 0 6px 12px rgba(44, 36, 24, 0.06); /* ----------------------------------------------------------------------- TRANSITIONS & ANIMATIONS ----------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ----------------------------------------------------------------------- Z-INDEX SCALE ----------------------------------------------------------------------- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-max: 9999; }