/* design_tokens.css - Haas+Sohn Corporate Design Tokens */

/* Local font-face declarations (DSGVO compliant) */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/jost_200.ttf') format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/jost_300.ttf') format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jost_400.ttf') format('truetype');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/jost_700.ttf') format('truetype');
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivoblack.ttf') format('truetype');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/caveat_600.ttf') format('truetype');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/caveat_700.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/mulish_400.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/mulish_500.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/mulish_600.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/mulish_700.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/mulish_800.ttf') format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/mulish_900.ttf') format('truetype');
}

:root {
  /* Haas+Sohn Primary Colors */
  --color-grey-premium: #4C4F54; /* Premium Grey */
  --color-red-home: #C31632;     /* Home Red */
  --color-white: #FFFFFF;
  --color-light-grey: #F5F5F5;
  --color-border: #DCDCDC;
  
  /* Category Secondary Colors */
  --kategorie-kaminoefen: #527656;        /* Green */
  --kategorie-wasser-kaminoefen: #2E7680; /* Teal */
  --kategorie-einsaetze: #88394C;         /* Burgundy */
  --kategorie-herde: #DB6134;             /* Orange */
  --kategorie-pelletoefen: #C09440;       /* Ochre */
  --kategorie-wasser-pelletoefen: #E1BB6E;/* Mustard */
  --kategorie-oeloefen: #7A523A;          /* Brown */
  --kategorie-dauerbrand: #817D82;        /* Dark Grey */
  --kategorie-zubehoer: #DCDCDC;          /* Light Grey */

  /* Fonts */
  --font-main: 'Jost', 'Avenir Next', 'Avenir', sans-serif;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-light-grey);
  color: var(--color-grey-premium);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Clean Haas+Sohn Logo Component */
.hs-logo-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-main);
  text-transform: uppercase;
}
.hs-logo-main {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.15em;
  display: flex;
  align-items: center;
  color: var(--color-grey-premium);
  line-height: 1;
  margin: 0;
}
.hs-logo-plus {
  color: var(--color-red-home);
  font-size: 28px;
  font-weight: 400;
  margin: 0 4px;
  line-height: 1;
}
.hs-logo-claim {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--color-grey-premium);
  margin-top: 4px;
  opacity: 0.8;
}

/* Sketched "GUTE ZEIT" Motto Font Style */
.motto-gute-zeit {
  font-family: var(--font-main);
  font-size: 64px;
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-grey-premium);
  text-align: center;
  margin: 20px 0;
  position: relative;
}

/* Custom Shaped Icon Block (2 rounded, 2 sharp corners) */
.usp-icon-block {
  width: 40px;
  height: 40px;
  background-color: var(--color-light-grey);
  color: var(--color-grey-premium);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  /* Top-left & Bottom-right rounded, others sharp */
  border-radius: 8px 0px 8px 0px;
  margin: 4px;
  transition: transform 0.2s ease;
}
.usp-icon-block:hover {
  transform: scale(1.05);
}
.usp-icon-block.grey-version {
  background-color: var(--color-grey-premium);
}