/* NEW-EE Design-Tokens – einzige Quelle für Farben, Typografie, Abstände,
   Radien, Schatten, Ebenen und Bewegung des Jobportals (jobs.new-ee.com,
   Kandidaten-, Firmen- und Admin-Portal). Spezifikation:
   docs/reconstruction/05_DESIGN_SYSTEM.md. Diese Datei wird auf jeder Seite
   als erstes Stylesheet geladen. Bestehende Variablen (--ee-red, --ee-gray-*,
   --fp-*) bleiben vorerst in ihren Dateien; Komponenten wandern schrittweise
   auf die semantischen Namen hier um. Keine Hex-Werte außerhalb dieser Datei
   (Ziel). */

:root {
  /* ── Farben: Marke und Aktion ─────────────────────────────────────── */
  --ee-color-brand: #FF3131;                 /* Flächen, Icons, Rahmen, Fokus – kein Fließtext */
  --ee-color-brand-tint: #FFF0F0;
  --ee-color-action-primary: #E02020;        /* Textlinks, Primärbutton (4,78:1 auf Weiß) */
  --ee-color-action-primary-hover: #CC2020;
  --ee-color-action-on-primary: #FFFFFF;

  /* ── Farben: Text ─────────────────────────────────────────────────── */
  --ee-color-text-primary: #18181B;
  --ee-color-text-primary-soft: #27272A;
  --ee-color-text-strong: #3F3F46;
  --ee-color-text-secondary: #52525B;
  --ee-color-text-muted: #68686F;            /* untere Grenze für Text (5,53:1) */
  --ee-color-text-placeholder: #9C9CA3;      /* nur ::placeholder und deaktivierte Icons */
  --ee-color-text-inverse: #FFFFFF;
  --ee-color-text-link: var(--ee-color-action-primary);

  /* ── Farben: Flächen und Rahmen ───────────────────────────────────── */
  --ee-color-surface-0: #FFFFFF;
  --ee-color-surface-1: #FAFAF8;
  --ee-color-surface-2: #F1F1EF;
  --ee-color-surface-warm: #FFF9F8;          /* warme Sektionsfläche (vorher --fp-warm) */
  --ee-color-surface-inverse: #18181B;
  --ee-color-border-subtle: #F1F1EF;
  --ee-color-border-default: #E7E7E5;
  --ee-color-border-strong: #D9D9D6;
  --ee-color-backdrop: rgba(24, 24, 27, 0.4);

  /* ── Farben: Status (Text/Icon + Tint, Kontrast ≥ 4,5:1 auf dem Tint) ─ */
  --ee-color-status-success: #15803D;
  --ee-color-status-success-bg: #EAF8EF;
  --ee-color-status-success-icon: #18A957;
  --ee-color-status-warn: #B45309;
  --ee-color-status-warn-bg: #FEF3C7;
  --ee-color-status-error: #B91C1C;
  --ee-color-status-error-bg: #FEF2F2;
  --ee-color-status-info: #2C5670;
  --ee-color-status-info-bg: #EDF3F8;
  --ee-color-status-info-icon: #4B7FA3;
  --ee-color-status-neutral: var(--ee-color-text-secondary);
  --ee-color-status-neutral-bg: var(--ee-color-surface-2);

  /* ── Fokus ────────────────────────────────────────────────────────── */
  --ee-color-focus: #FF3131;
  --ee-color-focus-inverse: #FFFFFF;

  /* ── Typografie ───────────────────────────────────────────────────── */
  --ee-font-sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ee-text-xs: 0.8125rem;   /* 13 px – Minimum */
  --ee-text-sm: 0.875rem;    /* 14 px */
  --ee-text-base: 1rem;      /* 16 px – alle Eingabefelder */
  --ee-text-md: 1.125rem;    /* 18 px */
  --ee-text-lg: 1.375rem;    /* 22 px */
  --ee-text-xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --ee-text-2xl: clamp(2rem, 1.4rem + 3vw, 3rem);
  --ee-text-display: clamp(2.375rem, 1.1rem + 3vw, 3.5rem);
  --ee-leading-tight: 1.2;
  --ee-leading-snug: 1.4;
  --ee-leading-normal: 1.6;

  /* ── Abstände (4-px-Raster) ───────────────────────────────────────── */
  --ee-space-1: 0.25rem;
  --ee-space-2: 0.5rem;
  --ee-space-3: 0.75rem;
  --ee-space-4: 1rem;
  --ee-space-5: 1.5rem;
  --ee-space-6: 2rem;
  --ee-space-7: 3rem;
  --ee-space-8: 4rem;
  --ee-space-component-sm: var(--ee-space-3);
  --ee-space-component-md: var(--ee-space-4);
  --ee-space-component-lg: var(--ee-space-5);
  --ee-space-section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --ee-space-gutter: clamp(1.25rem, 4vw, 3.5rem);  /* Seitenrand (Wert der Startseite) */
  --ee-space-stack-form: var(--ee-space-5);

  /* ── Layout: Container-Breiten (05 §2.11) ─────────────────────────── */
  --ee-container-max-public: 1360px;         /* Startseite, Board, Marketing */
  --ee-container-max-portal: 1280px;
  --ee-container-max-content: 820px;         /* Stellendetail, Inhaltsseiten */

  /* ── Größen ───────────────────────────────────────────────────────── */
  --ee-size-control: 48px;                   /* Eingabefelder, Suchfeld */
  --ee-size-control-compact: 40px;           /* Admin-Tabellenfilter */

  /* ── Radien ───────────────────────────────────────────────────────── */
  --ee-radius-xs: 4px;
  --ee-radius-control: 8px;
  --ee-radius-card: 12px;
  --ee-radius-sheet: 16px;
  --ee-radius-pill: 999px;

  /* ── Schatten (ein Grundton 24,24,27) ─────────────────────────────── */
  --ee-shadow-1: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px rgba(24, 24, 27, 0.05);
  --ee-shadow-2: 0 2px 4px rgba(24, 24, 27, 0.05), 0 16px 40px rgba(24, 24, 27, 0.09);
  --ee-shadow-3: 0 24px 64px rgba(24, 24, 27, 0.18);

  /* ── Ebenen (ausschließlich diese Werte) ──────────────────────────── */
  --ee-z-base: 0;
  --ee-z-raised: 10;
  --ee-z-sticky: 100;
  --ee-z-header: 200;
  --ee-z-dropdown: 300;
  --ee-z-overlay-backdrop: 400;
  --ee-z-overlay: 410;
  --ee-z-banner: 500;
  --ee-z-dialog: 600;
  --ee-z-toast: 700;
  --ee-z-skip: 800;

  /* ── Bewegung ─────────────────────────────────────────────────────── */
  --ee-duration-fast: 120ms;
  --ee-duration-base: 200ms;
  --ee-duration-slow: 320ms;
  --ee-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ee-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ee-ease-exit: cubic-bezier(0.4, 0, 1, 1);

}

/* ── Übergangs-Brücke für Bestandsnamen ──────────────────────────────────
   editorial.css (auch von www geladen, dort ohne diese Datei) definiert in
   :root eigene Farb-, Schrift- und Layout-Variablen (--ee-red, --ee-gray-*,
   --ee-serif, --ee-max-w …). Auf dem Jobs-Host zeigen diese Namen auf die
   Tokens oben – ein Wert je Rolle, egal ob eine Seite body.ee-front,
   .ee-portal-body oder .adm-body trägt. Scope body: gewinnt per Vererbung
   über editorial.css :root, unabhängig von der Stylesheet-Reihenfolge.
   Ersetzt den .ee-front-Variablenblock aus jobs-home.css. Die Brücke fällt,
   sobald kein Jobs-CSS mehr einen Bestandsnamen referenziert (tokens.test.js). */
body {
  --ee-red: var(--ee-color-brand);
  --ee-red-hover: var(--ee-color-action-primary);
  --ee-blue: var(--ee-color-status-info-icon);
  --ee-white: var(--ee-color-surface-0);
  --ee-gray-50: var(--ee-color-surface-1);
  --ee-gray-100: var(--ee-color-surface-2);
  --ee-gray-200: var(--ee-color-border-default);
  --ee-gray-300: var(--ee-color-border-strong);
  --ee-gray-400: var(--ee-color-text-placeholder);
  --ee-gray-500: var(--ee-color-text-muted);
  --ee-gray-600: var(--ee-color-text-secondary);
  --ee-gray-700: var(--ee-color-text-strong);
  --ee-gray-800: var(--ee-color-text-primary-soft);
  --ee-gray-900: var(--ee-color-text-primary);
  --ee-success: var(--ee-color-status-success);       /* Text/Icon-Grün mit AA; reine Icons nutzen -icon */
  --ee-success-bg: var(--ee-color-status-success-bg);
  --ee-warn: var(--ee-color-status-warn);
  --ee-warn-bg: var(--ee-color-status-warn-bg);
  --ee-info: var(--ee-color-status-info-icon);
  --ee-info-bg: var(--ee-color-status-info-bg);
  --ee-serif: var(--ee-font-sans);                    /* im Jobportal gibt es keine Serife (05 §1.2) */
  --ee-sans: var(--ee-font-sans);
  --ee-max-w: var(--ee-container-max-public);
  --ee-px: var(--ee-space-gutter);
  --ee-radius-sm: var(--ee-radius-xs);
  --ee-radius-md: var(--ee-radius-control);
  --ee-radius-lg: var(--ee-radius-card);
  --ee-transition: var(--ee-duration-slow) var(--ee-ease-standard);
  --ee-ease-out-expo: var(--ee-ease-emphasized);
}

/* Bewegung respektiert die Systemeinstellung – global, nicht je Komponente. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ein sichtbarer Fokusring für alle Seiten (2.4.7/2.4.11). Komponenten dürfen
   nur die Inversion auf roten Flächen abweichen. */
:focus-visible {
  outline: 2px solid var(--ee-color-focus);
  outline-offset: 2px;
}
.ee-btn-primary:focus-visible,
.ee-button--primary:focus-visible {
  outline-color: var(--ee-color-focus-inverse);
  outline-offset: -4px;
}