/* ============================================================
   Friedhold Designsystem – Tokens & Schriften
   Quelle: specifications/design.md
   ============================================================ */

/* ---------- Schriften (lokal aus assets/fonts) ---------- */
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/Outfit/static/Outfit-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/Outfit/static/Outfit-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/Outfit/static/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/Outfit/static/Outfit-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/static/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/static/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter/static/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Markenfarben */
  --color-primary: #114B43;
  --color-action: #FAAC1A;
  --color-secondary: #8DA399;
  --color-background: #FAF8F5;
  --color-surface: #FFFFFF;

  /* Text */
  --color-text: #1A2421;
  --color-text-inverse: #FAF8F5;
  --color-text-muted: #4C5A55;

  /* Status */
  --color-success: #62A13A;
  --color-warning: #D4AC0D;
  --color-error: #992532;
  --color-info: #51587F;

  /* Interaktion */
  --color-action-hover: #EF9F10;
  --color-action-active: #DE9204;
  --color-primary-tint-hover: rgba(17, 75, 67, 0.08);
  --color-primary-tint-active: rgba(17, 75, 67, 0.14);
  --color-disabled-surface: #EFEAE2;
  --focus-ring: 2px solid #114B43;

  /* Diagramme */
  --chart-1: #114B43; --chart-2: #8DA399; --chart-3: #51587F;
  --chart-4: #3E7A6F; --chart-5: #D4AC0D; --chart-highlight: #FAAC1A;

  /* Form */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-full: 999px;
  --shadow-card: 0 2px 8px rgba(26, 36, 33, 0.08);
  --shadow-card-hover: 0 4px 14px rgba(26, 36, 33, 0.12);

  /* Bewegung */
  --transition: 200ms ease;

  /* Abstände (4-px-Raster) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  /* Schrift */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
}