/*
 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
*/

:root {
    /* Text Sizes */
    /* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.2&steps=xs%2Cs%2Cm%2Cl%2Cxl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=10&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */
    --text-xs: clamp(1.26rem, -0.01vi + 1.27rem, 1.25rem);
    --text-s: clamp(1.42rem, 0.08vi + 1.4rem, 1.5rem);
    --text-m: clamp(1.6rem, 0.21vi + 1.53rem, 1.8rem);
    --text-l: clamp(1.8rem, 0.21vi + 1.53rem, 2rem);
    --text-xl: clamp(1.8rem, 0.37vi + 1.68rem, 2.16rem);
    --text-xxl: clamp(2.02rem, 0.59vi + 1.84rem, 2.59rem);

    /* Header Sizes */
    /* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=22&maxWidth=1280&maxRatio=1.333&steps=6%2C5%2C4%2C3%2C2%2C1%2Ctitle&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=10&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=900 */
    --h6: clamp(1.28rem, -0.04vi + 1.29rem, 1.24rem);
    --h5: clamp(1.6rem, 0.05vi + 1.58rem, 1.65rem);
    --h4: clamp(2rem, 0.21vi + 1.93rem, 2.2rem);
    --h3: clamp(2.5rem, 0.45vi + 2.36rem, 2.93rem);
    --h2: clamp(3.13rem, 0.82vi + 2.86rem, 3.91rem);
    --h1: clamp(3.91rem, 1.36vi + 3.47rem, 5.21rem);
    --title: clamp(4.88rem, 2.15vi + 4.2rem, 8.5rem);

    /* Colors */
    --light-blue: #BDDCEA;
    --black: #000;
    --black-20: #222;
    --white: #fff;
    --yellow: #ffe4af;
    --green: #BEEABD;
}

/* Text Sizes Utility Class */

.text-xs{
    font-size: var(--text-xs);
}

.text-s{
    font-size: var(--text-s);
}

.text-m{
    font-size: var(--text-m);
}

.text-l{
    font-size: var(--text-l);
}

.text-xl{
    font-size: var(--text-xl);
}

/* Header Sizes Utility Class */

.h6{
    font-size: var(--h6);
}

.h5{
    font-size: var(--h5);
}

.h4{
    font-size: var(--h4);
}

.h3{
    font-size: var(--h3);
}

.h2{
    font-size: var(--h2);
}

.h1{
    font-size: var(--h1);
}

.title{
    font-size: var(--title);
}