/* =========================================================
   GLOBAL COLOR SYSTEM
   Gilt für alle Domains

   Blaugrau = Struktur

   text-primary
   nav-link
   footer-bg
   borders
   divider

   Petrol = Marke & Interaktion

   links
   hover
   focus
   active icons
   accent lines

   ========================================================= */

   :root {

  /* ======================================================
     BRAND COLORS
     ====================================================== */

     --brand-orange: var(--warm);   /* Hauptmarke */
     --brand-orange-dark: var(--warm-1);
     --brand-orange-soft: var(--warm2);
     --brand-orange-light: var(--warm5);

     --brand-structure: var(--cool); /* Blaugrau */
     --brand-structure-dark: var(--cool-2);
     --brand-structure-soft: var(--cool2);
     --brand-structure-light: var(--cool9);

     --brand-development: var(--fresh); /* Grün */
     --brand-development-soft: var(--fresh2);

     --brand-alert: var(--alert);
     --brand-accent: var(--petrol1);


  /* ======================================================
     TEXT COLORS
     ====================================================== */

     --text-primary: var(--brand-structure-dark);
     --text-secondary: var(--brand-structure);
     --text-muted: var(--brand-structure-soft);
     --text-inverse: var(--brand-structure-light);

  /* ======================================================
     BASE BACKGROUNDS
     ====================================================== */

     --bg-main: var(--cool8);
     --bg-soft: var(--cool7);
     --bg-light: var(--cool9);

  /* ======================================================
     CARD SYSTEM
     ====================================================== */

     --bg-card: var(--cool9);
     --bg-card-emphasis: #ffffff;

     --border-subtle: rgba(0,0,0,0.05);

  /* ======================================================
     DEFAULT BUTTONS
     ====================================================== */

     --btn-bg: var(--petrol-2);
     --btn-hover-bg: var(--petrol6);
     --btn-text: var(--text-inverse);
     --btn-hover-text: var(--text-primary);
     --btn-border: var(--petrol-2);

  /* ======================================================
     DEFAULT FORMS
     ====================================================== */

     --input-text: var(--text-primary);
     --input-bg: var(--petrol6);
     --input-border: var(--petrol2);
     --input-focus-border: var(--petrol2);
     --focus-ring: var(--petrol4);


  /* ======================================================
     GLOBAL LINKS
     ====================================================== */

     --link-color: var(--petrol1);
     --link-hover: var(--petrol-1);
     --nav-link: hsl(208,16%,23%);
     --nav-link-hover: hsl(190,37%,29%);


  /* ======================================================
     CTA BASE SYSTEM
     Wird domain-spezifisch überschrieben
     ====================================================== */

     --cta-primary-bg: var(--brand-orange);
     --cta-primary-text: var(--cool9);

     --cta-secondary-bg: var(--brand-structure);
     --cta-secondary-text: var(--warm5);


  /* ======================================================
     STATUS COLORS
     ====================================================== */

     --color-success: var(--brand-development);
     --color-warning: var(--brand-alert);
     --color-info: var(--brand-structure-light);

  /* ======================================================
     CONTENT MODULE COLORS
     ====================================================== */

     --box-reflection-bg: var(--brand-orange-soft);
     --box-reflection-border: var(--brand-orange-dark);

     --box-practice-bg: var(--brand-development-soft);
     --box-practice-border: var(--brand-development);

  /* ======================================================
     HEADER / FOOTER DEFAULT
     ====================================================== */

     --header-bg: var(--bg-light);
     --header-text: var(--text-primary);

     --footer-bg: var(--brand-structure);
     --footer-text: var(--cool9);
     --footer-link: var(--cool7);

     --footer-link-hover: var(--cool9);

     --siteinfo-bg: var(--brand-structure-dark);
     --siteinfo-text: var(--cool9);
     --siteinfo-link: var(--cool9);


  /* ======================================================
     TABLES DEFAULT
     ====================================================== */

     --table-border: var(--cool8);
     --table-header-bg: var(--cool9);


  /* ======================================================
     DIVIDERS DEFAULT
     ====================================================== */
     --divider-color: var(--cool8);


  }