/* ==========================================================================
   Tomasz Klicki Engineering — marka na tomasz.klicki.pl
   Źródło: identyfikacja wizualna TK-ENG z Claude Design (KB: projects-design/eksport-max/
   tomasz-klicki-engineering, web-tke-brand-FINAL.css + galeria v0.4): paleta „Hologram",
   symbol T01 („>" w kwadracie), Space Grotesk (nagłówki), IBM Plex Sans (tekst),
   IBM Plex Mono (etykiety). Nakładka na zmienne Bootstrapa 5.3.
   ========================================================================== */

:root {
  --tke-violet: #8B7CF6;  /* Holo Fiolet   */
  --tke-indigo: #5C5FE9;  /* Indygo        */
  --tke-blue:   #3E63DD;  /* Sygnał        — akcent / linki na jasnym */
  --tke-cyan:   #55D0E0;  /* Chłodny Cyjan — akcent na ciemnym */
  --tke-night:  #0A0D18;  /* Noc           */
  --tke-ink:    #14172B;  /* Atrament      */
  --tke-paper:  #F4F5FA;  /* Papier        */
  --tke-gray:   #7C829B;  /* Szary Tech    */
  --tke-gradient: linear-gradient(135deg, var(--tke-cyan) 0%, var(--tke-blue) 34%, var(--tke-indigo) 64%, var(--tke-violet) 100%);

  --tke-font-display: "Space Grotesk", system-ui, sans-serif;
  --tke-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-monospace: var(--tke-font-mono);
}

[data-bs-theme="light"] {
  --bs-body-bg: #F4F5FA;           --bs-body-bg-rgb: 244, 245, 250;
  --bs-body-color: #14172B;        --bs-body-color-rgb: 20, 23, 43;
  --bs-emphasis-color: #0A0D18;    --bs-emphasis-color-rgb: 10, 13, 24;
  --bs-secondary-color: #4A4F66;   --bs-secondary-color-rgb: 74, 79, 102;
  --bs-tertiary-bg: #FFFFFF;       --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-border-color: #DDE0EA;
  --bs-link-color: #3E63DD;        --bs-link-color-rgb: 62, 99, 221;
  --bs-link-hover-color: #5C5FE9;  --bs-link-hover-color-rgb: 92, 95, 233;
  --tke-accent: #3E63DD;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #0A0D18;           --bs-body-bg-rgb: 10, 13, 24;
  --bs-body-color: #F4F5FA;        --bs-body-color-rgb: 244, 245, 250;
  --bs-emphasis-color: #FFFFFF;    --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #A6ABC2;   --bs-secondary-color-rgb: 166, 171, 194;
  --bs-tertiary-bg: #11152A;       --bs-tertiary-bg-rgb: 17, 21, 42;
  --bs-border-color: #1C2030;
  --bs-link-color: #55D0E0;        --bs-link-color-rgb: 85, 208, 224;
  --bs-link-hover-color: #8B7CF6;  --bs-link-hover-color-rgb: 139, 124, 246;
  --tke-accent: #55D0E0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .tke-display {
  font-family: var(--tke-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Etykieta techniczna: „> APPS" */
.tke-label {
  font-family: var(--tke-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tke-accent);
}

/* ---- Navbar i footer: zawsze ciemne (Noc), jak w makiecie WWW S01 ---- */
.tke-bar {
  --bs-navbar-color: #A6ABC2;
  --bs-navbar-hover-color: #F4F5FA;
  --bs-navbar-active-color: #55D0E0;
  background: var(--tke-night);
  color: #A6ABC2;
}
.tke-navbar { border-bottom: 1px solid #1C2030; }
.tke-footer { border-top: 1px solid #1C2030; }

.tke-brand {
  font-family: var(--tke-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F4F5FA;
}
.tke-brand:hover, .tke-brand:focus { color: #F4F5FA; }
.tke-brand .tke-brand-eng { font-weight: 500; color: var(--tke-gray); }

.tke-navbar .nav-link { font-size: 0.9rem; }
.tke-navbar .nav-link.active { border-bottom: 2px solid var(--tke-cyan); }
.tke-navbar .dropdown-menu {
  --bs-dropdown-bg: #11152A;
  --bs-dropdown-border-color: #1C2030;
  --bs-dropdown-link-color: #F4F5FA;
  --bs-dropdown-link-hover-bg: #1C2030;
  --bs-dropdown-link-hover-color: #FFFFFF;
  --bs-dropdown-link-active-bg: #1C2030;
  --bs-dropdown-link-active-color: #55D0E0;
  --bs-dropdown-header-color: var(--tke-gray);
  border-radius: 0.5rem;
}
.tke-navbar .dropdown-header {
  font-family: var(--tke-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tke-footer a { color: #A6ABC2; text-decoration: none; }
.tke-footer a:hover { color: #F4F5FA; }

/* ---- Ikony aplikacji (zaokrąglenie jak na iPadzie) ---- */
.tke-app-icon { border-radius: 22.5%; box-shadow: 0 0.25rem 0.75rem rgba(10, 13, 24, 0.18); }

/* ---- Karta aplikacji ---- */
.tke-card {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
}
a.tke-card { color: inherit; text-decoration: none; transition: border-color 0.15s ease; }
a.tke-card:hover { border-color: var(--tke-accent); }

/* ---- Przyciski w akcencie marki ---- */
.btn-tke {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--tke-blue);
  --bs-btn-border-color: var(--tke-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--tke-indigo);
  --bs-btn-hover-border-color: var(--tke-indigo);
  --bs-btn-active-bg: var(--tke-indigo);
  --bs-btn-active-border-color: var(--tke-indigo);
}

/* Placeholder TestFlight — jeszcze niedostępny */
.tke-soon-badge {
  font-family: var(--tke-font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--tke-gradient);
  color: #fff;
  border-radius: 999px;
  padding: 0.2em 0.6em;
}
.tke-placeholder { cursor: default; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  a.tke-card { transition: none; }
}