/* === GLOBALNY RESET SZEROKOŚCI === */
*, *::before, *::after {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* blokada scrolla poziomego */
}

/* === 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[data-theme="dark"] {
  background-color: black;
  color: var(--color-text);
}

body[data-theme="dark"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image:
    repeating-linear-gradient(
      to right,
      var(--color-accent) 0 1px,
      transparent 1px 100px
    ),
    repeating-linear-gradient(
      to bottom,
      var(--color-accent) 0 1px,
      transparent 1px 100px
    ),
    repeating-linear-gradient(
      to right,
      var(--color-accent) 0 3px,
      transparent 3px 400px
    ),
    repeating-linear-gradient(
      to bottom,
      var(--color-accent) 0 3px,
      transparent 3px 400px
    );
  background-size: 400px 400px;
  background-repeat: repeat;
  background-position:
    20px 0,
    20px 0,
    -80px 0,
    20px 100px;
  opacity: 0.6;
}




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

body[data-theme="light"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image:
    repeating-linear-gradient(
      to right,
      var(--color-accent) 0 1px,
      transparent 1px 100px
    ),
    repeating-linear-gradient(
      to bottom,
      var(--color-accent) 0 1px,
      transparent 1px 100px
    ),
    repeating-linear-gradient(
      to right,
      var(--color-accent) 0 3px,
      transparent 3px 400px
    ),
    repeating-linear-gradient(
      to bottom,
      var(--color-accent) 0 3px,
      transparent 3px 400px
    );
  background-size: 400px 400px;
  background-repeat: repeat;
  background-position:
    20px 0,
    20px 0,
    -80px 0,
    20px 100px;
  opacity: 0.6;
}


/* === 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 */
}