@font-face {
  font-family: 'GSS-Heading';
  src: url('./fonts/sans-1.7/sans-1.7/fonts/webfonts/ZalandoSans[wdth,wght,slnt].woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: oblique -10deg 0deg;
  font-display: swap;
}

@font-face {
  font-family: 'GSS-Body';
  src: url('./fonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --gss-blue: #057dbb;
  --gss-deep-blue: #0c436b;
  --gss-red: #a82223;
  --gss-deep-red: #750f0f;
  --gss-black: #0a1418;

  --gss-white: #ffffff;
  --gss-light-grey: #f7f8fa;
  --gss-border: #d9e1e6;

  --gss-radius-sm: 10px;
  --gss-radius-md: 16px;

  --gss-shadow-sm: 0 2px 10px rgba(10, 20, 24, 0.10);

  --bs-primary: var(--gss-blue);
  --bs-primary-rgb: 5, 125, 187;
  --bs-danger: var(--gss-red);
  --bs-danger-rgb: 168, 34, 35;
  --bs-dark: var(--gss-black);
  --bs-dark-rgb: 10, 20, 24;
  --bs-link-color: var(--gss-blue);
}

html,
body {
  font-family: 'GSS-Body', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--gss-light-grey);
  color: var(--gss-black);
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.navbar .navbar-text,
.card-header {
  font-family: 'GSS-Heading', 'GSS-Body', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.navbar {
  background: var(--gss-white) !important;
  border-bottom: 1px solid var(--gss-border);
}

.card,
.dropdown-menu {
  border-radius: var(--gss-radius-md);
  border-color: var(--gss-border);
  box-shadow: var(--gss-shadow-sm);
}

.btn {
  border-radius: 999px;
  font-weight: 600;
}

.btn-primary {
  background-color: var(--gss-blue) !important;
  border-color: var(--gss-blue) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gss-deep-blue) !important;
  border-color: var(--gss-deep-blue) !important;
}

.btn-outline-primary {
  border-color: var(--gss-blue) !important;
  color: var(--gss-blue) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--gss-blue) !important;
  border-color: var(--gss-blue) !important;
  color: var(--gss-white) !important;
}

.btn-danger {
  background-color: var(--gss-red) !important;
  border-color: var(--gss-red) !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--gss-deep-red) !important;
  border-color: var(--gss-deep-red) !important;
}

.btn-link {
  color: var(--gss-blue) !important;
}

.form-control,
.form-select {
  border-radius: var(--gss-radius-sm);
  border-color: var(--gss-border);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(5, 125, 187, 0.4);
  box-shadow: 0 0 0 0.25rem rgba(5, 125, 187, 0.15);
}

.table thead th {
  font-weight: 600 !important;
}

.gss-logo {
  height: 36px;
  width: auto;
}