@import url('typography.css');
@import url('color.css');

:root {

    /** ---------------------- Spacing ----------------------*/
    --spacing-xxs: 4px;   /* Extra Extra Small */
    --spacing-xs: 8px;    /* Extra Small */
    --spacing-sm: 12px;   /* Small */
    --spacing-md: 16px;   /* Medium */
    --spacing-lg: 24px;   /* Large */
    --spacing-xl: 32px;   /* Extra Large */
    --spacing-xxl: 48px;  /* Extra Extra Large */
    --spacing-xxxl: 64px; /* Jumbo Size */

    /* Optional: Fluid spacing based on viewport */
    --spacing-fluid-sm: calc(8px + 0.25vw); 
    --spacing-fluid-md: calc(12px + 0.5vw); 
    --spacing-fluid-lg: calc(16px + 1vw); 
    --spacing-fluid-xl: calc(24px + 1vw); 
    --spacing-fluid-xxl: calc(32px + 1vw); 
    --spacing-fluid-xxxl: calc(64px + 1vw); 

    --ultimate-padding: var(--spacing-lg); /* Replacing with consistent spacing */

    /** ---------------------- Radius ----------------------*/
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-rounded: 32px;
    --radius-rounded-lg: 48px;
    --radius-full: 9999px;

    /** ---------------------- Others ----------------------*/

    --header-height: calc(70px * 1.7);
    --title-height: calc(1.4em * 1rem);
    --card-spacing: var(--spacing-fluid-lg);

    --window-width-mobile: 319px;
    --window-width-tablet: 768px;
    --window-width-desktop: 1080px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: burlywood 1px solid; */
}