/* =============================================================
   ZeugnisKlar – Design Tokens (lohnklar.de Corporate Identity)
   ============================================================= */
:root {
  /* Farben */
  --color-bg:         #F9FAFB;
  --color-surface:    #FFFFFF;
  --color-border:     #E5E7EB;
  --color-border-strong: #D1D5DB;
  --color-text:       #111827;
  --color-muted:      #6B7280;
  --color-accent:     #059669;   /* lohnklar Grün */
  --color-accent-h:   #047857;   /* hover */
  --color-accent-s:   #D1FAE5;   /* subtle bg */
  --color-accent-text:#065F46;   /* auf hellem BG lesbar */
  --color-warn:       #D97706;
  --color-warn-bg:    #FEF3C7;
  --color-warn-border:#FCD34D;
  --color-error:      #DC2626;
  --color-error-bg:   #FEF2F2;
  --color-success:    #059669;
  --color-success-bg: #F0FDF4;

  /* Hochkontrast-Modus (überschreibt alles) */
  --color-bg-hc:      #FFFFFF;
  --color-text-hc:    #000000;
  --color-accent-hc:  #004D00;
  --color-border-hc:  #000000;

  /* Typografie */
  --font-sans:        'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                      'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */

  --font-normal: 400;
  --font-medium: 500;
  --font-semi:   600;
  --font-bold:   700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* Abstände */
  --sp-1:  0.25rem;  /* 4px  */
  --sp-2:  0.5rem;   /* 8px  */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.25rem;  /* 20px */
  --sp-6:  1.5rem;   /* 24px */
  --sp-8:  2rem;     /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */

  /* Radien */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Schatten */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.02);

  /* Übergänge */
  --transition: 150ms ease;
  --transition-md: 250ms ease;

  /* Layout */
  --max-width: 1120px;
  --content-padding: var(--sp-6);
  --card-padding: var(--sp-6);
}

/* Hochkontrast */
body[data-contrast="high"] {
  --color-bg:       var(--color-bg-hc);
  --color-surface:  #FFFFFF;
  --color-text:     var(--color-text-hc);
  --color-muted:    #111111;
  --color-border:   var(--color-border-hc);
  --color-accent:   var(--color-accent-hc);
  --color-accent-h: #003300;
  --shadow-sm: 0 0 0 1px #000000;
  --shadow:    0 0 0 2px #000000;
  --shadow-md: 0 0 0 2px #000000;
}

/* Große Schrift */
body[data-font="large"] { font-size: 18px; }
body[data-font="normal"] { font-size: 16px; }

/* Privacy Blur */
body[data-privacy="on"] .privacy-sensitive {
  filter: blur(5px);
  transition: filter var(--transition-md);
}
body[data-privacy="on"] .privacy-sensitive:focus {
  filter: none;
}