@layer base {
    :root {

        --color-white: #ffffff;

        /* Color Primary */
        --color-primary-50: #fffbfc;
        --color-primary-100: #feeef3;
        --color-primary-200: #fcd9e4;
        --color-primary-300: #f9bcce;
        --color-primary-400: #f697b3;
        --color-primary-500: #f26992;
        --color-primary-600: #ed326a;
        --color-primary-700: #ca1248;
        --color-primary-800: #740a2a;
        --color-primary-900: #400617;
        --color-primary-950: #2f0411;

        /* Color Secondary */
        --color-gray-50: #fbfbfc;
        --color-gray-100: #eff0f3;
        --color-gray-200: #dadee4;
        --color-gray-300: #bec4cf;
        --color-gray-400: #99a3b4;
        --color-gray-500: #6c7a92;
        --color-gray-600: #454e5d;
        --color-gray-700: #282c32;
        --color-gray-800: #171a1f;
        --color-gray-900: #111216;
        --color-gray-950: #0b0c0e;

        /* Color Accent - dark */
        --color-dark-red-accent: #ff5d69;
        --color-dark-orange-accent: #fd8e60;
        --color-dark-yellow-accent: #e6e374;
        --color-dark-green-accent: #27fba5;
        --color-dark-cyan-accent: #4efffc;
        --color-dark-purple-accent: #855DFF;

        /* Color Accent - light */
        --color-light-red-accent: #ff5d69;
        --color-light-orange-accent: #fd8e60;
        --color-light-yellow-accent: #bab621;
        --color-light-green-accent: #03b970;
        --color-light-cyan-accent: #00ccc9;
        --color-light-purple-accent: #855DFF;

        /* Light theme semantic colors */
        --color-danger-bg: #fff1f3;
        --color-danger-border: #ff5d69;
        --color-danger-text: #9f1239;
        --color-danger-icon: #ff5d69;

        --color-success-bg: #ecfdf5;
        --color-success-border: #27fba5;
        --color-success-text: #047857;
        --color-success-icon: #10b981;

        --color-warning-bg: #fefce8;
        --color-warning-border: #e6e374;
        --color-warning-text: #854d0e;
        --color-warning-icon: #ca8a04;

        --color-info-bg: #ecfeff;
        --color-info-border: #4efffc;
        --color-info-text: #0e7490;
        --color-info-icon: #06b6d4;

        --notification-info-bg: #fbfbfc;
        --notification-info-border: #dadee4;
        --notification-info-text: #454e5d;
        --notification-info-icon: #454e5d;

        --notification-danger-bg: #fff1f3;
        --notification-danger-border: #ff5d69;
        --notification-danger-text: #9f1239;
        --notification-danger-icon: #ff5d69;

        --notification-success-bg: #ecfdf5;
        --notification-success-border: #27fba5;
        --notification-success-text: #047857;
        --notification-success-icon: #10b981;

        --notification-warning-bg: #fefce8;
        --notification-warning-border: #e6e374;
        --notification-warning-text: #854d0e;
        --notification-warning-icon: #ca8a04;

        --cc-font-family: var(--shps-font-body);
        --cc-modal-border-radius: 1rem;
        --cc-btn-border-radius: 2rem;
        --cc-bg: var(--color-gray-50);
        --cc-primary-color: var(--color-gray-900);
        --cc-secondary-color: var(--color-gray-600);
        --cc-btn-primary-bg: var(--btn-primary-bg);
        --cc-btn-primary-color: var(--btn-primary-label);
        --cc-btn-primary-border-color: var(--btn-primary-bg);
        --cc-btn-primary-hover-bg: var(--btn-primary-bg-hover);
        --cc-btn-primary-hover-color: var(--btn-primary-label-hover);
        --cc-btn-primary-hover-border-color: var(--btn-primary-bg-hover);
        --cc-btn-secondary-bg: var(--btn-secondary-bg);
        --cc-btn-secondary-color: var(--btn-secondary-label);
        --cc-btn-secondary-border-color: var(--btn-secondary-bg);
        --cc-btn-secondary-hover-bg: var(--btn-secondary-bg-hover);
        --cc-btn-secondary-hover-color: var(--btn-secondary-label-hover);
        --cc-btn-secondary-hover-border-color: var(--btn-secondary-bg-hover);
        --cc-separator-border-color: var(--color-gray-200);
        --cc-cookie-category-block-bg: var(--color-gray-100);
        --cc-cookie-category-block-border: var(--color-gray-200);
        --cc-cookie-category-block-hover-bg: var(--color-gray-200);
        --cc-cookie-category-block-hover-border: var(--color-gray-300);
        --cc-toggle-on-bg: var(--btn-primary-bg);
        --cc-footer-bg: var(--color-gray-100);
        --cc-footer-color: var(--color-gray-600);
        --cc-footer-border-color: var(--color-gray-200);

        /* Tracks Colors (samples table) */
        --color-pink-track: 247 68 105;     /* #F74469 */
        --color-green-track: 50 233 19;     /* #32E913 */
        --color-cyan-track: 102 185 204;    /* #66B9CC */
        --color-purple-track: 183 17 178;   /* #B711B2 */
        --color-orange-track: 238 106 75;   /* #EE6A4B */
        --color-teal-track: 121 248 212;    /* #79F8D4 */

        /* MOBILE - Rozmiary bazowe fontów */
        --text-3xl: 3.25rem;    /* 52px */
        --leading-3xl: 1.1;
        --letter-spacing-3xl: -0.04em;
        --text-2xl: 2.5rem;     /* 40px */
        --leading-2xl: 1.1;
        --letter-spacing-2xl: -0.03em;
        --text-xl: 1.75rem;     /* 28px */
        --leading-xl: 1.2;
        --letter-spacing-xl: -0.02em;
        --text-lg: 1.25rem;     /* 20px */
        --leading-lg: 1.2;
        --letter-spacing-lg: -0.01em;
        --text-md: 1.1875rem;   /* 19px */
        --leading-md: 1.4;
        --letter-spacing-md: 0;
        --text-base: 1.125rem;  /* 18px */
        --leading-base: 1.6;
        --letter-spacing-base: 0;
        --text-sm: 1rem;        /* 16px */
        --leading-sm: 1.6;
        --letter-spacing-sm: 0;
        --text-xs: 0.875rem;    /* 14px */
        --leading-xs: 1.5;
        --letter-spacing-xs: 0;
        --text-2xs: 0.75rem;    /* 12px */
        --leading-2xs: 1.4;
        --letter-spacing-2xs: 0;



        /* Fonty nagłówków i body tekstu */
        --shps-font-heading: "Inter", sans-serif;
        --shps-font-body: "Inter", sans-serif;



        /* EXPLORE */

        /* Dark */
        --red-accent: var(--color-dark-red-accent);
        --orange-accent: var(--color-dark-orange-accent);
        --yellow-accent: var(--color-dark-yellow-accent);
        --green-accent: var(--color-dark-green-accent);
        --cyan-accent: var(--color-dark-cyan-accent);
        --purple-accent: var(--color-dark-purple-accent);

        --btn-primary-bg: var(--color-primary-700);
        --btn-primary-bg-hover: var(--color-gray-50);
        --btn-primary-label: var(--color-gray-50);
        --btn-primary-label-hover: var(--color-gray-900);

        --btn-secondary-bg: var(--color-gray-700);
        --btn-secondary-bg-hover: var(--color-gray-50);
        --btn-secondary-label: var(--color-gray-50);
        --btn-secondary-label-hover: var(--color-gray-900);

        --btn-tertiary-bg: var(--color-gray-900);
        --btn-tertiary-bg-hover: var(--color-gray-700);
        --btn-tertiary-label: var(--color-gray-50);
        --btn-tertiary-label-hover: var(--color-gray-50);

        --logo-color: var(--color-gray-50);
        --nav-bg: var(--color-gray-950);
        --nav-border: var(--color-gray-800);
        --nav-main-menu-bg: var(--color-gray-900);
        --nav-main-menu-link: var(--color-gray-50);
        --site-bg: var(--color-gray-900);
        --site-body-font: var(--color-gray-50);

        --nav-mobile-icon: var(--color-gray-50);

        --discover-btn-bg: var(--color-gray-700);
        --discover-btn-bg-hover: var(--color-gray-600);
        --discover-btn-border: var(--color-gray-500);
        --discover-btn-icon: var(--color-gray-50);
        --discover-btn-label: var(--color-gray-50);

        --discover-range-bar: var(--color-gray-600);
        --discover-range-bar-thumb: var(--color-gray-50);
        --discover-range-bar-tooltip: var(--color-gray-50);

        --switcher-active-mode: var(--color-gray-600);
        --switcher-bg: var(--color-gray-700);
        --switcher-unactive-mode: var(--color-gray-700);

        --discover-tag-border: var(--color-gray-600);
        --discover-tag-border-active: var(--color-gray-400);
        --discover-tag-icon-bg-hover: var(--color-gray-600);
        --discover-tag-icon-gray: var(--color-gray-600);
        --discover-tag-icon-hover: var(--color-gray-50);
        --discover-tag-number: var(--color-gray-400);

        --footer-app-btn-bg: var(--color-gray-700);
        --footer-app-btn-icon: var(--color-gray-50);
        --footer-app-btn-label: var(--color-gray-50);
        --footer-copy: var(--color-gray-50);
        --footer-header: var(--color-gray-50);
        --footer-link: var(--color-gray-400);
        --footer-link-hover: var(--color-gray-200);
        --footer-logo: var(--color-gray-50);

        --grad-title: #171a1f;
        --grad-title-hover: #0b0c0e;
        --grad-title-0: #171a1f00;
        --grad-title-0-hover: #0b0c0e00;
        --grad-bar-title: #0b0c0e;
        --grad-bar-title-0: #0b0c0e00;
        --overlay: #111216cc;

        --menu-active-mode: var(--color-gray-950);
        --menu-bg: var(--color-gray-900);
        --menu-borders: var(--color-gray-700);
        --menu-hover: var(--color-gray-700);
        --menu-icon: var(--color-gray-50);
        --menu-label: var(--color-gray-50);
        --menu-oval-bg: var(--color-gray-700);
        --menu-oval-bg-hover: var(--color-gray-600);
        --menu-oval-icon: var(--color-gray-50);
        --menu-selected-overlay-icon-bg: var(--color-gray-700);
        --menu-square-bg: var(--color-gray-800);
        --menu-unactive-mode: var(--color-gray-800);

        --player-bar-bg: var(--color-gray-950);
        --player-bar-border: var(--color-gray-800);
        --player-btn-bg: var(--color-gray-700);
        --player-btn-icon: var(--color-gray-50);
        --player-bar-play-btn-bg: var(--color-primary-700);
        --player-bar-play-btn-icon: var(--color-gray-50);
        --player-bar-setting-btn-icon: var(--color-gray-600);
        --player-bar-setting-btn-icon-hover: var(--color-gray-50);
        --player-bar-setting-btn-bg-hover: var(--color-gray-600);
        --player-bar-volume-bar: var(--color-gray-600);

        --popup-bg: var(--color-gray-950);
        --popup-icon: var(--color-gray-50);
        --popup-lead: var(--color-gray-400);
        --popup-text: var(--color-gray-50);

        --search-ai-text: var(--color-gray-50);
        --search-beta-bg: var(--color-gray-700);
        --search-beta-label: var(--color-gray-400);
        --search-icon-color: var(--color-gray-50);
        --search-input-bg: var(--color-gray-950);
        --search-input-border: var(--color-gray-700);
        --search-input-border-active: var(--color-gray-500);
        --search-ai-input-border-active: var(--color-gray-600);
        --search-switcher-bg: var(--color-gray-600);
        --search-switcher-bg-active: var(--color-primary-700);
        --search-switcher-oval: var(--color-gray-50);
        --search-text-filled: var(--color-gray-50);
        --search-text-placeholder: var(--color-gray-600);

        --section-arrow-bg: var(--color-gray-700);
        --section-arrow-bg-hover: var(--color-gray-50);
        --section-arrow-icon: var(--color-gray-50);
        --section-arrow-icon-hover: var(--color-gray-900);
        --section-bg: var(--color-gray-800);
        --section-header: var(--color-gray-50);
        --section-lead: var(--color-gray-400);

        --table-row-bg: var(--color-gray-800);
        --table-row-bg-hover: var(--color-gray-950);
        --table-row-divider: var(--color-gray-900);
        --table-row-sample-time: var(--color-gray-600);
        --table-sample-checkbox-bg: var(--color-gray-900);
        --table-sample-checkbox-border: var(--color-gray-700);
        --table-sample-checkbox-border-checked: var(--color-primary-700);
        --table-sample-checkbox-tick: var(--color-gray-50);
        --table-sample-setting-bg-hover: var(--color-gray-600);
        --table-sample-setting-icon: var(--color-gray-600);
        --table-sample-setting-icon-hover: var(--color-gray-50);
        --table-sample-tag-bg: var(--color-gray-900);
        --table-sample-tag-bg-hover: var(--color-gray-900);
        --table-sample-tag-label: var(--color-gray-500);
        --table-sample-tag-label-hover: var(--color-gray-50);
        --table-sample-title: var(--color-gray-50);
        --table-sample-type-icon: var(--color-gray-50);
        --table-sample-waves: var(--color-gray-700);

        --tile-bg: var(--color-gray-700);
        --tile-bg-hover: var(--color-primary-50);
        --tile-icon-color: var(--color-gray-50);
        --tile-icon-color-hover: var(--color-gray-900);
        --tile-tag-border: var(--color-gray-600);
        --tile-tag-border-inverted: var(--color-gray-400);
        --tile-tag-border-hover: var(--color-gray-400);
        --tile-tag-border-inverted-hover: var(--color-gray-600);
        --tile-tag-label: var(--color-gray-50);
        --tile-tag-label-inverted: var(--color-gray-900);
        --tile-tag-label-hover: var(--color-gray-900);
        --tile-title: var(--color-gray-50);
        --tile-title-hover: var(--color-gray-900);
        --tile-lead: var(--color-gray-400);
        --tile-lead-hover: var(--color-gray-400);

    }

    .dark {
        /* Dark theme semantic colors */
        --color-danger-bg: rgba(255, 93, 105, 0.12);
        --color-danger-border: rgba(255, 93, 105, 0.45);
        --color-danger-text: #ff8a94;
        --color-danger-icon: #ff5d69;

        --color-success-bg: rgba(39, 251, 165, 0.10);
        --color-success-border: rgba(39, 251, 165, 0.45);
        --color-success-text: #7dffd0;
        --color-success-icon: #27fba5;

        --color-warning-bg: rgba(230, 227, 116, 0.12);
        --color-warning-border: rgba(230, 227, 116, 0.45);
        --color-warning-text: #f4f08a;
        --color-warning-icon: #e6e374;

        --color-info-bg: rgba(78, 255, 252, 0.10);
        --color-info-border: rgba(78, 255, 252, 0.45);
        --color-info-text: #8fffff;
        --color-info-icon: #4efffc;

        --notification-info-bg: #fbfbfc;
        --notification-info-border: #dadee4;
        --notification-info-text: #454e5d;
        --notification-info-icon: #454e5d;

        --notification-danger-bg: #24141a;
        --notification-danger-border: #ff5d69;
        --notification-danger-text: #ff8a94;
        --notification-danger-icon: #ff5d69;

        --notification-success-bg: #10251d;
        --notification-success-border: #27fba5;
        --notification-success-text: #7dffd0;
        --notification-success-icon: #27fba5;

        --notification-warning-bg: #262412;
        --notification-warning-border: #e6e374;
        --notification-warning-text: #f4f08a;
        --notification-warning-icon: #e6e374;

        --cc-font-family: var(--shps-font-body);
        --cc-modal-border-radius: 1rem;
        --cc-btn-border-radius: 2rem;
        --cc-bg: var(--color-gray-950);
        --cc-primary-color: var(--color-gray-50);
        --cc-secondary-color: var(--color-gray-400);
        --cc-btn-primary-bg: var(--btn-primary-bg);
        --cc-btn-primary-color: var(--btn-primary-label);
        --cc-btn-primary-border-color: var(--btn-primary-bg);
        --cc-btn-primary-hover-bg: var(--btn-primary-bg-hover);
        --cc-btn-primary-hover-color: var(--btn-primary-label-hover);
        --cc-btn-primary-hover-border-color: var(--btn-primary-bg-hover);
        --cc-btn-secondary-bg: var(--btn-secondary-bg);
        --cc-btn-secondary-color: var(--btn-secondary-label);
        --cc-btn-secondary-border-color: var(--btn-secondary-bg);
        --cc-btn-secondary-hover-bg: var(--btn-secondary-bg-hover);
        --cc-btn-secondary-hover-color: var(--btn-secondary-label-hover);
        --cc-btn-secondary-hover-border-color: var(--btn-secondary-bg-hover);
        --cc-separator-border-color: var(--color-gray-800);
        --cc-cookie-category-block-bg: var(--color-gray-800);
        --cc-cookie-category-block-border: var(--color-gray-700);
        --cc-cookie-category-block-hover-bg: var(--color-gray-700);
        --cc-cookie-category-block-hover-border: var(--color-gray-600);
        --cc-toggle-on-bg: var(--btn-primary-bg);
        --cc-footer-bg: var(--color-gray-900);
        --cc-footer-color: var(--color-gray-400);
        --cc-footer-border-color: var(--color-gray-800);
    }

    /* Nadpisanie dla Light Mode (na podstawie klasy lub atrybutu) */
    [data-theme='light'] {
        --color-danger-bg: #fff1f3;
        --color-danger-border: #ff5d69;
        --color-danger-text: #9f1239;
        --color-danger-icon: #ff5d69;

        --color-success-bg: #ecfdf5;
        --color-success-border: #27fba5;
        --color-success-text: #047857;
        --color-success-icon: #10b981;

        --color-warning-bg: #fefce8;
        --color-warning-border: #e6e374;
        --color-warning-text: #854d0e;
        --color-warning-icon: #ca8a04;

        --color-info-bg: #ecfeff;
        --color-info-border: #4efffc;
        --color-info-text: #0e7490;
        --color-info-icon: #06b6d4;

        --notification-info-bg: #fbfbfc;
        --notification-info-border: #dadee4;
        --notification-info-text: #454e5d;
        --notification-info-icon: #454e5d;

        --notification-danger-bg: #fff1f3;
        --notification-danger-border: #ff5d69;
        --notification-danger-text: #9f1239;
        --notification-danger-icon: #ff5d69;

        --notification-success-bg: #ecfdf5;
        --notification-success-border: #27fba5;
        --notification-success-text: #047857;
        --notification-success-icon: #10b981;

        --notification-warning-bg: #fefce8;
        --notification-warning-border: #e6e374;
        --notification-warning-text: #854d0e;
        --notification-warning-icon: #ca8a04;

        --cc-bg: var(--color-gray-50);
        --cc-primary-color: var(--color-gray-900);
        --cc-secondary-color: var(--color-gray-600);
        --cc-separator-border-color: var(--color-gray-200);
        --cc-cookie-category-block-bg: var(--color-gray-100);
        --cc-cookie-category-block-border: var(--color-gray-200);
        --cc-cookie-category-block-hover-bg: var(--color-gray-200);
        --cc-cookie-category-block-hover-border: var(--color-gray-300);
        --cc-footer-bg: var(--color-gray-100);
        --cc-footer-color: var(--color-gray-600);
        --cc-footer-border-color: var(--color-gray-200);

        --red-accent: var(--color-light-red-accent);
        --orange-accent: var(--color-light-orange-accent);
        --yellow-accent: var(--color-light-yellow-accent);
        --green-accent: var(--color-light-green-accent);
        --cyan-accent: var(--color-light-cyan-accent);
        --purple-accent: var(--color-light-purple-accent);

        --btn-primary-bg: var(--color-primary-700);
        --btn-primary-bg-hover: var(--color-gray-200);
        --btn-primary-label: var(--color-gray-50);
        --btn-primary-label-hover: var(--color-gray-900);

        --btn-secondary-bg: var(--color-gray-50);
        --btn-secondary-bg-hover: var(--color-gray-700);
        --btn-secondary-label: var(--color-gray-900);
        --btn-secondary-label-hover: var(--color-gray-50);

        --btn-tertiary-bg: var(--color-gray-200);
        --btn-tertiary-bg-hover: var(--color-gray-100);
        --btn-tertiary-label: var(--color-gray-900);
        --btn-tertiary-label-hover: var(--color-gray-900);

        --logo-color: var(--color-gray-900);
        --nav-bg: var(--color-gray-50);
        --nav-border: var(--color-gray-200);
        --nav-main-menu-bg: var(--color-gray-50);
        --nav-main-menu-link: var(--color-gray-900);
        --site-bg: var(--color-gray-200);
        --site-body-font: var(--color-gray-900);

        --nav-mobile-icon: var(--color-gray-900);

        --discover-btn-bg: var(--color-gray-50);
        --discover-btn-bg-hover: var(--color-gray-200);
        --discover-btn-border: var(--color-gray-500);
        --discover-btn-icon: var(--color-gray-900);
        --discover-btn-label: var(--color-gray-900);

        --discover-range-bar: var(--color-gray-300);
        --discover-range-bar-thumb: var(--color-gray-900);
        --discover-range-bar-tooltip: var(--color-gray-900);

        --switcher-active-mode: var(--color-gray-200);
        --switcher-bg: var(--color-gray-50);
        --switcher-unactive-mode: var(--color-gray-50);

        --discover-tag-border: var(--color-gray-400);
        --discover-tag-border-active: var(--color-gray-600);
        --discover-tag-icon-bg-hover: var(--color-gray-200);
        --discover-tag-icon-gray: var(--color-gray-400);
        --discover-tag-icon-hover: var(--color-gray-900);
        --discover-tag-number: var(--color-gray-600);

        --footer-app-btn-bg: var(--color-gray-50);
        --footer-app-btn-icon: var(--color-gray-900);
        --footer-app-btn-label: var(--color-gray-900);
        --footer-copy: var(--color-gray-400);
        --footer-header: var(--color-gray-900);
        --footer-link: var(--color-gray-500);
        --footer-link-hover: var(--color-gray-700);
        --footer-logo: var(--color-gray-50);

        --grad-title: #eff0f3;
        --grad-title-hover: #fbfbfc;
        --grad-title-0: #eff0f300;
        --grad-title-0-hover: #fbfbfc00;
        --grad-bar-title: #fbfbfc;
        --grad-bar-title-0: #fbfbfc00;
        --overlay: #404040cc;

        --menu-active-mode: var(--color-gray-50);
        --menu-bg: var(--color-gray-50);
        --menu-borders: var(--color-gray-200);
        --menu-hover: var(--color-gray-200);
        --menu-icon: var(--color-gray-900);
        --menu-label: var(--color-gray-900);
        --menu-oval-bg: var(--color-gray-100);
        --menu-oval-bg-hover: var(--color-gray-200);
        --menu-oval-icon: var(--color-gray-900);
        --menu-selected-overlay-icon-bg: var(--color-gray-200);
        --menu-square-bg: var(--color-gray-100);
        --menu-unactive-mode: var(--color-gray-100);

        --player-bar-bg: var(--color-gray-50);
        --player-bar-border: var(--color-gray-200);
        --player-btn-bg: var(--color-gray-50);
        --player-btn-icon: var(--color-gray-900);
        --player-bar-play-btn-bg: var(--color-primary-700);
        --player-bar-play-btn-icon: var(--color-gray-50);
        --player-bar-setting-btn-icon: var(--color-gray-300);
        --player-bar-setting-btn-icon-hover: var(--color-gray-900);
        --player-bar-setting-btn-bg-hover: var(--color-gray-200);
        --player-bar-volume-bar: var(--color-gray-300);

        --popup-bg: var(--section-bg);
        --popup-icon: var(--color-gray-900);
        --popup-lead: var(--color-gray-600);
        --popup-text: var(--color-gray-900);

        --search-ai-text: var(--color-gray-900);
        --search-beta-bg: var(--color-gray-200);
        --search-beta-label: var(--color-gray-500);
        --search-icon-color: var(--color-gray-900);
        --search-input-bg: var(--color-gray-50);
        --search-input-border: var(--color-gray-300);
        --search-input-border-active: var(--color-gray-500);
        --search-ai-input-border-active: var(--color-gray-600);
        --search-switcher-bg: var(--color-gray-400);
        --search-switcher-bg-active: var(--color-primary-700);
        --search-switcher-oval: var(--color-gray-50);
        --search-text-filled: var(--color-gray-900);
        --search-text-placeholder: var(--color-gray-400);

        --section-arrow-bg: var(--color-gray-50);
        --section-arrow-bg-hover: var(--color-gray-700);
        --section-arrow-icon: var(--color-gray-900);
        --section-arrow-icon-hover: var(--color-gray-50);
        --section-bg: var(--color-gray-100);
        --section-header: var(--color-gray-900);
        --section-lead: var(--color-gray-500);

        --table-row-bg: var(--color-gray-100);
        --table-row-bg-hover: var(--color-gray-50);
        --table-row-divider: var(--color-gray-200);
        --table-row-sample-time: var(--color-gray-400);
        --table-sample-checkbox-bg: var(--color-gray-50);
        --table-sample-checkbox-border: var(--color-gray-300);
        --table-sample-checkbox-border-checked: var(--color-primary-700);
        --table-sample-checkbox-tick: var(--color-gray-900);
        --table-sample-setting-bg-hover: var(--color-gray-300);
        --table-sample-setting-icon: var(--color-gray-300);
        --table-sample-setting-icon-hover: var(--color-gray-900);
        --table-sample-tag-bg: var(--color-gray-50);
        --table-sample-tag-bg-hover: var(--color-gray-100);
        --table-sample-tag-label: var(--color-gray-500);
        --table-sample-tag-label-hover: var(--color-gray-900);
        --table-sample-title: var(--color-gray-900);
        --table-sample-type-icon: var(--color-gray-900);
        --table-sample-waves: var(--color-gray-300);

        --tile-bg: var(--color-gray-50);
        --tile-bg-hover: var(--color-gray-700);
        --tile-icon-color: var(--color-gray-900);
        --tile-icon-color-hover: var(--color-gray-50);
        --tile-tag-border: var(--color-gray-400);
        --tile-tag-border-inverted: var(--color-gray-600);
        --tile-tag-border-hover: var(--color-gray-600);
        --tile-tag-border-inverted-hover: var(--color-gray-400);
        --tile-tag-label: var(--color-gray-900);
        --tile-tag-label-inverted: var(--color-gray-50);
        --tile-tag-label-hover: var(--color-gray-50);
        --tile-title: var(--color-gray-900);
        --tile-title-hover: var(--color-gray-50);
        --tile-lead: var(--color-gray-500);
        --tile-lead-hover: var(--color-gray-500);
    }


}










@media (min-width: 1024px) {
    :root {

        /* DESKTOP - Nadpisanie rozmiarów fontów dla większych ekranów  */
        --text-3xl: 5rem;             /* 80px */
        --text-2xl: 3.875rem;         /* 62px */
        --text-xl: 2.75rem;           /* 44px */
        --text-lg: 2rem;              /* 32px */
        --text-md: 1.625rem;          /* 26px */
        --text-base: 1.25rem;         /* 20px */
        /* takie same */
        /* --text-sm: 1rem; */        /* 16px */
        /* --text-xs: 0.875rem; */    /* 14px */
        /* --text-2xs: 0.75rem; */    /* 12px */

    }
}




html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--shps-font-body);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--site-body-font);
    background-color: var(--site-bg);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--shps-font-heading);
}














.shps-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    border-radius: 2rem;
    padding: .75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.75;
    border: 0;
    transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
}
.shps-button:hover {
    transform: scale(1.05);
}
.shps-button:active {
    transform: scale(0.96);
}
.shps-button:focus-visible {
    outline: 2px solid var(--btn-secondary-bg-hover);
    outline-offset: 2px;
}
.shps-button:disabled,
.shps-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .7;
    pointer-events: none;
    transform: none;
}
.shps-button-small {
    padding: .5rem 1.25rem;
}
.shps-button-base {
    padding: .75rem 1.5rem;
    font-size: 1rem;
}
.shps-button-small > span {
    font-size: inherit;
}
.stack-saved-modal-action-button {
    padding: .5rem 1.25rem;
    font-size: .8rem;
}
.shps-button-primary {
    color: var(--btn-primary-label);
    background-color: var(--btn-primary-bg);
}
.shps-button-primary:hover {
    color: var(--btn-primary-label-hover);
    background-color: var(--btn-primary-bg-hover);
}
.shps-button-secondary {
    color: var(--btn-secondary-label);
    background-color: var(--btn-secondary-bg);
}
.shps-button-secondary:hover {
    color: var(--btn-secondary-label-hover);
    background-color: var(--btn-secondary-bg-hover);
}
.shps-button-tertiary {
    color: var(--btn-tertiary-label);
    background-color: var(--btn-tertiary-bg);
}
.shps-button-tertiary:hover {
    color: var(--btn-tertiary-label-hover);
    background-color: var(--btn-tertiary-bg-hover);
}














/* ---------------------------------------------------------------------------------------------------------------------- */
/* --------- CAROUSEL - "Drums, keys, everything you need. Create in any style and mood." (3 rzędy kafli na HP) --------- */
/* ---------------------------------------------------------------------------------------------------------------------- */
.carousel-row {
    display: flex;
    will-change: transform;
    transition: transform 0.1s ease-out;
}
.carousel-wrapper::before, .carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}
.carousel-wrapper::before { left: 0; background: linear-gradient(to right, #111216, transparent); }
.carousel-wrapper::after { right: 0; background: linear-gradient(to left, #111216, transparent); }

@media (min-width: 768px) {
    .carousel-wrapper::before, .carousel-wrapper::after { width: 150px; }
}






















/* --------------------------------------------------------- */
/* -------- checkbox pojedynczego sampla (Explore) --------- */
/* --------------------------------------------------------- */

/* Kontener główny (Twój div) */
.single-sample-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
}

/* Label wewnątrz diva, który odpowiada za klikalność */
.single-sample-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

/* Ukryty, natywny checkbox */
.single-sample-checkbox-native {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Domyślnie ukryty ptaszek */
.single-sample-checkbox-tick {
    display: none;
}

/* Pokazywanie ptaszka po zaznaczeniu */
.single-sample-checkbox-native:checked + .single-sample-checkbox-svg .single-sample-checkbox-tick {
    display: block;
}

/* Opcjonalnie: Zmiana koloru ramki po zaznaczeniu */
.single-sample-checkbox-native:checked + .single-sample-checkbox-svg .single-sample-checkbox-bg {
    stroke: var(--table-sample-checkbox-border-checked, #ca1248);
}

/* Focus dla użytkowników klawiatury */
.single-sample-checkbox-native:focus-visible + .single-sample-checkbox-svg .single-sample-checkbox-bg {
    outline: 2px solid #ca1248;
    outline-offset: 2px;
}

.sample-filter-input-shell:focus-within,
input.sample-filter-field:focus,
input.sample-filter-field:focus-visible,
textarea.sample-filter-field:focus,
textarea.sample-filter-field:focus-visible {
    border-color: var(--search-ai-input-border-active) !important;
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}