@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

:root {
    /* --color-primary: #ED5140; */
    --color-primary: #1241FE;
    --color-secondary: #927cff;
    --color-tertiary: #FF5400;
    
    --color-background: #000000;
    --color-text: #ececec;
    --color-text-secondary: #ffffff79;
    --color-light: #ffffff;
    --color-hover-background: #ffffff11;

    --color-blur-background: #1c1c1cc8;
    --color-blur-background-light: #2222229e;
    --color-border: #ffffff33;

    --font-family-primary: "Roboto Mono", monospace;
    --font-family-secondary: "CMGSans-ExtraBoldWide", sans-serif;

    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 32px;

    --border-width-small: 0.5px;
    --border-width-medium: 1px;
    --border-width-large: 1.5px;
    --border-width-Xlarge: 2px;

    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    --radius-Xlarge: 20px;

    --transition-duration: 300ms;
}
[data-theme="light"] {
    --color-background: #ffffff;
    --color-text: #000000;
    --color-primary: #007bff;
}