/* Papierotka Design System - Style */

/* ---------- ZMIENNE CSS ---------- */
:root {
    /* Kolory podstawowe */
    --color-primary: #e8e3d9;        /* Główny beżowy/kremowy */
    --color-primary-dark: #d0c9b8;   /* Ciemniejszy beż */
    --color-primary-light: #f2efe8;  /* Jaśniejszy beż */
    --color-primary-pale: #f9f7f4;   /* Bardzo jasny beż/kremowy */
    --color-cream: #fbfaf8;          /* Kremowy */
    --color-deep-gray: #333333;      /* Główny kolor tekstu */
    --color-accent: #c4a066;         /* Złoty akcent (widoczny w sztućcach) */
    
    /* Kolory neutralne */
    --color-white: #ffffff;          /* Biały */
    --color-off-white: #f9f9f9;      /* Prawie biały */
    --color-light-gray: #e5e5e5;     /* Jasny szary */
    --color-medium-gray: #999999;    /* Średni szary */
    --color-dark-gray: #555555;      /* Ciemny szary (do podrzędnych tekstów) */
    --color-black: #000000;          /* Czarny, do wybranych akcentów */
    
    /* Typografia */
    --font-primary: 'Montserrat', sans-serif;
    --font-display: 'Playfair Display', serif;
    
    /* Bazowe rozmiary */
    --base-size: 16px;
    --scale-ratio: 1.25;
    
    /* Fluid typography */
    --fluid-min: 16;
    --fluid-max: 20;
    --fluid-screen-min: 320;
    --fluid-screen-max: 1200;
    
    /* Rozmiary fontów */
    --font-size-xs: clamp(0.75rem, calc(0.7rem + 0.25vw), 0.875rem);    /* 12px - 14px */
    --font-size-sm: clamp(0.875rem, calc(0.75rem + 0.5vw), 1rem);       /* 14px - 16px */
    --font-size-base: clamp(1rem, calc(0.875rem + 0.625vw), 1.125rem);  /* 16px - 18px */
    --font-size-md: clamp(1.125rem, calc(1rem + 0.625vw), 1.25rem);     /* 18px - 20px */
    --font-size-lg: clamp(1.25rem, calc(1.125rem + 0.625vw), 1.5rem);   /* 20px - 24px */
    --font-size-xl: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);           /* 24px - 32px */
    --font-size-2xl: clamp(2rem, calc(1.75rem + 1.25vw), 2.625rem);     /* 32px - 42px */
    --font-size-3xl: clamp(2.5rem, calc(2rem + 2.5vw), 3.5rem);         /* 40px - 56px */
    
    /* Grubości fontów */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Wysokości linii */
    --line-height-tight: 1.2;
    --line-height-snug: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* Odstępy */
    --spacing-xs: max(4px, 0.25rem);
    --spacing-s: max(8px, 0.5rem);
    --spacing-m: max(16px, 1rem);
    --spacing-l: max(24px, 1.5rem);
    --spacing-xl: max(32px, 2rem);
    --spacing-xxl: max(48px, 3rem);
    --spacing-xxxl: max(64px, 4rem);
    
    /* Szerokości kontenerów */
    --container-large: min(1200px, 90vw);
    --container-medium: min(960px, 85vw);
    --container-small: min(720px, 80vw);
    
    /* Cienie */
    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* Zaokrąglenia */
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    
    /* Przejścia */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}