@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;600;800&display=swap');

:root {

    /* Spacing */ 
    --spacing: max(1rem, calc(100vw / 19.2));
    --spacing-large: max(2rem, calc(200vw / 19.2));

    --spacing-sections: max(75px, calc(150vw / 19.2));
    --spacing-inner-x: max(20px, calc(var(--spacing) / 2));
    --spacing-inner-y: max(20px, calc(var(--spacing) / 2));
    --spacing-editor: max(10px, calc(20vw / 19.2));

    /* Colors */
    --primary: #070709;
    --primary-foreground: #FFFFFF;
    --white: #FCFCFC;

    --background: #FFFFFF;
    --foreground: #070709;

    --blue: #1D80DA;
    --blue-hover: #1966ad;
    --danger: #CE0505;
    --danger-foreground: #FFFFFF;

    --hover: #b1b1b1;

    /* Fonts */
    --inter-tight: "Inter Tight";

    /* Font Size */
    --font-size-xs: max(10px, calc(12vw / 19.2));

    --font-size-base: max(14px, calc(16vw / 19.2));
    --leading-base: 0.75px;

    --font-size-lg: max(14px, calc(18vw / 19.2));

    --font-size-xl: max(16px, calc(22vw / 19.2));

    --font-size-2xl: max(23px, calc(38vw / 19.2));
    --leading-2xl: max(35px, calc(45vw / 19.2));

    --font-size-3xl: max(26px, calc(48vw / 19.2));
    --leading-3xl: max(32px, calc(50vw / 19.2));

    --font-size-4xl: max(30px, calc(75vw / 19.2));
    --leading-4xl: max(30px, calc(90vw / 19.2));

    /* Letter spacing */
    --leading-button: 1.8px;
    --leading-header: 2.1px;
}

.dark {
    --background: #070709;
    --foreground: #FFFFFF;
}