/* === THEME (default) === */
:root {
  /* System */
  --alert:      #C29838;
  --background: #151515;
  --danger:     #872323;
  --disabled:   #7D7D7D;
  --divider:    #292929;
  --success:    #279655;
  --surface:    #1C1F21;
  --field-bg:    #171717;
  --field-border:#343434;


  /* Icons */
  --iconantracit: #5E7D8D;
  --iconindigo:   #3F51B5;
  --iconolive:    #7A8F54;
  --iconrust:     #C65D35;
  --iconsand:     #D4B483;
  --iconteal:     #1CC3B3;

  /* Brand */

  --brandprimary:  #5B8086;
  --brandsecondary:  #AEA24C;
  --catcalc:    #D39C37;
  --catconv:    #2A9D8F;
  --catsim:     #8E5BAA;
  --button:     #AEA24C;
  --button-70:  #948D51;

  /* Text */

  --foreground: #FAFAFA;
  --onbrand:    #151515;
  --onsurface:  #FAFAFA;

  --font-body: 'Inter', sans-serif;
  --font-display: "Space Mono", monospace;
}

/* Fonty */

h1 {font-family: var(--font-display); color: var(--brandprimary); font-size: 2.5rem;}
h2 {font-family: var(--font-display); color: var(--brandprimary); font-size: 2rem;}
h3 {font-family: var(--font-display); color: var(--brandprimary); font-size: 1.5rem;}
h4 {font-family: var(--font-display); color: var(--brandprimary); font-size: 1.2rem;}

.tool-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.tool-desc {
  font-size: 0.9rem;
}

body {font-family: var(--font-body); color: var(--foreground); font-size: 1rem;}

.navbar-brand {font-family: var(--font-display); color: var(--brandprimary); font-size: 1.5rem; transition: color 0.3 ease}
.navbar-brand:hover {color: var(--brandprimary-70);}
.nav-link {font-family: var(--font-display); color: var(--brandprimary); font-size: 1.3rem; transition: color 0.3 ease}
.nav-link:hover {color: var(--brandprimary-70);}
.navbar-toggler-icon {color: var(--brandprimary);}

.catcalc {
  color: var(--catcalc);
}

.catconv {
  color: var(--catconv);
}

.catsim {
  color: var(--catsim);
}

/* Hlavný style */

header {
  background: var(--surface);
}

body {
  background: var(--background);
  min-height: 100vh;
}

footer {
  background: var(--surface);
  border-top: 1px solid var(--divider);
}

a {
  text-decoration: none;
  color: var(--disabled);
}

.btn-primary {
  background-color: var(--button);
  border-color: var(--button);
  color: #111; /* lepší kontrast na zlatej */
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--button-70);
  border-color: var(--button-70);
  color: #111;
}

.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(174, 162, 76, 0.3);
}

/* Outline tlačidlá – napr. sensor presets */
.btn-outline-secondary {
  border-color: var(--button);
  color: var(--button);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: var(--button-70);
  border-color: var(--button-70);
  color: #111;
}

.form-control {
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  color: #f5f5f5;
  border-radius: 0.75rem; /* mäkšie rohy ako default */
}

.form-control:focus {
  background-color: var(--field-bg);
  color: #fff;
  border-color: var(--button);
  box-shadow: 0 0 0 0.16rem rgba(174, 162, 76, 0.25);
}

/* placeholder farba nech je jemnejšia */
.form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Tool Cards */

.btn-card {
  background: var(--surface);
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--divider);
  height: 100%;
  transition: background 0.3s ease;
}

.btn-card:hover {
  background: var(--divider);
}

.btn-card i {
  font-size: 3rem;
}

.btn-tags {
  font-size: 0.8rem;
}

@media (max-width: 575.98px) {
  .tool-card i {
    font-size: 2.4rem;
  }
}

.tool-card {
  background: var(--surface);
  color: var(--foreground);
  border-radius: 1rem;
  border: 1px solid var(--divider);
}

.tool-popup-link i {
  font-size: 1rem;
}

/* nech je overlay stretched-link pod ikonou */
.btn-card .stretched-link::after {
  z-index: 1;
}

/* ikonka pre popup nad overlayom */
.tool-popup-link {
  position: relative;
  z-index: 2;
}

.tool-popup-link i {
  font-size: 1.1rem;
}

.tool-popup-link:hover {
  text-decoration: none;
  opacity: 0.8;
}