/* =================================================================
   AMZ TIP - Design Tokens (CSS Variables)
   Wyciągnięte z obecnej strony i rozszerzone dla nowego projektu
   ================================================================= */

:root {
    /* ===== GRADIENTY I TŁA ===== */
    --page-gradient: linear-gradient(180deg, #eef2ff 0%, #f8faff 45%, #ffffff 100%);
    --hero-gradient: linear-gradient(140deg, rgba(99, 102, 241, 0.12), rgba(34, 211, 238, 0.08));
    --cta-gradient: linear-gradient(135deg, #22d3ee 0%, #6366f1 65%, #8b5cf6 100%);
    --surface: #ffffff;
    --surface-soft: rgba(255, 255, 255, 0.9);

    /* ===== KOLORY TEKSTU ===== */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;

    /* ===== KOLORY AKCENTU ===== */
    --accent: #6366f1;
    --accent-strong: #4f46e5;
    --accent-soft: rgba(99, 102, 241, 0.12);
    --accent-light: rgba(99, 102, 241, 0.08);

    /* ===== KOLORY STATUSU ===== */
    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.12);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.12);
    --warning: #f97316;
    --warning-light: rgba(249, 115, 22, 0.12);
    --info: #22d3ee;
    --info-light: rgba(34, 211, 238, 0.12);

    /* ===== OBRAMOWANIA ===== */
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(99, 102, 241, 0.2);
    --border-light: rgba(15, 23, 42, 0.04);

    /* ===== CIENIE ===== */
    --shadow-soft: 0 20px 50px rgba(79, 70, 229, 0.12);
    --shadow-strong: 0 28px 70px rgba(15, 23, 42, 0.15);
    --shadow-hover: 0 24px 60px rgba(99, 102, 241, 0.18);
    --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.08);

    /* ===== BORDER RADIUS ===== */
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --radius-full: 999px;

    /* ===== SPACING ===== */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;

    /* ===== TYPOGRAPHY ===== */
    --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 2.5rem;      /* 40px */
    --font-size-5xl: 3rem;        /* 48px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* ===== TRANSITIONS ===== */
    --transition: all 0.25s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.35s ease;

    /* ===== BREAKPOINTS (dla JS) ===== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ===== Z-INDEX LAYERS ===== */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-modal: 30;
    --z-tooltip: 40;
    --z-toast: 50;
}

/* ===== DARK MODE (opcjonalnie na przyszłość) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Możesz dodać dark mode variables tutaj */
    }
}