@font-face {
    font-family: 'Host Grotesk';
    src: url('/fonts/HostGrotesk-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --tracking-normal: 0em;
    --font-sans: 'Host Grotesk', ui-sans-serif, system-ui, sans-serif;

    --off-white: oklch(0.997 0.0144 106.66);
    --off-black: oklch(0.2393 0 0);
    --navy: oklch(0.3046 0.0662 237.55);
    --coral: oklch(0.6892 0.2004 22.38);
    --workplace: oklch(0.6761 0.1195 240.03);
    --petrol: oklch(0.4924 0.08 226.5);
    --yellow: oklch(0.8969 0.183 97.27);
    --magenta: oklch(0.5707 0.2241 3.31);
    --mint: oklch(0.8635 0.2058 154.71);


    /* Core colors using OKLCH color space */
    --background: oklch(0.997 0.0144 106.66);
    --foreground: oklch(0.2393 0 0);
    --card: oklch(0.997 0.0144 106.66);
    --card-foreground: oklch(0.2393 0 0);
    --popover: oklch(0.997 0.0144 106.66);
    --popover-foreground: oklch(0.2393 0 0);
    --primary: oklch(0.6761 0.1195 240.03);
    --primary-foreground: oklch(0.997 0.0144 106.66);
    --secondary: oklch(0.947 0.0144 106.66);
    --secondary-foreground: oklch(0.2393 0 0);
    --muted: oklch(0.2393 0 0 / 10%);
    --muted-foreground: oklch(0.2393 0 0 / 68%);
    --accent: oklch(0.6761 0.1195 240.03 / 20%);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.6892 0.2004 22.38);
    --destructive-foreground: oklch(0.997 0.0144 106.66);
    --border: oklch(0.2393 0 0 / 20%);
    --input: oklch(0.2393 0 0 / 20%);
    --ring: oklch(0.6761 0.1195 240.03);
    --chart-1: oklch(0.809 0.105 251.813);
    --chart-2: oklch(0.623 0.214 259.815);
    --chart-3: oklch(0.546 0.245 262.881);
    --chart-4: oklch(0.488 0.243 264.376);
    --chart-5: oklch(0.424 0.199 265.638);
    --sidebar: oklch(0.977 0.0144 106.66);
    --sidebar-foreground: oklch(0.2393 0 0);
    --sidebar-primary: oklch(0.2393 0 0 / 5%);
    --sidebar-primary-foreground: oklch(0.2393 0 0);
    --sidebar-accent: oklch(0.2393 0 0 / 5%);
    --sidebar-accent-foreground: oklch(0.2393 0 0);
    --sidebar-border: oklch(0.2393 0 0 / 80%);
    --sidebar-ring: oklch(0.2393 0 0 / 80%);
    --radius: 1rem;
}

.dark {
    --background: oklch(0.2393 0 0);
    --foreground: oklch(0.997 0.0144 106.66);
    --card: oklch(0.2193 0 0);
    --card-foreground: oklch(0.997 0.0144 106.66);
    --popover: oklch(0.1993 0 0);
    --popover-foreground: oklch(0.997 0.0144 106.66);
    --primary: oklch(0.6761 0.1195 240.03);
    --primary-foreground: oklch(0.997 0.0144 106.66);
    --secondary: oklch(0.2693 0 0);
    --secondary-foreground: oklch(0.997 0.0144 106.66);
    --muted: oklch(0.2993 0 0);
    --muted-foreground: oklch(0.997 0.0144 106.66 / 60%);
    --accent: oklch(0.2993 0 0);
    --accent-foreground: oklch(0.997 0.0144 106.66);
    --destructive: oklch(0.6892 0.2004 22.38 / 80%);
    --destructive-foreground: oklch(0.997 0.0144 106.66);
    --border: oklch(0.997 0.0144 106.66 / 10%);
    --input: oklch(0.997 0.0144 106.66 / 10%);
    --ring: oklch(0.6761 0.1195 240.03);
    --chart-1: oklch(0.6761 0.1195 240.03);
    --chart-2: oklch(0.623 0.214 259.815);
    --chart-3: oklch(0.546 0.245 262.881);
    --chart-4: oklch(0.488 0.243 264.376);
    --chart-5: oklch(0.424 0.199 265.638);
    --sidebar: oklch(0.2193 0 0);
    --sidebar-foreground: oklch(0.997 0.0144 106.66);
    --sidebar-primary: oklch(0.8969 0.183 97.27);
    --sidebar-primary-foreground: oklch(0.997 0.0144 106.66);
    --sidebar-accent: oklch(0.997 0.0144 106.66 / 10%);
    --sidebar-accent-foreground: oklch(0.997 0.0144 106.66);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.8635 0.2058 154.71);
}

* {
    border-color: var(--border);
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
}