/* ==========================================================================
   WEB VARIABLES
   CSS Custom Properties & Design Tokens
   ========================================================================== */

:root {
    /* Force light mode for CSS variables */
    color-scheme: light !important;
    -webkit-color-scheme: light !important;
    
    /* ==========================================================================
       COLOR PALETTE
       Paleta inspirowana polską jesienią i ciepłem domowego studia
       ========================================================================== */
    
    --warmth-primary: #C94A2A;      /* Cegła z polskich kamienic */
    --warmth-secondary: #E8B48F;    /* Ciepły beż jak stare pergaminy */
    --warmth-accent: #2A5C4E;       /* Głęboka zieleń jak polskie lasy */
    --warmth-gold: #D4925A;         /* Złoto jak jesienne liście */
    --warmth-cream: #FBF7F2;        /* Krem jak wnętrze starej księgarni */
    --warmth-charcoal: #2C2625;     /* Węgiel drzewny */
    --warmth-plum: #6B4C7A;         /* Śliwkowy jak wieczorne niebo */
    
    /* ==========================================================================
       SHADOWS
       Organiczne cienie z nieregularnymi kształtami
       ========================================================================== */
    
    --shadow-soft: 3px 7px 19px rgba(201, 74, 42, 0.09), -2px 3px 12px rgba(42, 92, 78, 0.04);
    --shadow-medium: 5px 12px 25px rgba(201, 74, 42, 0.12), -3px 5px 15px rgba(44, 38, 37, 0.07);
    --shadow-strong: 8px 18px 35px rgba(201, 74, 42, 0.15), -5px 8px 22px rgba(44, 38, 37, 0.08);
    
    /* ==========================================================================
       TIMING FUNCTIONS
       Organiczne krzywe animacji dla naturalnego ruchu
       ========================================================================== */
    
    --ease-organic: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ==========================================================================
       TYPOGRAPHY
       Font families and sizes
       ========================================================================== */
    
    --font-primary: 'Space Grotesk', -apple-system, system-ui, sans-serif;
    --font-serif: 'Crimson Text', serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* ==========================================================================
       SPACING
       Consistent spacing scale
       ========================================================================== */
    
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-xxl: 4rem;     /* 64px */
    
    /* ==========================================================================
       BORDER RADIUS
       Organic border radius values
       ========================================================================== */
    
    --radius-organic-sm: 12px 8px 12px 8px;
    --radius-organic-md: 15px 12px 18px 10px;
    --radius-organic-lg: 20px 15px 25px 10px;
    --radius-organic-xl: 25px 20px 30px 15px;
    
    /* ==========================================================================
       BREAKPOINTS
       Responsive design breakpoints
       ========================================================================== */
    
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1240px;
    
    /* ==========================================================================
       BACKGROUND VARIANTS
       Color variants for cards and components
       ========================================================================== */
    
    /* Primary color variants */
    --bg-primary-light: rgba(201, 74, 42, 0.05);
    --bg-primary-medium: rgba(201, 74, 42, 0.08);
    --bg-primary-strong: rgba(201, 74, 42, 0.1);
    --border-primary-light: rgba(201, 74, 42, 0.1);
    
    /* Accent color variants */
    --bg-accent-light: rgba(42, 92, 78, 0.05);
    --bg-accent-medium: rgba(42, 92, 78, 0.08);
    --bg-accent-strong: rgba(42, 92, 78, 0.1);
    --border-accent-light: rgba(42, 92, 78, 0.1);
    
    /* Gold color variants */
    --bg-gold-light: rgba(212, 146, 90, 0.05);
    --bg-gold-medium: rgba(212, 146, 90, 0.08);
    --bg-gold-strong: rgba(212, 146, 90, 0.1);
    --border-gold-light: rgba(212, 146, 90, 0.1);
    
    /* Plum color variants */
    --bg-plum-light: rgba(107, 76, 122, 0.05);
    --bg-plum-medium: rgba(107, 76, 122, 0.08);
    --bg-plum-strong: rgba(107, 76, 122, 0.1);
    --border-plum-light: rgba(107, 76, 122, 0.1);
    
    /* Cream background variants */
    --bg-cream-gradient: linear-gradient(135deg, rgba(251, 247, 242, 1) 0%, rgba(201, 74, 42, 0.02) 100%);
    --bg-mixed-gradient: linear-gradient(135deg, rgba(201, 74, 42, 0.05) 0%, rgba(42, 92, 78, 0.03) 100%);
}