/* VARIABLES.CSS - NOWA PALETA KOLORÓW */

/* Import Metropolitan Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

:root {
  /* ========================================
     NOWA PALETA KOLORÓW
     ======================================== */
  
  /* Główne kolory */
  --color-primary: #201966;      /* Ciemny granatowy - główny kolor */
  --color-secondary: #FEFEFE;    /* Bardzo jasny szary/biały */
  --color-accent: #FF631E;       /* Pomarańczowy akcent */
  --color-neutral: #EAE9E7;      /* Ciepły beż/jasny szary */
  
  /* Dodatkowe odcienie */
  --color-primary-light: #2d2580;    /* Jaśniejszy granatowy */
  --color-primary-dark: #1a1450;     /* Ciemniejszy granatowy */
  --color-accent-light: #ff7d3d;     /* Jaśniejszy pomarańczowy */
  --color-accent-dark: #e5571a;      /* Ciemniejszy pomarańczowy */
  
  /* Kolory tekstu */
  --text-primary: #201966;
  --text-secondary: #FEFEFE;
  --text-muted: #666;
  --text-light: #999;
  
  /* Tła */
  --bg-primary: #FEFEFE;        /* Główne tło - jasne */
  --bg-secondary: #201966;      /* Ciemne tło - granatowe */
  --bg-accent: #FF631E;         /* Tło akcentowe - pomarańczowe */
  --bg-neutral: #EAE9E7;        /* Neutralne tło - beż */
  
  /* Tła z przezroczystością */
  --bg-overlay: rgba(32, 25, 102, 0.3);
  --bg-nav-light: rgba(254, 254, 254, 0.95);
  --bg-nav-dark: rgba(32, 25, 102, 0.95);
  
  /* Obramowania */
  --border-light: rgba(32, 25, 102, 0.1);
  --border-medium: rgba(32, 25, 102, 0.2);
  --border-accent: #FF631E;
  
  /* ========================================
     FONTY
     ======================================== */
  
  /* Główny font family */
  --font-primary: 'Metropolitan', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  
  /* Font weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;
  
  /* ========================================
     ROZMIARY FONTÓW
     ======================================== */
  
  /* Logo i brand */
  --font-logo: 1.8rem;
  --font-logo-mobile: 1.3rem;
  
  /* Nagłówki */
  --font-h1: 5rem;
  --font-h1-mobile: 2.5rem;
  --font-h2: 4rem;
  --font-h2-mobile: 2rem;
  --font-h3: 2rem;
  --font-h3-mobile: 1.5rem;
  
  /* Menu */
  --font-menu: 2rem;
  --font-menu-mobile: 1.5rem;
  
  /* Tekst */
  --font-body: 1.2rem;
  --font-body-mobile: 1rem;
  --font-small: 0.9rem;
  --font-tiny: 0.85rem;
  
  /* Przewijający się tekst */
  --font-scrolling: 8rem;
  --font-scrolling-mobile: 3rem;
  
  /* ========================================
     SPACING I LAYOUT
     ======================================== */
  
  /* Padding i margin */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  --spacing-xl: 120px;
  
  /* Container padding */
  --container-padding: 80px;
  --container-padding-mobile: 20px;
  
  /* Navigation */
  --nav-height: 80px;
  --nav-height-mobile: 60px;
  
  /* ========================================
     ANIMACJE
     ======================================== */
  
  /* Transition timing */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow: 1s ease;
  
  /* Animation delays */
  --delay-1: 0.1s;
  --delay-2: 0.2s;
  --delay-3: 0.3s;
  --delay-4: 0.4s;
  --delay-5: 0.5s;
  
  /* ========================================
     ZMIENNE DLA SPECIFIC COMPONENTS
     ======================================== */
  
  /* Logo animation */
  --logo-letter-spacing: 0.1em;
  --logo-word-spacing: 0.3em;
  
  /* Menu */
  --menu-gap: 25px;
  --menu-padding: 50px 40px 30px 40px;
  --menu-border-radius: 25px;
  
  /* Skills bars */
  --skill-bar-height: 6px;
  --skill-bar-radius: 3px;
  
  /* Stats cards */
  --stat-card-padding: 40px 20px;
  --stat-card-gap: 40px;
  
  /* ========================================
     GRADIENTY I EFEKTY
     ======================================== */
  
  /* Gradienty */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  --gradient-neutral: linear-gradient(135deg, var(--bg-neutral) 0%, var(--bg-primary) 100%);
  
  /* Cienie */
  --shadow-light: 0 5px 25px rgba(32, 25, 102, 0.05);
  --shadow-medium: 0 10px 40px rgba(32, 25, 102, 0.1);
  --shadow-heavy: 0 25px 80px rgba(32, 25, 102, 0.15);
  
  /* Blur effects */
  --blur-light: blur(10px);
  --blur-medium: blur(20px);
}

/* ========================================
   RESPONSIVE VARIABLES
   ======================================== */

@media (max-width: 768px) {
  :root {
    --font-h1: var(--font-h1-mobile);
    --font-h2: var(--font-h2-mobile);
    --font-h3: var(--font-h3-mobile);
    --font-body: var(--font-body-mobile);
    --font-logo: var(--font-logo-mobile);
    --font-menu: var(--font-menu-mobile);
    --font-scrolling: var(--font-scrolling-mobile);
    --container-padding: var(--container-padding-mobile);
    --nav-height: var(--nav-height-mobile);
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Font weights */
.font-light { font-weight: var(--font-light) !important; }
.font-regular { font-weight: var(--font-regular) !important; }
.font-medium { font-weight: var(--font-medium) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-bold { font-weight: var(--font-bold) !important; }
.font-black { font-weight: var(--font-black) !important; }

/* Colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-neutral { color: var(--color-neutral) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Backgrounds */
.bg-primary { background: var(--bg-primary) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-accent { background: var(--bg-accent) !important; }
.bg-neutral { background: var(--bg-neutral) !important; }

/* Gradienty jako klasy */
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-accent { background: var(--gradient-accent) !important; }
.bg-gradient-neutral { background: var(--gradient-neutral) !important; }

/* Font family override */
.font-primary { font-family: var(--font-primary) !important; }

/* ========================================
   THEME VARIATIONS
   ======================================== */

/* Ciemny motyw - dodaj klasę .dark-theme do body */
.dark-theme {
  --text-primary: var(--color-secondary);
  --text-secondary: var(--color-primary);
  --bg-primary: var(--color-primary);
  --bg-secondary: var(--color-secondary);
}

/* Motyw z akcentem - dodaj klasę .accent-theme do body */
.accent-theme {
  --text-primary: var(--color-accent);
  --bg-primary: var(--bg-neutral);
  --border-light: rgba(255, 99, 30, 0.1);
}

/* Większe fonty - dodaj klasę .large-text do body */
.large-text {
  --font-body: 1.4rem;
  --font-h1: 6rem;
  --font-h2: 5rem;
  --font-logo: 2rem;
}