/* === MOTYW CIEMNY === */
:root[data-theme="dark"] {
  --font-main: 'Space Grotesk', sans-serif;

  --color-text: #ffffff;
  --color-accent: #ff9900;            /* Pomarańczowy */
  --color-primary: rgba(9, 12, 189, 0.4);           /* Granatowy */
  --color-accent-light: rgb(58, 217, 245, 0.5);      /* Jasny błękit – jak na osiach */
  --color-bg: rgba(9, 12, 189, 0.2);  /* Półprzezroczyste tło */

  --color-button-bg: var(--color-primary);
  --color-button-text: #ffffff;
  --color-border: var(--color-accent);
  --color-shadow: 0 0 10px var(--color-accent-light);
}

/* === MOTYW JASNY === */
:root[data-theme="light"] {
  --font-main: 'Space Grotesk', sans-serif;

  --color-text: #000000;
  --color-accent: #ff9900;            /* Pomarańczowy */
  --color-primary:rgba(9, 12, 189, 0.5);           /* Granatowy (tekst, tytuły) */
  --color-accent-light: rgb(58, 217, 245, 0.5); /* Jaśniejszy, subtelniejszy błękit */
  --color-bg: rgb(58, 217, 245, 0.2); /* Jasne tło */

  --color-button-bg: var(--color-accent-light);
  --color-button-text: #000000;
  --color-border: var(--color-accent);
  --color-shadow: 0 0 10px var(--color-accent-light);
}

/* === GLOBALNE === */
body {
  margin: 0;
  padding: 0;
  background-color: black;
  position: relative;
  font-family: var(--font-main);
}

body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: calc(100vw * 8 / 16);
  max-height: 100vh;
  max-width: calc(100vh * 16 / 8);
  transform: translate(-50%, -50%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}

body[data-theme="dark"] {
  background-color: black;
  color: var(--color-text);
}

body[data-theme="dark"]::before {
  background-image: url("/themes/ChatGPT Image 30 cze 2025, 00_57_31.png");
}

body[data-theme="light"] {
  background-color: white;
  color: var(--color-text);
}

body[data-theme="light"]::before {
  background-image: url("/themes/ChatGPT Image 30 cze 2025, 01_05_48.png");
}

/* === GLASS PANELS === */
.mainContainer,
.glass-panel,
.tile-panel,
.lesson-panel,
.section-panel {
  background-color: var(--color-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-panel {
  background-color: var(--color-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* === PRZYCISKI === */
.tile-button,
.btn-primary,
.btn-secondary {
  font-family: var(--font-main);
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-button-bg);
  color: var(--color-button-text);
  box-shadow: var(--color-shadow);
  cursor: pointer;
  transition: all 0.3s ease;
}

.tile-button:hover {
  background: var(--color-button-bg) !important;
  color: var(--color-button-text) !important;
  filter: none !important;
}



/* === BREADCRUMBY === */
.breadcrumb-link {
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link {
  color: var(--color-accent); /* zawsze pomarańczowy */
}