/* ========================================
   CSS VARIABLES (Design Tokens)
   Zgodne z briefem: Modern Coastal Boho / Japandi
   ======================================== */

:root {
  /* ===== COLORS (Gdynia Modernism) ===== */
  /* Tło - Modernist White & Concrete */
  --canvas: #FAFAFA;
  --canvas-light: #FFFFFF;
  --canvas-concrete: #F0F2F5; 
  
  /* Akcent Główny - Baltic Navy */
  --marketing-navy: #0F172A; 
  --marine-blue: #1E3A8A; 
  
  /* Akcent - Brass/Gold */
  --brass: #CAA472;
  --brass-dark: #A68456;

  /* Aliases */
  --sage-green: var(--marine-blue);
  --sage-green-dark: var(--marketing-navy);
  --sage-green-light: #3B82F6;
  --terracotta: var(--brass);
  --terracotta-light: #E5C394;
  --sand: #F3F4F6;
  --sand-dark: #E5E7EB;
  
  /* Whites & Blacks */
  --white: #FFFFFF;
  --black: #000000;
  
  /* Tekst */
  --charcoal: #111827; 
  --charcoal-light: #4B5563; 
  
  /* Overlays */
  --overlay-dark: rgba(15, 23, 42, 0.4);
  --overlay-darker: rgba(15, 23, 42, 0.7);
  
  /* ===== TYPOGRAPHY (Gdynia Modernism x Boho) ===== */
  --font-heading: 'Syne', sans-serif; /* Modern, Art Deco vibes */
  --font-body: 'Manrope', sans-serif; /* Clean Geometric */
  
  /* Shapes */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-flow: 100px; /* Streamline Moderne curves */
  --fs-hero: clamp(2.5rem, 8vw, 5rem);
  --fs-h1: clamp(2.25rem, 6vw, 4rem);
  --fs-h2: clamp(2rem, 5vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 3vw, 2rem);
  --fs-body: clamp(1rem, 2vw, 1.125rem);
  --fs-small: clamp(0.875rem, 1.5vw, 1rem);
  
  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  
  /* Line Heights */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;
  
  /* ===== SHAPES (MODERNISM) ===== */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 30px; /* Soft architectural curve */
  --radius-xl: 40px;
  --radius-flow: 120px; /* Streamline curve */
  --radius-circle: 50%;
  
  /* ===== SPACING ===== */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 2rem;      /* 32px */
  --space-lg: 4rem;      /* 64px */
  --space-xl: 6rem;      /* 96px */
  --space-2xl: 8rem;     /* 128px */
  
  /* ===== LAYOUT ===== */
  --container-max: 1400px;
  --container-padding: var(--space-md);
  
  /* ===== BORDERS ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  /* ===== SHADOWS ===== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.20);
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== Z-INDEX ===== */
  --z-navbar: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
  
  /* ===== BREAKPOINTS (for JS) ===== */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1440px;

  /* ===== ADDITIONS (From index3.html) ===== */
  /* PALETA: MGŁA NAD ZATOKĄ (WERSJA JASNA) */
  --deep-abyss: #f8f9fa;    /* Tło: Bardzo jasny chłodny szary */
  --wet-concrete: #3b424d;  /* Akcenty: Ciemniejszy beton */
  --storm-foam: #0f1114;    /* Tekst: Prawie czarny */
  --rusty-beacon: #d64000;
  
  --font-hull: 'Oswald', sans-serif; 
  --font-liquid: 'Manrope', sans-serif;
  --font-serif: 'Playfair Display', serif;
}

/* Dark mode (opcjonalnie na przyszłość) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Możesz dodać dark mode później */
  }
}