/**
 * @file
 * Design Tokens & CSS Custom Properties for Adler-Apotheke
 */

:root {
  /* ==========================================================================
     CI-Farben der Adler-Apotheke (WCAG 2.1 AA konform validiert)
     ========================================================================== */
  --adl-purple: #70006e;               /* Kontrast 7.2:1 auf Weiß (AAA) */
  --adl-purple-brand: #80007e;         /* Originalmarkenfarbe */
  --adl-purple-hover: #550054;
  --adl-purple-light: #f5e8f5;

  --adl-green: #457d00;                /* Kontrast 4.6:1 auf Weiß (AA) */
  --adl-green-brand: #9abf0d;          /* Heller Akzent / Deko */
  --adl-green-hover: #376300;
  --adl-green-bg: #f2f8e4;
  --adl-green-border: #c8e48b;

  --adl-red: #c8102e;                  /* Deutsches Apotheken-A-Rot (Kontrast 4.8:1) */
  --adl-red-hover: #a10d25;
  --adl-red-light: #fcebed;

  /* ==========================================================================
     Neutrale Farbpalette (Hoher Lesekontrast für Sehbehinderte)
     ========================================================================== */
  --adl-text-main: #1f2421;            /* Tiefes Schwarz-Anthrazit (Kontrast 14.8:1) */
  --adl-text-muted: #495057;           /* Kontrast 5.1:1 auf Weiß (AA) */
  --adl-bg-body: #ffffff;
  --adl-bg-surface: #f8f9fa;
  --adl-bg-surface-elevated: #ffffff;
  --adl-border-color: #dee2e6;
  --adl-border-subtle: #e9ecef;

  /* ==========================================================================
     Barrierefreie Typografie & Dynamische Skalierung
     ========================================================================== */
  --adl-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --adl-font-scale: 1;                 /* Wird durch Font-Resizer (A / A+ / A++) gesteuert */
  
  --adl-font-size-base: 1.125rem;      /* 18px Basisgröße bei Scale 1, 20.7px bei 1.15, 23.4px bei 1.30 */
  --adl-line-height-base: 1.6;
  
  --adl-font-size-sm: 0.9375rem;       /* 15px */
  --adl-font-size-lg: 1.25rem;         /* 20px */
  --adl-font-size-h3: 1.5rem;          /* 24px */
  --adl-font-size-h2: 1.875rem;        /* 30px */
  --adl-font-size-h1: 2.25rem;         /* 36px */

  /* ==========================================================================
     UI-Komponenten & Radien
     ========================================================================== */
  --adl-radius-sm: 0.375rem;
  --adl-radius-md: 0.5rem;
  --adl-radius-lg: 0.75rem;
  --adl-radius-full: 9999px;

  --adl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --adl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --adl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --adl-focus-ring: 0 0 0 4px rgba(112, 0, 110, 0.35);
  --adl-focus-ring-red: 0 0 0 4px rgba(200, 16, 46, 0.35);
}

/* Universelle proportionale Schriftgrößen-Skalierung für WCAG 2.1 AA (1.4.4) */
html {
  font-size: calc(100% * var(--adl-font-scale, 1));
  transition: font-size 0.2s ease-in-out;
}