/* =========================================================
   VARIABLES.CSS - Design-Tokens & CSS Custom Properties
   Heinz Autocenter GmbH & Co. KG - MODX 3 Theme
   ========================================================= */

:root {
    /* --- Schriften --- */
    --display-font: 'Open Sans', ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Noto Sans", sans-serif;
    --body-font: 'Poppins', ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Noto Sans", sans-serif;
    --body-font-size: 16px;

    /* --- Primärfarbe (Petrol-Blau) --- */
    --primary-colour:       #377597;
    --primary-text-colour:  #ffffff;
    --primary-25-colour:    #F5F8FA;
    --primary-50-colour:    #E9F0F4;
    --primary-100-colour:   #C3D6E0;
    --primary-200-colour:   #B7CDDA;
    --primary-300-colour:   #8BAFC3;
    --primary-400-colour:   #5D8FAB;
    --primary-600-colour:   #2C5E79;
    --primary-700-colour:   #265168;
    --primary-800-colour:   #1F4255;
    --primary-900-colour:   #1B394A;
    --primary-950-colour:   #11232D;

    /* --- Sekundärfarbe (Dunkelgrau) --- */
    --secondary-colour:      #333333;
    --secondary-text-colour: #ffffff;
    --secondary-25-colour:   #F5F5F5;
    --secondary-50-colour:   #E9E9E9;
    --secondary-100-colour:  #C2C2C2;
    --secondary-200-colour:  #B6B6B6;
    --secondary-300-colour:  #898989;
    --secondary-400-colour:  #5A5A5A;
    --secondary-600-colour:  #292929;
    --secondary-700-colour:  #232323;
    --secondary-800-colour:  #1D1D1D;
    --secondary-900-colour:  #191919;
    --secondary-950-colour:  #0F0F0F;

    /* --- Status-Farben --- */
    --success-colour: #059669;
    --warning-colour: #d97706;
    --error-colour:   #dc2626;

    /* --- Topbar --- */
    --topbar-background-colour: #431c53;
    --topbar-text-colour:       #ffffff;

    /* --- Footer --- */
    --footer-background-colour: #333333;
    --footer-text-colour:       #ffffff;

    /* --- Layout & Komponenten --- */
    --header-height:    5rem;
    --aspect-height:    3;
    --aspect-width:     4;
    --button-rounding:  0.5rem;
    --icon-rounding:    9999px;
    --image-rounding:   0.75rem;
    --button-size:      1.25rem;
    --button-weight:    600;
    --display-weight:   600;
    --subtitle-weight:  600;
}