/* Plik generowany przez tools/build-tokens.js z tailwind/tokens.js.
   Nie edytuj recznie - zmiany wprowadza sie w tokens.js, potem `npm run build:css`. */

:root {
    /* Kanaly RGB sa zrodlem prawdy - kolor i przezroczystosc licza sie z nich.
       Rozdzielone spacja, bo tylko taki zapis dziala z ukosnikiem: rgb(var(--x) / .5). */
    --color-primary-50-rgb: 237 253 245;
    --color-primary-100-rgb: 209 250 230;
    --color-primary-200-rgb: 150 243 198;
    --color-primary-300-rgb: 96 236 168;
    --color-primary-400-rgb: 41 229 138;
    --color-primary-500-rgb: 22 185 105;
    --color-primary-600-rgb: 17 146 84;
    --color-primary-700-rgb: 13 109 63;
    --color-primary-800-rgb: 9 73 42;
    --color-primary-900-rgb: 4 36 21;
    --color-primary-950-rgb: 2 18 10;
    --color-primary-rgb: 22 185 105;
    --color-secondary-50-rgb: 243 245 247;
    --color-secondary-100-rgb: 227 233 237;
    --color-secondary-200-rgb: 200 212 220;
    --color-secondary-300-rgb: 173 189 202;
    --color-secondary-400-rgb: 146 168 185;
    --color-secondary-500-rgb: 121 148 169;
    --color-secondary-600-rgb: 97 126 148;
    --color-secondary-700-rgb: 79 102 120;
    --color-secondary-800-rgb: 60 77 92;
    --color-secondary-900-rgb: 41 54 63;
    --color-secondary-950-rgb: 21 27 31;
    --color-secondary-soft-rgb: 68 89 106;
    --color-secondary-rgb: 38 54 64;
    --color-red-50-rgb: 252 236 235;
    --color-red-100-rgb: 249 220 220;
    --color-red-200-rgb: 244 182 181;
    --color-red-300-rgb: 240 149 146;
    --color-red-400-rgb: 237 116 112;
    --color-red-500-rgb: 235 84 77;
    --color-red-600-rgb: 234 52 37;
    --color-red-700-rgb: 178 36 24;
    --color-red-800-rgb: 117 20 12;
    --color-red-900-rgb: 60 6 3;
    --color-red-950-rgb: 27 1 1;
    --color-red-rgb: 255 68 68;
    --color-grey-rgb: 218 226 230;
    --color-light-grey-rgb: 247 249 250;
    --color-white-rgb: 255 255 255;
    --color-black-rgb: 0 0 0;
    --color-success-rgb: 67 144 90;
    --color-success-soft-rgb: 232 250 240;
    --color-navy-rgb: 20 26 62;
    --color-amber-rgb: 226 128 13;
    --color-highlight-rgb: 255 255 153;

    /* Gotowe kolory. Do przezroczystosci siegaj po kanaly powyzej. */
    --color-primary-50: rgb(var(--color-primary-50-rgb));
    --color-primary-100: rgb(var(--color-primary-100-rgb));
    --color-primary-200: rgb(var(--color-primary-200-rgb));
    --color-primary-300: rgb(var(--color-primary-300-rgb));
    --color-primary-400: rgb(var(--color-primary-400-rgb));
    --color-primary-500: rgb(var(--color-primary-500-rgb));
    --color-primary-600: rgb(var(--color-primary-600-rgb));
    --color-primary-700: rgb(var(--color-primary-700-rgb));
    --color-primary-800: rgb(var(--color-primary-800-rgb));
    --color-primary-900: rgb(var(--color-primary-900-rgb));
    --color-primary-950: rgb(var(--color-primary-950-rgb));
    --color-primary: rgb(var(--color-primary-rgb));
    --color-secondary-50: rgb(var(--color-secondary-50-rgb));
    --color-secondary-100: rgb(var(--color-secondary-100-rgb));
    --color-secondary-200: rgb(var(--color-secondary-200-rgb));
    --color-secondary-300: rgb(var(--color-secondary-300-rgb));
    --color-secondary-400: rgb(var(--color-secondary-400-rgb));
    --color-secondary-500: rgb(var(--color-secondary-500-rgb));
    --color-secondary-600: rgb(var(--color-secondary-600-rgb));
    --color-secondary-700: rgb(var(--color-secondary-700-rgb));
    --color-secondary-800: rgb(var(--color-secondary-800-rgb));
    --color-secondary-900: rgb(var(--color-secondary-900-rgb));
    --color-secondary-950: rgb(var(--color-secondary-950-rgb));
    --color-secondary-soft: rgb(var(--color-secondary-soft-rgb));
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-red-50: rgb(var(--color-red-50-rgb));
    --color-red-100: rgb(var(--color-red-100-rgb));
    --color-red-200: rgb(var(--color-red-200-rgb));
    --color-red-300: rgb(var(--color-red-300-rgb));
    --color-red-400: rgb(var(--color-red-400-rgb));
    --color-red-500: rgb(var(--color-red-500-rgb));
    --color-red-600: rgb(var(--color-red-600-rgb));
    --color-red-700: rgb(var(--color-red-700-rgb));
    --color-red-800: rgb(var(--color-red-800-rgb));
    --color-red-900: rgb(var(--color-red-900-rgb));
    --color-red-950: rgb(var(--color-red-950-rgb));
    --color-red: rgb(var(--color-red-rgb));
    --color-grey: rgb(var(--color-grey-rgb));
    --color-light-grey: rgb(var(--color-light-grey-rgb));
    --color-white: rgb(var(--color-white-rgb));
    --color-black: rgb(var(--color-black-rgb));
    --color-success: rgb(var(--color-success-rgb));
    --color-success-soft: rgb(var(--color-success-soft-rgb));
    --color-navy: rgb(var(--color-navy-rgb));
    --color-amber: rgb(var(--color-amber-rgb));
    --color-highlight: rgb(var(--color-highlight-rgb));

    /* Role: nazwa mowi, do czego kolor sluzy, nie jak wyglada. */
    --color-base-text: var(--color-secondary);
    --color-text-muted: var(--color-secondary-600);
    --color-base-background: var(--color-light-grey);
    --color-background-content: var(--color-white);

    /* Skala typografii - te same nazwy i rozmiary, co klasy Tailwinda. */
    /* Same rozmiary - do miejsc, gdzie waga i interlinia sa ustawiane osobno. */
    --text-xs-size: 0.75rem;
    --text-sm-size: 0.875rem;
    --text-base-size: 1rem;
    --text-lg-size: 1.125rem;
    --text-xl-size: 1.25rem;
    --text-2xl-size: 1.5rem;
    --text-3xl-size: 1.875rem;
    --text-4xl-size: 2.25rem;
    --text-5xl-size: 3rem;

    /* Skrot font: waga, rozmiar, interlinia i kroj naraz. */
    --text-xs: 400 var(--text-xs-size)/1.5 Mukta, sans-serif;
    --text-sm: 400 var(--text-sm-size)/1.5 Mukta, sans-serif;
    --text-base: 400 var(--text-base-size)/1.6875 Mukta, sans-serif;
    --text-lg: 400 var(--text-lg-size)/1.6 Mukta, sans-serif;
    --text-xl: 400 var(--text-xl-size)/1.65 Mukta, sans-serif;
    --text-2xl: 400 var(--text-2xl-size)/1.552 Mukta, sans-serif;
    --text-3xl: 400 var(--text-3xl-size)/1.5 Mukta, sans-serif;
    --text-4xl: 400 var(--text-4xl-size)/1.45 Mukta, sans-serif;
    --text-5xl: 600 var(--text-5xl-size)/1.15 Mukta, sans-serif;

    /* Odstepy zastane, od najwiekszego. */
    --space-0: 5.5rem;
    --space-1: 5rem;
    --space-2: 2.5rem;
    --space-3: 2rem;
    --space-4: 1.5rem;
    --space-5: 1rem;
    --space-6: 0.5rem;
    --space-base: var(--space-4);

    /* Wysokosci kontrolek: przyciski, pola formularza, selecty. */
    --control-xs: 28px;
    --control-sm: 32px;
    --control-md: 40px;
    --control-lg: 48px;
    --control-xl: 56px;

    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    --shadow-card: 4px 4px 32px rgb(var(--color-secondary-rgb) / .1);
    --shadow-control: 0 1px 4px rgb(var(--color-secondary-rgb) / .08);

    --border-width-2: 2px;
    --border-width-4: 4px;
    --border-width: 1px;
    --border-color: var(--color-grey);

    --container-width: 1288px;
    --container-max-width: calc(100vw - 2*var(--space-3))
}

/* Paleta edytora blokow. Nazwy klas ustala Gutenberg. */
.has-inprogress-green-color {
    color: var(--color-primary)
}

.has-inprogress-green-background-color {
    background-color: var(--color-primary)
}

.has-inprogress-blue-color {
    color: var(--color-secondary)
}

.has-inprogress-blue-background-color {
    background-color: var(--color-secondary)
}

.has-inprogress-light-grey-color {
    color: var(--color-grey)
}

.has-inprogress-light-grey-background-color {
    background-color: var(--color-grey)
}

.has-inprogress-very-light-grey-color {
    color: var(--color-light-grey)
}

.has-inprogress-very-light-grey-background-color {
    background-color: var(--color-light-grey)
}

.has-inprogress-white-color {
    color: var(--color-white)
}

.has-inprogress-white-background-color {
    background-color: var(--color-white)
}

.has-inprogress-black-color {
    color: var(--color-black)
}

.has-inprogress-black-background-color {
    background-color: var(--color-black)
}