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

:root {
    --color-ticker-widget: none;
    --color-ticker-widget-hover: none;
    --color-ticker-widget-border: none;

    --font-sans: 'Roboto';
    --font-secondary: 'sans-serif';

    --mosaic-brand-border-margin: 1.5px;
    --mosaic-brand-border-hitbox: 10px;
    --mosaic-brand-border-margin-mobile: 1px;
    --mosaic-brand-border-margin-negative: -1.5px;
    --mosaic-brand-preview-box-shadow: 0 0 0 1px rgba(17, 20, 24, 0.15);
    --mosaic-brand-preview-border-radius: 2px;
}

html[data-theme='light'] {
    --color-brand-primary: #1174C2;
    --color-brand-primary-light: #70acda;
    --color-brand-primary-dark: #0a4674;
    --color-brand-primary-darker: #072e4e;

    --color-brand-secondary: #EF4444;
    --color-brand-secondary-light: #f58f8f;
    --color-brand-secondary-dark: #8f2929;
    --color-brand-secondary-darker: #601b1b;

    --color-brand-accent: #1174C2;
    --color-brand-accent-light: #70acda;
    --color-brand-accent-lighter: #a0c7e7;
    --color-brand-accent-dark: #0a4674;
    --color-brand-accent-darker: #072e4e;

    --color-brand-green: #22C55E;
    --color-brand-green-light: #7adc9e;
    --color-brand-green-dark: #1b9e4b;
    --color-brand-green-darker: #147638;

    --color-brand-red: #EF4444;
    --color-brand-red-light: #f58f8f;
    --color-brand-red-dark: #8f2929;
    --color-brand-red-darker: #601b1b;

    --color-brand-button-text: #22C55E;
    --color-brand-button-background: #f1f4ff;

    --color-brand-border-neutral: #404040;

    --color-brand-scrollbar: #22C55E;
    --color-brand-scrollbar-dark: #1b9e4b;
    --color-brand-scrollbar-darker: #147638;
    
    --color-brand-border: #cccccc;

    --color-brand-background: #f5f5f5;
    --color-brand-background-light: #fff;
    --color-brand-background-dark: #e5e5e5;

    --color-module-title: #27272a;

    --color-brand-neutral: #27272a;
    --color-brand-neutral-light: #404040;
    --color-brand-neutral-dark: #525252;
    --color-brand-neutral-darker: #a3a3a3;
    --color-brand-neutral-darker-2: #fafafa;
    --color-brand-neutral-darkest: #e5e5e5;

    --color-brand-neutral-50: oklch(0.145 0 0);
    --color-brand-neutral-100: oklch(0.205 0 0);
    --color-brand-neutral-200: oklch(0.269 0 0);
    --color-brand-neutral-300: oklch(0.371 0 0);
    --color-brand-neutral-400: oklch(0.439 0 0);
    --color-brand-neutral-500: oklch(0.556 0 0);
    --color-brand-neutral-600: oklch(0.708 0 0);
    --color-brand-neutral-700: oklch(0.87 0 0);
    --color-brand-neutral-800: oklch(0.922 0 0);
    --color-brand-neutral-900: oklch(0.97 0 0);
    --color-brand-neutral-950: oklch(0.985 0 0);

    --color-brand-shadow: 0 20px 76px 33px rgba(0, 0, 0, 0.1);

    --color-brand-chart-neutral: #27272a;
    --color-brand-chart-neutral-darker: #a3a3a3;
    --color-brand-chart-neutral-darkest: #f5f5f5;
    --color-brand-chart-background: #f5f5f5;
    --color-brand-chart-platform: #e5e5e5;
    --color-brand-chart-button: #22C55E;
    --color-brand-chart-button-hover: #1b9e4b;
    --color-brand-chart-text: #0e0e0f;
    --color-brand-chart-text-active: #7adc9e;
    
    --color-brand-gradient: linear-gradient(to right, #1174C2, #4190ce);
    --color-brand-gradient-hover: linear-gradient(to right, #1174C2, #1174C2);

    --mosaic-brand-toolbar-color: #e5e5e5;
    --mosaic-brand-toolbar-hover: linear-gradient(to bottom, #f5f5f5, #e5e5e5);
}

html[data-theme='dark'] {
    --color-brand-primary: #1174C2;
    --color-brand-primary-light: #70acda;
    --color-brand-primary-dark: #0a4674;
    --color-brand-primary-darker: #072e4e;

    --color-brand-secondary: #EF4444;
    --color-brand-secondary-light: #f58f8f;
    --color-brand-secondary-dark: #8f2929;
    --color-brand-secondary-darker: #601b1b;

    --color-brand-accent: #1174C2;
    --color-brand-accent-light: #70acda;
    --color-brand-accent-lighter: #a0c7e7;
    --color-brand-accent-dark: #0a4674;
    --color-brand-accent-darker: #072e4e;

    --color-brand-green: #22C55E;
    --color-brand-green-light: #7adc9e;
    --color-brand-green-dark: #1b9e4b;
    --color-brand-green-darker: #147638;

    --color-brand-red: #EF4444;
    --color-brand-red-light: #f58f8f;
    --color-brand-red-dark: #8f2929;
    --color-brand-red-darker: #601b1b;

    --color-brand-border: #1174C2;

    --color-brand-button-text: #22C55E;
    --color-brand-button-background: #f1f4ff;

    --color-brand-border-neutral: #404040;

    --color-brand-scrollbar: #22C55E;
    --color-brand-scrollbar-dark: #1b9e4b;
    --color-brand-scrollbar-darker: #147638;
    
    --color-brand-background: #0B1020;
    --color-brand-background-light: #edfcfd;
    --color-brand-background-dark: #171c2b;  

    --color-module-title: #e5e5e5;

    --color-brand-neutral: #e5e5e5;
    --color-brand-neutral-light: #fafafa;
    --color-brand-neutral-dark: #a3a3a3;
    --color-brand-neutral-darker: #525252;
    --color-brand-neutral-darker-2: #404040;
    --color-brand-neutral-darkest: #27272a;

    --color-brand-neutral-50: oklch(0.985 0 0);
    --color-brand-neutral-100: oklch(0.97 0 0);
    --color-brand-neutral-200: oklch(0.922 0 0);
    --color-brand-neutral-300: oklch(0.87 0 0);
    --color-brand-neutral-400: oklch(0.708 0 0);
    --color-brand-neutral-500: oklch(0.556 0 0);
    --color-brand-neutral-600: oklch(0.439 0 0);
    --color-brand-neutral-700: oklch(0.371 0 0);
    --color-brand-neutral-800: oklch(0.269 0 0);
    --color-brand-neutral-900: oklch(0.205 0 0);
    --color-brand-neutral-950: oklch(0.145 0 0);

    --color-brand-shadow: 0 20px 76px 33px rgba(0, 0, 0, 0.66);

    --color-brand-chart-neutral: #e5e5e5;
    --color-brand-chart-neutral-darker: #404040;
    --color-brand-chart-neutral-darkest: #27272a;
    --color-brand-chart-background: #171c2b;
    --color-brand-chart-platform: #404040;
    --color-brand-chart-button: #22C55E;
    --color-brand-chart-button-hover: #1b9e4b;
    --color-brand-chart-text: #e5e5e5;
    --color-brand-chart-text-active: #7adc9e;

    --color-brand-gradient: linear-gradient(to right, #1174C2, #4190ce);
    --color-brand-gradient-hover: linear-gradient(to right, #1174C2, #1174C2);

    --mosaic-brand-toolbar-color: #171c2b;
    --mosaic-brand-toolbar-hover: linear-gradient(to bottom, #404040, #171c2b);
}