/* GHP Steuerberatung — Design-Token für das Karriereportal
   Quelle: GHP-Design-System v2.0 (SecondBrain/Skills/Shared/GHP-Design/design-system/02–04).
   Alle Farben werden NUR hier definiert; übrige CSS-Dateien verwenden ausschließlich var(--…). */

:root {
  /* Basisfarben */
  --color-mittelpetrol: #01545C;
  --color-hellpetrol: #6A878A;
  --color-lime: #D9F80A;
  --color-lime-soft: #F9FED6;
  --color-hellgrau: #F3F2F1;
  --color-weiss: #FFFFFF;
  --color-petrol-dunkel: #013E44;          /* Hover-Abdunklung für Petrol-Flächen */
  /* Status-Farben — nur UI-Feedback, nie Marken-Akzent */
  --color-success: #2F7D62;
  --color-success-soft: #E4F1EB;
  --color-info-soft: #E2ECED;

  /* Flächen */
  --surface-page: var(--color-weiss);
  --surface-highlight: var(--color-mittelpetrol);
  --surface-subtle: var(--color-hellgrau);
  --surface-card: var(--color-weiss);
  --surface-hinweis: var(--color-lime-soft);
  --highlight-marker: var(--color-lime-soft);     /* Marker hinter Schlüsselsätzen (Design-System) */
  --surface-info: var(--color-info-soft);
  --surface-footer: var(--color-mittelpetrol);
  --surface-header: var(--color-mittelpetrol);

  /* Text */
  --text-body: var(--color-mittelpetrol);
  --text-heading: var(--color-mittelpetrol);
  --text-on-highlight: var(--color-weiss);  --text-footer: var(--color-weiss);

  /* Links */
  --link-color: var(--color-mittelpetrol);
  --link-hover-bg: var(--color-lime);          /* Lime nie als Schrift auf Weiß → Hover als Fläche */
  --link-on-dark: var(--color-lime);
  --link-on-dark-hover: var(--color-weiss);

  /* Buttons */
  --button-bg: var(--color-mittelpetrol);
  --button-fg: var(--color-weiss);
  --button-hover-bg: var(--color-lime);
  --button-hover-fg: var(--color-mittelpetrol);
  --button-lime-bg: var(--color-lime);
  --button-lime-fg: var(--color-mittelpetrol);
  --button-lime-hover-bg: var(--color-weiss);
  --button-lime-hover-fg: var(--color-mittelpetrol);

  /* Navigation */
  --nav-link: var(--color-weiss);
  --nav-link-active: var(--color-lime);

  /* Kennzeichnungen */
  --badge-neu-bg: var(--color-lime);
  --badge-neu-fg: var(--color-mittelpetrol);
  --badge-offen-bg: var(--color-mittelpetrol);
  --badge-offen-fg: var(--color-weiss);
  --badge-initiativ-bg: var(--color-info-soft);
  --badge-initiativ-fg: var(--color-mittelpetrol);
  --rand-dezent: var(--color-hellgrau);
  --rand-stark: var(--color-mittelpetrol);

  /* Fokus (WCAG: sichtbar auf hellen und dunklen Flächen) */
  --focus-ring: var(--color-mittelpetrol);
  --focus-halo: var(--color-lime);
  --focus-ring-on-dark: var(--color-lime);

  /* Typografie */
  --font-display: 'TT Ramillas', Georgia, serif;
  --font-body: 'Metro Sans', 'Helvetica Neue', Arial, sans-serif;

  --text-h1: clamp(34px, 5vw, 56px);
  --text-h2: clamp(28px, 3.6vw, 40px);
  --text-h3: clamp(22px, 2.4vw, 28px);
  --text-h4: 20px;
  --text-lead: 20px;
  --text-base: 17px;
  --text-small: 16px;            /* Portal-Vorgabe: nie unter 16 px (Design-System: 14 px) */

  --leading-heading: 1.15;
  --leading-body: 1.65;
  --tracking-caps: 0.12em;
  --zeilenlaenge: 68ch;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-section: clamp(48px, 8vw, 96px);

  /* Radien, Schatten */
  --radius-button: 999px;
  --radius-field: 6px;
  --radius-card: 12px;
  --shadow-card: 0 8px 30px rgba(1, 84, 92, 0.10);
  --shadow-card-hover: 0 12px 40px rgba(1, 84, 92, 0.16);
  --shadow-leiste: 0 -6px 20px rgba(1, 84, 92, 0.18);

  /* Hero: Petrol-Verlauf nur dort, wo der Text liegt (links bzw. unten) */
  --hero-verlauf-seitlich: linear-gradient(90deg, rgba(1, 84, 92, 0.94) 0%, rgba(1, 84, 92, 0.82) 38%, rgba(1, 84, 92, 0.15) 68%, rgba(1, 84, 92, 0) 80%);
  --hero-verlauf-banner: linear-gradient(0deg, rgba(1, 84, 92, 0.95) 0%, rgba(1, 84, 92, 0.7) 14%, rgba(1, 84, 92, 0) 32%);
  --hero-verlauf-unten:linear-gradient(0deg, rgba(1, 84, 92, 1) 0%, rgba(1, 84, 92, 0.6) 22%, rgba(1, 84, 92, 0) 50%);

  --container-max: 1200px;
  --uebergang: 0.25s ease;
}