/* ===== STYLE UŻYWAJĄCE ZMIENNYCH Z STYLES.CSS ===== */

/* Globalne ustawienie Cinzel Decorative z small-caps */
* {
    font-family: var(--font-primary);
    font-variant: var(--font-variant);
    text-transform: none;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    background-color: var(--bg-light);
    color: var(--text-light);
    font-variant: var(--font-variant);
}

/* Elementy formularzy również z small-caps */
input, select, textarea, button {
    font-family: var(--font-primary);
    font-variant: var(--font-variant);
}

/* Nagłówki z small-caps i lepszą widocznością */
h1, h2, h3, h4, h5, h6, .title, .header-text, .important-text {
    font-family: var(--font-primary);
    font-variant: var(--font-variant);
    font-weight: bold;
    text-shadow: var(--text-shadow-medium);
    color: var(--text-light);
    margin: 1em 0 0.5em 0;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }

/* Dodatkowe style dla lepszej widoczności */
.info-text, .description, .instructions, .note {
    font-variant: var(--font-variant);
    color: var(--text-light);
    background: var(--bg-transparent-light);
    padding: var(--padding-sm);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary-color);
    margin: var(--margin-sm) 0;
    box-shadow: var(--shadow-sm);
}

.label, label {
    font-variant: var(--font-variant);
    font-weight: bold;
    color: var(--text-light);
    text-shadow: var(--text-shadow-light);
}

.rpg-button {
    background: var(--texture-button-normal);
    background-size: cover;
    color: var(--text-light);
    border: 2px solid var(--primary-color);
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-primary);
    font-variant: var(--font-variant);
    font-weight: bold;
    text-shadow: var(--text-shadow-light);
    transition: var(--transition-fast);
}

.rpg-button:hover {
    background: var(--texture-button-active);
    background-size: cover;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.rpg-button:active {
    transform: translateY(0);
}