/* ===========================================================
   BGM Termintool — BARMER CI 2026 Theme
   Wahrheits-Datenbasis: THEME-TOKENS.md (Phase 2a.2)
   Wird zentral von api.termine.datenschutzfabrik.de ausgeliefert
   und in allen 6 Frontends per <link rel="stylesheet"> eingebunden.
   =========================================================== */

/* ---------- Webfont: BARMER Beat Screen ---------- */

@font-face {
  font-family: 'BARMER Beat Screen';
  src: url('/assets/fonts/barmer-beat/BARMERBeatScreen-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BARMER Beat Screen';
  src: url('/assets/fonts/barmer-beat/BARMERBeatScreen-LightItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'BARMER Beat Screen';
  src: url('/assets/fonts/barmer-beat/BARMERBeatScreen-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BARMER Beat Screen';
  src: url('/assets/fonts/barmer-beat/BARMERBeatScreen-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'BARMER Beat Screen';
  src: url('/assets/fonts/barmer-beat/BARMERBeatScreen-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BARMER Beat Screen';
  src: url('/assets/fonts/barmer-beat/BARMERBeatScreen-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'BARMER Beat Screen';
  src: url('/assets/fonts/barmer-beat/BARMERBeatScreen-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BARMER Beat Screen';
  src: url('/assets/fonts/barmer-beat/BARMERBeatScreen-BlackItalic.woff2') format('woff2');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ---------- Design-Tokens ---------- */

:root {
  /* Primary Brand */
  --color-brand-green:        #24c268;
  --color-brand-green-light:  #cdffcf;

  /* Interaction */
  --color-interactive:        #8739f4;
  --color-interactive-hover:  #6b25c5;
  --color-interactive-bg:     #e5dcff;

  /* Sekundär-Hintergründe */
  --color-secondary-greige:   #f2f0e5;
  --color-secondary-rose:     #f2dadd;
  --color-secondary-green:    #cdffcf;

  /* Text */
  --color-text:               #212121;
  --color-text-muted:         #525252;
  --color-text-disabled:      #a6a6a6;

  /* Hintergrund */
  --color-bg:                 #ffffff;
  --color-bg-elevated:        #f9f7ef;

  /* Status */
  --color-success:            #24c268;
  --color-success-bg:         #cdffcf;
  --color-warning:            #dbbd00;
  --color-error:              #d0281d;
  --color-error-bg:           #fee9e5;
  --color-info:               #51707d;

  /* Spezial */
  --color-accent-yellow:      #bdff00;
  --color-digital-green:      #33f373;

  /* Grau-Skala */
  --color-gray-50:  #f3f3f3;
  --color-gray-100: #e0e0e0;
  --color-gray-200: #bfbfbf;
  --color-gray-300: #a6a6a6;
  --color-gray-400: #8f8f8f;
  --color-gray-500: #6c6c6c;
  --color-gray-600: #525252;
  --color-gray-700: #3e3e3e;
  --color-gray-800: #2c2c2c;
  --color-gray-900: #212121;

  /* Form */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Typografie */
  --font-family-base: 'BARMER Beat Screen', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Body-Reset ---------- */

body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background: var(--color-bg);
  text-align: left;
}

/* ---------- Material-Elevation deaktivieren ---------- */

md-card,
md-dialog,
md-toolbar,
md-sidenav,
.md-button.md-raised,
.md-button.md-fab {
  box-shadow: none !important;
}

/* ---------- Material Border-Radius nach Token-System ---------- */

md-card    { border-radius: var(--radius-md); }
md-dialog  { border-radius: var(--radius-lg); }
.md-button { border-radius: var(--radius-sm); }
md-input-container input,
md-input-container textarea { border-radius: var(--radius-xs); }
.appointment-banner,
.hero-section { border-radius: var(--radius-xl); }
md-chips md-chip { border-radius: var(--radius-pill); }

/* ---------- Focus-State (Barrierefreiheit) ---------- */

*:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 2px;
}