/* =========================================================
  🎨 1. COLOR PALETTES — Palety kolorystyczne.
     System korzysta z nich do określenia kolorystyk elementów i motywów
========================================================= */
:root{
    /* 🟠 Orange (główny kolor akcji – CTA, highlights) */
    --color-orange-100: #ffdbc2;
    --color-orange-200: #ffbc8f;
    --color-orange-300: #ff9e5c;
    --color-orange-400: #ff7f29;
    --color-orange-500: #F56300;
    --color-orange-600: #cc5200;
    --color-orange-700: #a34200;
    --color-orange-800: #7b3200;
    --color-orange-900: #522100;

    /* 🔴 Red (miksujący z akcją, akcent alternatywny / ostrzegawczy) */
    --color-red-100: #fbcad9;
    --color-red-200: #f89ab8;
    --color-red-300: #f46b96;
    --color-red-400: #f13b75;
    --color-red-500: #E81155;
    --color-red-600: #c20e47;
    --color-red-700: #9c0b39;
    --color-red-800: #75082b;
    --color-red-900: #4f051d;

    /* 🔵 Blue (akcent informacyjny, linki, UI neutralny) */
    --color-blue-100: #dfe8ff;
    --color-blue-200: #bfe0ff;
    --color-blue-300: #7d9cff;
    --color-blue-400: #4a75ff;
    --color-blue-500: #174EFF;
    --color-blue-600: #0038ed;
    --color-blue-700: #002fc4;
    --color-blue-800: #00259c;
    --color-blue-900: #001b73;

    /* 🟣 Magenta (akcent dekoracyjny nr 1, efekt „special”) */
    --color-magenta-100: #ffd6f9;
    --color-magenta-200: #ffadef;
    --color-magenta-300: #ff85e5;
    --color-magenta-400: #ff5cdb;
    --color-magenta-500: #E84BDA;
    --color-magenta-600: #c33fb9;
    --color-magenta-700: #9e3398;
    --color-magenta-800: #792777;
    --color-magenta-900: #541b56;

    /* 🟢 Zielony (akcent dekoracyjny nr 2, efekt na pin pointach) */
    --color-green-100: #defce3;
    --color-green-200: #b9f5c2;
    --color-green-300: #6ee7a2;
    --color-green-400: #34d383;
    --color-green-500: #00BF63;
    --color-green-600: #009652;
    --color-green-700: #007940;
    --color-green-800: #005c30;
    --color-green-900: #003d20;

    /* ⚫ BLACK (kolorystyki teł, tekstów, szarości) */
    --color-black-100: #ebebeb /*#f2f2f2*/;
    --color-black-200: #d9d9d9;
    --color-black-300: #bfbfbf;
    --color-black-400: #a6a6a6;
    --color-black-500: #8c8c8c;
    --color-black-600: #595959;
    --color-black-700: #262626;
    --color-black-800: #080808; /* bazowy kolor */
    --color-black-900: #000000;

    /* 🚹 Kolory informacyjne */
    --color-info-100: var(--color-blue-300);
    --color-info-200: var(--color-blue-400);
    --color-info-300: var(--color-blue-500);

    /* ✅ Kolory sukcesu */
    --color-success-100: var(--color-green-300); /* #4ADE80;*/
    --color-success-200: var(--color-green-400); /* #22C55E;*/
    --color-success-300: var(--color-green-500); /* #16A34A; */

    /* ⚠️ Kolory ostrzeżenia */
    --color-warning-100: #FACC15;
    --color-warning-200: #FDE047;
    --color-warning-300: #EAB308;

    /* 🚨 Kolory alertów, błędów */
    --color-error-100: var(--color-red-300); /* #F13B75; najaśniejszy do hovera */
    --color-error-200: var(--color-red-400); /* #C20E47; z Twojej palety */
    --color-error-300: var(--color-red-500); /* #9C0B39; mocny dla dark mode */
}

/* =========================================================
  🧱 2. BASE COLORS / GENERIC ALIASES — podstawowe aliasy do użytku w całym systemie
     Używane w kompontentach.
========================================================= */

:root {
    /* 🏠 - Definicje bazowych - basics */
    --base-color-white: #ffffff;
    --base-color-black: var(--color-black-800);
    --base-color-gray: var(--color-black-100);


    /* 🚩 - Definicje bazowych - brand / accents */
    --base-color-orange: var(--color-orange-500);
    --base-color-red: var(--color-red-500);
    --base-color-green: var(--color-green-600);
    --base-color-blue: var(--color-blue-500);
    --base-color-magenta: var(--color-magenta-500);


    /* 📣 - Definicje głównych statusów */
    --status-color-success: var(--color-success-300);
    --status-color-error: var(--color-error-200);
    --status-color-warning: var(--color-warning-300);
    --status-color-info: var(--color-info-300);
}


/* =========================================================
  🔑  3. ELEMENTS TOKENS — podstawowe tokeny do elementów 
     Tła, kolory tekstów, akcenty
========================================================= */
:root {
  /* 🖼️ - Backgrounds */
  /* 🔳 Główne tła layoutu */
    --bg-page: color-mix(in srgb, var(--color-black-100) 48%, transparent); /* #fff var(--color-black-100);           /* ogólne tło strony */
    --bg-surface: var(--base-color-white);       /* karty, boxy, bloki, komponenty */
    --bg-surface-elevated: var(--base-color-black); /* np. hover cards, lekko uniesione */
    --bg-transparent: transparent;
    /* --bg-neutral: #f9fafc;                       delikatne oddzielenie sekcji 
        --bg-gradient-exposed-text: ;*/

  /* 🌈 Gradienty akcentowe */
    --bg-gradient-primary: linear-gradient(90deg, var(--base-color-orange) 0%, var(--base-color-red) 100%); /* gradient na małe nadtytuły do nagłówków, wyróżnień tekstów sekcji oraz tła przycisków i hover linków w menu */
    --bg-gradient-special: linear-gradient(96deg, color-mix(in srgb, var(--color-blue-500), transparent 76%) 15%, color-mix(in srgb, var(--color-magenta-500), transparent 76%) 95%); /* kolor tła łączący się z czarnym, ten jest rozmyty, na niskim kryciu */

  /* 🟣 Tła akcentowe */
    --bg-accent-primary: var(--bg-gradient-primary);
    /*color-mix(in srgb, var(--base-color-orange), white 85%);*/
    --bg-accent-secondary: color-mix(in srgb, var(--base-color-red), white 90%);
    --bg-accent-special: var(--bg-gradient-special);
    /*--bg-accent-special: color-mix(in srgb, var(--color-magenta-400), white 90%); */

  /* 📘📗📕📙 Tła kontekstowe (informacyjne, ostrzegawcze, błędy, sukcesy) */
    --bg-surface-info: color-mix(in srgb, var(--status-color-info), white 85%);
    --bg-surface-success: color-mix(in srgb, var(--status-color-success), white 85%);
    --bg-surface-warning: color-mix(in srgb, var(--status-color-warning), white 90%);
    --bg-surface-error: color-mix(in srgb, var(--status-color-error), white 90%);

  /* 🌫️ Tła techniczne - Modale i overlays */
    --bg-modal-color-light: var(--base-color-white);
    --bg-modal-color-dark: var(--base-color-black);
    --bg-overlay-light: color-mix(in srgb, var(--color-black-100), transparent 80%);
    --bg-overlay-dark: color-mix(in srgb, var(--color-black-800), transparent 80%);
    --bg-glass-effect-dark: linear-gradient(180deg, color-mix(in srgb, var(--base-color-white) 6%, transparent) 0%, color-mix(in srgb, var(--base-color-black) 4%, transparent) 100% );


/*
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(122, 122, 122, 0.04) 100%)
*/

  /* 🏷️ - Teksty */
    --text-special: var(--bg-gradient-primary);   /* 🪄 Specjalny gradientowy tekst (np. hero, nadtytuł, dekoracja) */
    --text-heading: var(--color-black-900);       /* 🏷️ Nagłówki (H1–H6) na ciemnym tle */
    --text-primary: var(--base-color-black);      /* 📄 Tekst główny (akapity) */
    --text-secondary: var(--color-black-700);     /* 🪶 Tekst drugorzędny (np. meta, label, opis pomocniczy) */
    --text-tertiary: var(--color-black-400);      /* 💨 Tekst trzeciorzędny (np. małe podpisy, microcopy) */
    --text-link: var(--base-color-blue);          /* 🔗 Linki (na jasnym tle) */
    --text-link-hover: var(--color-blue-400);     /* 🔗 Hover linków */

    --text-special-inverse: var(--bg-gradient-primary);
    --text-heading-inverse: var(--base-color-white);
    --text-primary-inverse: var(--color-black-100);
    --text-secondary-inverse: var(--color-black-200);
    --text-tertiary-invserse: var(--color-black-400);
    --text-link-inverse: var(--color-blue-200);
    --text-link-hover-inverse: var(--color-blue-100);


    /* 👋 - Akcenty i połączenia kolorystyczne */
    --transition-time: 0.4s;
    --accent-transition:all 0.4s ease-in-out;


    /* PRIMARY */
    --accent-primary: var(--bg-gradient-primary);
    --accent-primary-hover: linear-gradient(90deg, var(--color-orange-400) 0%, var(--color-red-400) 100%);
    --accent-primary-focus: linear-gradient(90deg, var(--color-orange-500) 0%, var(--color-red-500) 100%);
    --accent-primary-active: linear-gradient(90deg, var(--color-orange-600) 0%, var(--color-red-600) 100%);
    --accent-primary-disabled: linear-gradient(90deg, var(--color-orange-200) 0%, var(--color-red-200) 100%);

    --accent-primary-foreground: var(--text-heading-inverse);
    --accent-primary-disabled-foreground: var(--color-black-400);

    --accent-primary-border: transparent;
    --accent-primary-focus-border: var(--color-blue-500);
    --accent-primary-shadow: ; /* 0 0 0 3px rgba(23, 78, 255, 0.3); */

    /* SECONDARY */
    --accent-secondary: var(--base-color-white);  /* drugi akcent np. CTA alternatywny */
    --accent-secondary-hover: color-mix(in srgb, var(--base-color-white), var(--color-orange-100) 20%);
    --accent-secondary-focus: var(--base-color-white);
    --accent-secondary-active: color-mix(in srgb, var(--base-color-white), var(--color-orange-200) 30%);
    --accent-secondary-disabled: var(--color-black-100);

    --accent-secondary-foreground: var(--base-color-red);
    --accent-secondary-disabled-foreground: var(--color-black-400);

    --accent-secondary-border: var(--bg-gradient-primary);
    --accent-secondary-focus-border: var(--color-blue-500);
    --accent-secondary-shadow: ; /* 0 0 0 3px rgba(23, 78, 255, 0.3); */


   /* TERTIARY */
    --accent-tertiary: var(--base-color-orange);
    --accent-tertiary-hover: var(--color-orange-400);
    --accent-tertiary-focus: var(--color-orange-500);
    --accent-tertiary-active: var(--color-orange-600);
    --accent-tertiary-disabled: var(--color-orange-200);

    --accent-tertiary-foreground: var(--text-heading-inverse);
    --accent-tertiary-disabled-foreground: var(--text-tertiary-invserse);

    --accent-tertiary-border: transparent;
    --accent-tertiary-focus-border: var(--color-orange-500);
    --accent-tertiary-shadow: var(); /* 0 0 0 3px rgba(23, 78, 255, 0.3); */


    /* Quaternary */
    --accent-quaternary: var(--color-orange-100);
    --accent-quaternary-hover: var(--color-orange-200);
    --accent-quaternary-focus: var(--color-orange-300);
    --accent-quaternary-active: var(--color-orange-400);
    --accent-quaternary-disabled: var(--color-orange-100);

    --accent-quaternary-foreground: var(--color-black-700);
    --accent-quaternary-disabled-foreground: var(--color-black-400);

    --accent-quaternary-border: transparent;
    --accent-quaternary-focus-border: var(--color-orange-500);
    --accent-quaternary-shadow: var(); /* 0 0 0 3px rgba(23, 78, 255, 0.3); */


    /* 📍 - Stany kolorystyczne dla inputów i innych elementów */
    --state-color: var(--color-black-500);
    --state-color-hover: var(--color-black-100); 
    --state-color-focus: var(--color-blue-400); 
    --state-color-active: var(--color-black-200); 
    --state-color-disabled: var(--color-black-300);
}
/* =========================================================
  🧩 4. LAYOUT ELEMENTS TOKENS — podstawowe elementy layoutu
     Przyciski, pola, linki, nawigacja etc.
========================================================= */
:root {
  /* 🧾 Inputs / Forms */
  --input-bg: var(--base-color-white);
  --input-border: var(--border-default);
  --input-border-focus: var(--border-focus);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-placeholder);
  --input-disabled-bg: var(--disabled-bg);
  --input-disabled-border: var(--disabled-border);


  /* 🧱 Cards / Surfaces */
  --bg-card: var(--bg-surface);
  --bg-card-hover: color-mix(in srgb, var(--bg-surface), var(--color-black-100) 10%);
  --border-card: var(--border-subtle);
  --border-card-hover: var(--border-subtle);
  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-sm);

  /* 🧱 BORDER COLORS  */
  --border-primary: var(--color-black-700); /* standardowe obramowania */
  --border-hover: var(--color-black-400);
  --border-focus: var(--primary-color); /* aktywny stan focus */


  /* 🧱 Tabs Vertical */
  --tab-vertical-bg: transparent;
  --tab-vertical-bg-active: var(--base-color-orange);
  --tab-vertical-bg-hover: var(--base-color-white);
  --tab-vertical-bg-focus: var(--base-color-white);
  --tab-vertical-border: transparent;
  --tab-vertical-text: var(--base-color-white);
  --tab-vertical-text-active: var(--base-color-white);
  --tab-vertical-text-hover: var(--base-color-orange);
  --tab-vertical-text-focus: var(--border-default);

  --tab-vertical-bg-inverse: transparent;
  --tab-vertical-bg-active-inverse: var(--base-color-orange);
  --tab-vertical-bg-hover-inverse: var(--base-color-white);
  --tab-vertical-bg-focus-inverse: var(--base-color-white);
  --tab-vertical-border-inverse: transparent;
  --tab-vertical-text-inverse: var(--base-color-white);
  --tab-vertical-text-active-inverse: var(--base-color-white);
  --tab-vertical-text-hover-inverse: var(--base-color-black);
  --tab-vertical-text-focus-inverse: var(--border-default);

  /* 🧱 Tooltip */
  --tooltip-dark-bg: color-mix(in srgb, var(--color-black-800), transparent 15%);
  --tooltip-dark-foreground: color-mix(in srgb, var(--base-color-white), transparent 15%);
  --tooltip-dark-bg-blur: var(--space-12);
  --tooltip-dark-close-icon: var(--base-color-black);
  --tooltip-dark-close-icon-bg: var(--base-color-white);
  --tooltip-dark-text: var(--base-color-white);

  /* 🧱 Cards / Surfaces */
  --bg-box-light: var(--bg-surface);
  --bg-box-light-hover: color-mix(in srgb, var(--bg-surface), var(--color-black-100) 10%);

  --bg-box-dark: var(--bg-surface-elevated);
  --bg-box-dark-hover: color-mix(in srgb, var(--bg-surface), var(--color-black-100) 10%);

  --border-box: var(--border-subtle);
  --border-box-hover: var(--border-subtle);
  /*--shadow-box: var(--shadow-sm);
  --shadow-box-hover: var(--shadow-sm);*/

  --shadow-box:  0px 16px 32px rgba(0, 0, 0, 0.10); /* 0px 0px 16px 0px rgba(0, 0, 0, 0.04); /*0 8px 32px rgba(0, 0, 0, 0.04);*/
  --shadow-box-hover: 0px 16px 32px rgba(0, 0, 0, 0.16); /* 0px 0px 32px 0px rgba(0, 0, 0, 0.08); */

/*     box-shadow:  */
/*     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); */

  --avatar-border-width: 1px;
  --avatar-border-radius: 50%;
  --avatar-border-color: var(--state-color-active);
  --avatar-border-settings: var(--avatar-border-width) solid var(--avatar-border-color);

  /* 🧱 Backdrop Filter */
  --backdrop-filter: blur(12px) saturate(180%);
  --backdrop-filter-bgcolor:color-mix(in srgb, var(--base-color-white) 90%, transparent);
  --backdrop-tooltip-dark-foreground: var(--text-heading);
  --backdrop-filter-bgcolor-inverse:color-mix(in srgb, var(--base-color-black) 90%, transparent);
  --backdrop-tooltip-dark-foreground-inverse: var(--text-heading-inverse);

  /* 🧱 Animations and transitions */
  --effects-hover-upscale: zoomSmooth var(--transition-time) ease-out forwards;
  --effects-hover-upscale-zoom-no:1.0;
  --effects-hover-upscale-zoom:1.10;
  --effects-hover-upscale-zoom-xl:1.10;
  --effects-hover-upscale-zoom-l:1.050;
  --effects-hover-upscale-zoom-s:1.030;
  --trans-complete-effect: transform var(--transition-time) cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--transition-time) cubic-bezier(0.4, 0, 0.2, 1), background var(--transition-time) ease, border var(--transition-time) ease, color var(--transition-time) ease, opacity var(--transition-time) ease;
  --trans-opacity-ease: opacity var(--transition-time) ease;
  --trans-bg-ease: background var(--transition-time) ease;

}


    /* 🧱 BORDER COLORS 
    --border-primary: var(--color-black-200); /* standardowe obramowania 
    --border-hover: var(--color-black-400);
    --border-focus: var(--primary-color); /* aktywny stan focus */


    /* basic colors 
    --primary-color: var(--base-color-orange);
    --secondary-color: var(--base-color-black);
    --tertiary-color: var(--base-color-white);
*/


}