/* ============================================================
   TOKENS.CSS - Design System
   Wszystkie zmienne CSS dla systemu formularzy
   ============================================================ */

:root {
    /* ============================================
       KOLORY - PODSTAWOWE
       ============================================ */
    --color-primary:        #8f1b1d;
    --color-primary-dark:   #6d1415;
    --color-primary-light:  #b8232a;
    --color-primary-subtle: #f7e8e8;
    
    /* ============================================
       KOLORY - NEUTRALNE
       ============================================ */
    --color-white:          #ffffff;
    --color-bg-subtle:      #fafafa;
    --color-bg-muted:       #f5f5f5;
    
    /* ============================================
       KOLORY - TEKST
       ============================================ */
    --color-text:           #212121;
    --color-text-secondary: #6b6b6b;
    --color-text-muted:     #9e9e9e;
    --color-text-inverse:   #ffffff;
    
    /* ============================================
       KOLORY - OBRAMOWANIA
       ============================================ */
    --color-border:         #e0e0e0;
    --color-border-strong:  #bdbdbd;
    --color-border-focus:   #8f1b1d;
    
    /* ============================================
       KOLORY - STATUSY
       ============================================ */
    --color-error:          #c62828;
    --color-error-bg:       #ffebee;
    --color-error-border:   #ef9a9a;
    
    --color-success:        #2e7d32;
    --color-success-bg:     #e8f5e9;
    --color-success-border: #a5d6a7;
    
    --color-warning:        #ef6c00;
    --color-warning-bg:     #fff3e0;
    --color-warning-border: #ffcc80;
    
    --color-info:           #1565c0;
    --color-info-bg:        #e3f2fd;
    --color-info-border:    #90caf9;
    
    /* ============================================
       TYPOGRAFIA
       ============================================ */
    --font-family:          system-ui, -apple-system, "Segoe UI", Roboto, 
                            "Helvetica Neue", Arial, sans-serif;
    --font-family-mono:     "Consolas", "Monaco", "Courier New", monospace;
    
    /* Rozmiary bazowe (skalowane przez data-font-size) */
    --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.375rem;  /* 22px */
    --font-size-2xl:        1.75rem;   /* 28px */
    --font-size-3xl:        2.25rem;   /* 36px */
    
    /* Grubości */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    
    /* Interlinia */
    --line-height-tight:    1.25;
    --line-height-base:     1.5;
    --line-height-loose:    1.75;
    
    /* ============================================
       ODSTĘPY (spacing)
       ============================================ */
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.5rem;   /* 24px */
    --space-6:  2rem;     /* 32px */
    --space-7:  3rem;     /* 48px */
    --space-8:  4rem;     /* 64px */
    
    /* ============================================
       ZAOKRĄGLENIA
       ============================================ */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;
    
    /* ============================================
       CIENIE
       ============================================ */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-focus: 0 0 0 3px rgba(143, 27, 29, 0.25);
    
    /* ============================================
       LAYOUT
       ============================================ */
    --container-max: 960px;
    --container-pad: var(--space-4);
    
    /* ============================================
       PRZEJŚCIA (transitions)
       ============================================ */
    --transition-fast:   150ms ease-in-out;
    --transition-base:   200ms ease-in-out;
    --transition-slow:   300ms ease-in-out;
    
    /* ============================================
       Z-INDEX
       ============================================ */
    --z-toolbar:     100;
    --z-dropdown:    200;
    --z-modal:       300;
    --z-tooltip:     400;
    --z-skip-link:   500;
}