@layer font {
    @font-face {
        font-family: Fustat;
        src: url(/fonts/Fustat-ExtraLight.ttf);
        font-weight: 200;
        font-display: swap;
    }

    @font-face {
        font-family: Fustat;
        src: url(/fonts/Fustat-Light.ttf);
        font-weight: 300;
        font-display: swap;
    }

    @font-face {
        font-family: Fustat;
        src: url(/fonts/Fustat-Regular.ttf);
        font-weight: 400;
        font-display: swap;
    }

    @font-face {
        font-family: Fustat;
        src: url(/fonts/Fustat-Medium.ttf);
        font-weight: 500;
        font-display: swap;
    }

    @font-face {
        font-family: Fustat;
        src: url(/fonts/Fustat-SemiBold.ttf);
        font-weight: 600;
        font-display: swap;
    }
    
    @font-face {
        font-family: Fustat;
        src: url(/fonts/Fustat-Bold.ttf);
        font-weight: 700;
        font-display: swap;
    }

    @font-face {
        font-family: Fustat;
        src: url(/fonts/Fustat-ExtraBold.ttf);
        font-weight: 800;
        font-display: swap;
    }
}

@layer base {
    :root {
        --background-color: #FEFEFF;
        --text-color: #0F172A;
        --color-blue-50: oklch(97% 0.014 254.604);
        --color-blue-100: oklch(93.2% 0.032 255.585);
        --color-blue-200: oklch(88.2% 0.059 254.128);
        --color-blue-300: oklch(80.9% 0.105 251.813);
        --color-blue-400: oklch(70.7% 0.165 254.624);
        --color-blue-500: oklch(62.3% 0.214 259.815);
        --color-blue-600: oklch(54.6% 0.245 262.881);
        --color-blue-700: oklch(48.8% 0.243 264.376);
        --color-blue-800: oklch(42.4% 0.199 265.638);
        --color-blue-900: oklch(37.9% 0.146 265.522);
        --color-blue-950: oklch(28.2% 0.091 267.935);
    }
    
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        padding: 0;
        font-family: Fustat, system-ui, Avenir, Helvetica, Arial, sans-serif;
        background-color: var(--background-color);
        color: var(--text-color);
        
        &::selection {
            background-color: var(--text-color);
            color: var(--background-color);
        }
    }
    
    .antialiased {
        -webkit-font-smoothing: antialiased;
    }
}