:root {
  --brand-bg: #ffffff;
  
  /* Nowe kolory projektu */
  --brand-accent-primary: #A8874F;
  --brand-accent-secondary: #0F1B2D;
  --brand-accent-blue-light: #f5f6f8;
  
  --brand-accent-1: var(--brand-accent-primary);
  --brand-accent-2: var(--brand-accent-secondary);
  --brand-muted-light: var(--brand-accent-blue-light);
  --brand-muted-dark: #1b1b1d;
  
  --brand-primary-bg: var(--brand-accent-primary);
  --brand-primary-text: var(--brand-accent-primary);
  --on-primary: #ffffff;
  
  --brand-secondary-bg: var(--brand-accent-secondary);
  --brand-secondary-text: #ffffff;
  --on-secondary: #ffffff;
  
  --dark-text: #333333;
  --light-text: #ffffff;
  --dark-bg: var(--brand-muted-dark);
  --light-bg: var(--brand-bg);
  --muted-light: var(--brand-muted-light);
  --muted-dark: var(--brand-muted-dark);
  --brand-shadow-rgb: 15, 27, 45;
  --radius: 8px;
  
  --btn-primary-bg: var(--brand-accent-primary);
  --btn-primary-text: #ffffff;
  --btn-primary-bg-hov: #8c6e3b;
  
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: var(--brand-accent-secondary);
  --btn-secondary-border: var(--brand-accent-secondary);
  --btn-secondary-bg-hov: #f2f2f2;
  --btn-secondary-text-hov: var(--brand-accent-secondary);
  
  --btn-white-bg: transparent;
  --btn-white-text: #ffffff;
  --btn-white-border: #ffffff;
  --btn-white-bg-hov: #ffffff;
  --btn-white-text-hov: var(--brand-muted-dark);
  
  --btn-padding-y: 12px;
  --btn-padding-x: 32px;
  --btn-radius: 4px;
  --btn-height: 48px;
  
  --link-color: var(--brand-primary-text);
  --link-underline: var(--brand-primary-text);
  
  --panel-bg: var(--brand-bg);
  --panel-border: #f5f6f8;
  --panel-radius: var(--radius);
  --panel-shadow: 0 4px 20px rgba(var(--brand-shadow-rgb), 0.1);
  
  --content-max-width: 72ch;
  --p: 16px;
  --h1: 48px;
  --h2: 36px;
  --h3: 28px;
  --h4: 22px;
  --h5: 18px;
  --h6: 16px;
  
  --transition: 0.3s ease-in-out;
  --font-heading: "Bebas Neue", sans-serif;
  --font-body: "Albert Sans", sans-serif;
}

/* ================ COLORS ================ */
.text-dark { color: var(--dark-text); }
.text-light { color: var(--light-text); }
.text-primary { color: var(--brand-primary-text); }
.text-secondary { color: var(--brand-secondary-text); }

.bg-primary {
  background-color: var(--brand-primary-bg);
  color: var(--on-primary);
}
.bg-secondary {
  background-color: var(--brand-secondary-bg);
  color: var(--on-secondary);
}

/* ================ TYPOGRAPHY ================ */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
}

body {
  font-family: var(--font-body);
  background-color: var(--brand-bg);
  color: var(--dark-text);
}

/* ================ CONTAINERS ================ */
.ifil-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ================ BUTTONS ================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  transition: all var(--transition);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hov);
  transform: translateY(-2px);
}

.btn-outline {
  background-color: transparent;
  color: var(--brand-accent-secondary);
  border-color: var(--brand-accent-secondary);
}

.btn-outline:hover {
  background-color: var(--brand-accent-secondary);
  color: #ffffff;
}

.btn-white-outline {
  background-color: transparent;
  color: var(--btn-white-text);
  border-color: var(--btn-white-border);
}

.btn-white-outline:hover {
  background-color: var(--btn-white-bg-hov);
  color: var(--btn-white-text-hov);
}