/*
|--------------------------------------------------------------------------
| Project Pierre – Zentrale Designvariablen
|--------------------------------------------------------------------------
|
| Diese Datei definiert alle gemeinsamen Farben, Schriften, Abstände,
| Größen, Rahmen, Schatten und Übergänge des öffentlichen Frontends.
|
| Alle Seiten verwenden ausschließlich diese Werte.
|
*/

:root {

    /*
    |--------------------------------------------------------------------------
    | Farben
    |--------------------------------------------------------------------------
    */

    --color-black: #07090d;
    --color-black-soft: #0d1118;

    --color-midnight-blue: #101c33;
    --color-midnight-blue-dark: #0a1222;
    --color-midnight-blue-soft: #172744;

    --color-white: #ffffff;
    --color-white-soft: #f4f1ea;

    --color-text: #f3f0e9;
    --color-text-soft: #c7c3ba;
    --color-text-muted: #918d84;

    --color-accent: #d6aa62;
    --color-accent-light: #efd39a;
    --color-accent-dark: #a97b39;

    --color-border: rgba(214, 170, 98, 0.42);
    --color-border-soft: rgba(255, 255, 255, 0.09);

    --color-overlay-dark: rgba(7, 9, 13, 0.78);
    --color-overlay-soft: rgba(10, 18, 34, 0.52);

    /*
    |--------------------------------------------------------------------------
    | Schriftarten
    |--------------------------------------------------------------------------
    */

    --font-family-body:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    --font-family-heading:
        Georgia,
        "Times New Roman",
        serif;

    /*
    |--------------------------------------------------------------------------
    | Schriftgrößen
    |--------------------------------------------------------------------------
    */

    --font-size-xs: 0.78rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.35rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 3.4rem;

    /*
    |--------------------------------------------------------------------------
    | Schriftgewichte
    |--------------------------------------------------------------------------
    */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /*
    |--------------------------------------------------------------------------
    | Zeilenhöhen
    |--------------------------------------------------------------------------
    */

    --line-height-tight: 1.15;
    --line-height-normal: 1.55;
    --line-height-relaxed: 1.8;

    /*
    |--------------------------------------------------------------------------
    | Abstände
    |--------------------------------------------------------------------------
    */

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;

    /*
    |--------------------------------------------------------------------------
    | Container
    |--------------------------------------------------------------------------
    */

    --container-width: 1450px;
    --container-padding: 24px;

    /*
    |--------------------------------------------------------------------------
    | Rahmen
    |--------------------------------------------------------------------------
    */

    --border-width: 1px;

    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;

    /*
    |--------------------------------------------------------------------------
    | Schatten
    |--------------------------------------------------------------------------
    */

    --shadow-soft:
        0 20px 60px rgba(0, 0, 0, 0.28);

    --shadow-strong:
        0 30px 90px rgba(0, 0, 0, 0.48);

    /*
    |--------------------------------------------------------------------------
    | Übergänge
    |--------------------------------------------------------------------------
    */

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 450ms ease;
}

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    :root {
        --container-padding: 20px;
    }

}

/*
|--------------------------------------------------------------------------
| Smartphone
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    :root {
        --container-padding: 16px;

        --font-size-md: 1.05rem;
        --font-size-lg: 1.2rem;
        --font-size-xl: 1.75rem;
        --font-size-2xl: 2.6rem;

        --space-8: 3.5rem;
        --space-9: 4.5rem;
    }

}