/* public/css/style.css */

/*
  Barevnost:
  Základní: Černá (#000000), Bílá (#ffffff)
  Doplňkové: Žlutá (#f3efdf), Zelená (#e6eade), Modrá (#DBE3E8), Fialová (#ECE9EE)
*/
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-yellow: #f3efdf;
  --color-green: #e6eade;
  --color-blue: #DBE3E8;
  --color-purple: #ECE9EE;
}

@font-face {
  font-family: 'Quercus';
  src: url('../fonts/QuercusBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Typold';
  src: url('../fonts/The Northern Block Ltd - Typold Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Typold';
  src: url('../fonts/The Northern Block Ltd - Typold Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

/* Base Typography */
body {
  font-family: 'Typold', sans-serif;
  font-weight: 300;
  background-color: var(--color-white);
  color: var(--color-black);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Quercus', serif;
  font-weight: 900;
  color: var(--color-black);
}

/* Bootstrap Overrides */
.navbar {
  background-color: var(--color-white) !important;
  border-bottom: 2px solid var(--color-black);
}

.navbar-brand {
  color: var(--color-black) !important;
}

.nav-link {
  color: var(--color-black);
}

.nav-link:hover {
  color: #555;
}

.btn-primary {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #333 !important;
  border-color: #333 !important;
  color: var(--color-white) !important;
}

.btn-outline-secondary {
  color: var(--color-black);
  border-color: var(--color-black);
}

.btn-outline-secondary:hover {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

/* Utility Classes for Complementary Colors */
.bg-yellow { background-color: var(--color-yellow) !important; }
.bg-green { background-color: var(--color-green) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.bg-purple { background-color: var(--color-purple) !important; }

/* Main content styling */
.main-content {
  padding-top: 2rem;
}