/* Boden um Berlin — Design Tokens. Jede Zeile bezieht sich auf DESIGN-SYSTEM.md. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed/BarlowCondensed-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed/BarlowCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow/Barlow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow/Barlow-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow/Barlow-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  /* ---- Farbpalette ---- */
  --bum-anthrazit: #2B3A36;     /* Tiefanthrazit — Logo, Headlines, Chrome (Header/Footer/Nav) */
  --bum-surface: #F5F4F0;       /* --surface-page — warmes Off-White */
  --bum-white: #FFFFFF;

  --bum-schieferblau: #4C6478;  /* Gebäudemanagement */
  --bum-eisblau: #3E7A9E;       /* Winterdienst */
  --bum-waldgruen: #3C6B4A;     /* Grünanlagenpflege */
  --bum-terrakotta: #AD5936;    /* Wohnungssanierungen */

  --bum-schieferblau-tint: color-mix(in srgb, var(--bum-schieferblau) 12%, white);
  --bum-eisblau-tint: color-mix(in srgb, var(--bum-eisblau) 12%, white);
  --bum-waldgruen-tint: color-mix(in srgb, var(--bum-waldgruen) 12%, white);
  --bum-terrakotta-tint: color-mix(in srgb, var(--bum-terrakotta) 12%, white);

  /* Geschäftsfeld-Zuordnung — je Gewerk genau ein Akzent, nie gemischt */
  --bum-gebaeudemanagement: var(--bum-schieferblau);
  --bum-gebaeudemanagement-tint: var(--bum-schieferblau-tint);
  --bum-winterdienst: var(--bum-eisblau);
  --bum-winterdienst-tint: var(--bum-eisblau-tint);
  --bum-gruenanlagenpflege: var(--bum-waldgruen);
  --bum-gruenanlagenpflege-tint: var(--bum-waldgruen-tint);
  --bum-wohnungssanierungen: var(--bum-terrakotta);
  --bum-wohnungssanierungen-tint: var(--bum-terrakotta-tint);

  --border-subtle: color-mix(in srgb, var(--bum-anthrazit) 14%, white);

  /* ---- Typografie ---- */
  --bum-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --bum-font-body: "Barlow", -apple-system, sans-serif;
  --bum-font-mono: var(--bum-font-body);

  /* ---- Radien ---- */
  --radius-sm: 4px;   /* Inputs, Buttons, Tags */
  --radius-md: 8px;   /* Cards, Icon-Tiles */
  --radius-lg: 14px;  /* größere Panels, Dialoge */

  /* ---- Schatten (anthrazit-getönt, nie reines Schwarz) ---- */
  --shadow-sm: 0 1px 2px rgba(43, 58, 54, 0.08), 0 1px 1px rgba(43, 58, 54, 0.05);
  --shadow-md: 0 10px 24px -6px rgba(43, 58, 54, 0.18), 0 2px 6px rgba(43, 58, 54, 0.08);
  --shadow-lg: 0 24px 48px -10px rgba(43, 58, 54, 0.28), 0 4px 10px rgba(43, 58, 54, 0.1);

  /* ---- Motion ---- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Bootstrap 5.3 Overrides ---- */
  --bs-primary: var(--bum-anthrazit);
  --bs-primary-rgb: 43, 58, 54;
  --bs-success: var(--bum-waldgruen);
  --bs-success-rgb: 60, 107, 74;
  --bs-info: var(--bum-eisblau);
  --bs-info-rgb: 62, 122, 158;
  --bs-warning: var(--bum-terrakotta);
  --bs-warning-rgb: 173, 89, 54;
  --bs-dark: var(--bum-anthrazit);
  --bs-dark-rgb: 43, 58, 54;
  --bs-light: var(--bum-surface);
  --bs-light-rgb: 245, 244, 240;
  --bs-body-bg: var(--bum-surface);
  --bs-body-color: var(--bum-anthrazit);
  --bs-body-font-family: var(--bum-font-body);
  --bs-heading-color: var(--bum-anthrazit);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-color: var(--border-subtle);
  --bs-focus-ring-color: color-mix(in srgb, var(--bum-anthrazit) 35%, transparent);
  --bs-link-color: var(--bum-anthrazit);
  --bs-link-color-rgb: 43, 58, 54;
  --bs-link-hover-color: var(--bum-eisblau);
  --bs-link-hover-color-rgb: 62, 122, 158;
  --bs-btn-border-radius: var(--radius-sm);
  --bs-modal-border-radius: var(--radius-lg);
}

body {
  font-family: var(--bum-font-body);
  font-weight: 400;
  line-height: 1.55;
}

h1, h2, h3, .bum-display {
  font-family: var(--bum-font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.005em;
}

h4, h5, h6 {
  font-family: var(--bum-font-body);
  font-weight: 600;
  line-height: 1.3;
}

.bum-mono {
  font-family: var(--bum-font-mono);
}

.btn {
  font-family: var(--bum-font-body);
  font-weight: 600;
  font-size: 0.95rem;
}