/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* ====================================
   FLUID CSS FRAMEWORK FÜR BRICKS BUILDER
   ==================================== */

:root {
    /* ====================================
     KONFIGURATION
     ==================================== */

    /* Fluid Space Scale (rem basiert) */
    --fluid-min-width: 20rem;
    /* 320px */
    --fluid-max-width: 90rem;
    /* 1440px */
    --fluid-screen: 100vi;
    /* Viewport Inline (moderne Einheit) */

    /* Typography Base */
    --font-size-min: 1rem;
    /* 16px */
    --font-size-max: 1.125rem;
    /* 18px */

    /* Spacing Base */
    --space-min: 0.5rem;
    /* 8px */
    --space-max: 0.75rem;
    /* 12px */

    /* Typography Scale */
    --ratio-min: 1.125;
    /* Minor Third */
    --ratio-max: 1.25;
    /* Major Third */


    /* ====================================
     FLUID TYPOGRAPHY
     ==================================== */

    /* Base fluid font-size */
    --text-base: clamp(var(--font-size-min),
            var(--font-size-min) + (var(--font-size-max) - var(--font-size-min)) * (var(--fluid-screen) - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)),
            var(--font-size-max));

    /* Typography scale */
    --text-xs: clamp(calc(var(--font-size-min) / var(--ratio-min) / var(--ratio-min)),
            calc(var(--font-size-min) / var(--ratio-min) / var(--ratio-min)) + (calc(var(--font-size-max) / var(--ratio-max) / var(--ratio-max)) - calc(var(--font-size-min) / var(--ratio-min) / var(--ratio-min))) * (var(--fluid-screen) - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)),
            calc(var(--font-size-max) / var(--ratio-max) / var(--ratio-max)));

    --text-s: clamp(calc(var(--font-size-min) / var(--ratio-min)),
            calc(var(--font-size-min) / var(--ratio-min)) + (calc(var(--font-size-max) / var(--ratio-max)) - calc(var(--font-size-min) / var(--ratio-min))) * (var(--fluid-screen) - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)),
            calc(var(--font-size-max) / var(--ratio-max)));

    --text-l: clamp(calc(var(--font-size-min) * var(--ratio-min)),
            calc(var(--font-size-min) * var(--ratio-min)) + (calc(var(--font-size-max) * var(--ratio-max)) - calc(var(--font-size-min) * var(--ratio-min))) * (var(--fluid-screen) - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)),
            calc(var(--font-size-max) * var(--ratio-max)));

    --text-xl: clamp(calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min)),
            calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min)) + (calc(var(--font-size-max) * var(--ratio-max) * var(--ratio-max)) - calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min))) * (var(--fluid-screen) - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)),
            calc(var(--font-size-max) * var(--ratio-max) * var(--ratio-max)));

    --text-2xl: clamp(calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min)),
            calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min)) + (calc(var(--font-size-max) * var(--ratio-max) * var(--ratio-max) * var(--ratio-max)) - calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min))) * (var(--fluid-screen) - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)),
            calc(var(--font-size-max) * var(--ratio-max) * var(--ratio-max) * var(--ratio-max)));

    --text-3xl: clamp(calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min)),
            calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min)) + (calc(var(--font-size-max) * var(--ratio-max) * var(--ratio-max) * var(--ratio-max) * var(--ratio-max)) - calc(var(--font-size-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min) * var(--ratio-min))) * (var(--fluid-screen) - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)),
            calc(var(--font-size-max) * var(--ratio-max) * var(--ratio-max) * var(--ratio-max) * var(--ratio-max)));


    /* ====================================
     FLUID SPACING
     ==================================== */

    /* Base fluid space */
    --space-base: clamp(var(--space-min),
            var(--space-min) + (var(--space-max) - var(--space-min)) * (var(--fluid-screen) - var(--fluid-min-width)) / (var(--fluid-max-width) - var(--fluid-min-width)),
            var(--space-max));

    /* Space scale */
    --space-3xs: calc(var(--space-base) * 0.25);
    --space-2xs: calc(var(--space-base) * 0.5);
    --space-xs: calc(var(--space-base) * 0.75);
    --space-s: var(--space-base);
    --space-m: calc(var(--space-base) * 1.5);
    --space-l: calc(var(--space-base) * 2);
    --space-xl: calc(var(--space-base) * 3);
    --space-2xl: calc(var(--space-base) * 4);
    --space-3xl: calc(var(--space-base) * 6);

    /* Fluid space pairs for layouts */
    --space-base-m: clamp(var(--space-base), 4vi, var(--space-m));
    --space-m-l: clamp(var(--space-m), 6vi, var(--space-l));
    --space-l-xl: clamp(var(--space-l), 8vi, var(--space-xl));
    --space-xl-2xl: clamp(var(--space-xl), 10vi, var(--space-2xl));
    --space-2xl-3xl: clamp(var(--space-2xl), 12vi, var(--space-3xl));
}