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


.g-root {
    --g-border-radius-xs: 10px;
    --g-border-radius-s: 12px;
    --g-border-radius-m: 14px;
    --g-border-radius-l: 18px;
    --g-border-radius-xl: 22px;

    --g-font-family-monospace: 'Roboto Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', 'Courier', monospace;
}

.g-root_theme_light {
    --g-color-private-brand-50: rgb(77 145 255 / 0.1);
    --g-color-private-brand-100: rgb(77 145 255 / 0.15);
    --g-color-private-brand-150: rgb(77 145 255 / 0.2);
    --g-color-private-brand-200: rgb(77 145 255 / 0.3);
    --g-color-private-brand-250: rgb(77 145 255 / 0.4);
    --g-color-private-brand-300: rgb(77 145 255 / 0.5);
    --g-color-private-brand-350: rgb(77 145 255 / 0.6);
    --g-color-private-brand-400: rgb(77 145 255 / 0.7);
    --g-color-private-brand-450: rgb(77 145 255 / 0.8);
    --g-color-private-brand-500: rgb(77 145 255 / 0.9);
    --g-color-private-brand-550: rgb(77 145 255);
    --g-color-private-brand-550-solid: rgb(77 145 255);
    --g-color-private-brand-1000-solid: rgb(40 46 67);
    --g-color-private-brand-950-solid: rgb(43 52 78);
    --g-color-private-brand-900-solid: rgb(47 64 100);
    --g-color-private-brand-850-solid: rgb(51 75 122);
    --g-color-private-brand-800-solid: rgb(56 87 145);
    --g-color-private-brand-750-solid: rgb(60 99 167);
    --g-color-private-brand-700-solid: rgb(64 110 189);
    --g-color-private-brand-650-solid: rgb(68 122 211);
    --g-color-private-brand-600-solid: rgb(73 133 233);
    --g-color-private-brand-500-solid: rgb(95 156 255);
    --g-color-private-brand-450-solid: rgb(113 167 255);
    --g-color-private-brand-400-solid: rgb(130 178 255);
    --g-color-private-brand-350-solid: rgb(148 189 255);
    --g-color-private-brand-300-solid: rgb(166 200 255);
    --g-color-private-brand-250-solid: rgb(184 211 255);
    --g-color-private-brand-200-solid: rgb(202 222 255);
    --g-color-private-brand-150-solid: rgb(219 233 255);
    --g-color-private-brand-100-solid: rgb(228 239 255);
    --g-color-private-brand-50-solid: rgb(237 244 255);

    --g-color-text-brand: var(--g-color-private-brand-700-solid);
    --g-color-text-brand-heavy: var(--g-color-private-brand-700-solid);
    --g-color-text-link: var(--g-color-private-brand-600-solid);
    --g-color-text-link-hover: var(--g-color-private-brand-800-solid);
    --g-color-text-link-visited: var(--g-color-private-purple-550-solid);
    --g-color-text-link-visited-hover: var(--g-color-private-purple-800-solid);
    --g-color-base-background: rgb(255, 255, 255);
    --g-color-base-brand: var(--g-color-private-brand-550-solid);
    --g-color-base-brand-hover: var(--g-color-private-brand-600-solid);
    --g-color-base-selection: var(--g-color-private-brand-200);
    --g-color-base-selection-hover: var(--g-color-private-brand-300);
    --g-color-line-brand: var(--g-color-private-brand-600-solid);
}

.g-root_theme_dark {
    --g-color-private-brand-50: rgb(77 145 255 / 0.1);
    --g-color-private-brand-100: rgb(77 145 255 / 0.15);
    --g-color-private-brand-150: rgb(77 145 255 / 0.2);
    --g-color-private-brand-200: rgb(77 145 255 / 0.3);
    --g-color-private-brand-250: rgb(77 145 255 / 0.4);
    --g-color-private-brand-300: rgb(77 145 255 / 0.5);
    --g-color-private-brand-350: rgb(77 145 255 / 0.6);
    --g-color-private-brand-400: rgb(77 145 255 / 0.7);
    --g-color-private-brand-450: rgb(77 145 255 / 0.8);
    --g-color-private-brand-500: rgb(77 145 255 / 0.9);
    --g-color-private-brand-550: rgb(77 145 255);
    --g-color-private-brand-550-solid: rgb(77 145 255);
    --g-color-private-brand-1000-solid: rgb(228 239 255);
    --g-color-private-brand-950-solid: rgb(219 233 255);
    --g-color-private-brand-900-solid: rgb(202 222 255);
    --g-color-private-brand-850-solid: rgb(184 211 255);
    --g-color-private-brand-800-solid: rgb(166 200 255);
    --g-color-private-brand-750-solid: rgb(148 189 255);
    --g-color-private-brand-700-solid: rgb(130 178 255);
    --g-color-private-brand-650-solid: rgb(113 167 255);
    --g-color-private-brand-600-solid: rgb(95 156 255);
    --g-color-private-brand-500-solid: rgb(73 133 233);
    --g-color-private-brand-450-solid: rgb(68 122 211);
    --g-color-private-brand-400-solid: rgb(64 110 189);
    --g-color-private-brand-350-solid: rgb(60 99 167);
    --g-color-private-brand-300-solid: rgb(56 87 145);
    --g-color-private-brand-250-solid: rgb(51 75 122);
    --g-color-private-brand-200-solid: rgb(47 64 100);
    --g-color-private-brand-150-solid: rgb(43 52 78);
    --g-color-private-brand-100-solid: rgb(40 46 67);
    --g-color-private-brand-50-solid: rgb(38 41 56);

    --g-color-text-brand: var(--g-color-private-brand-600-solid);
    --g-color-text-brand-heavy: var(--g-color-private-brand-700-solid);
    --g-color-text-brand-contrast: var(--g-color-text-dark-primary);
    --g-color-text-link: var(--g-color-private-brand-550-solid);
    --g-color-text-link-hover: var(--g-color-private-brand-700-solid);
    --g-color-text-link-visited: var(--g-color-private-purple-700-solid);
    --g-color-text-link-visited-hover: var(--g-color-private-purple-850-solid);
    --g-color-base-background: rgb(34, 29, 34);
    --g-color-base-brand: var(--g-color-private-brand-550-solid);
    --g-color-base-brand-hover: var(--g-color-private-brand-650-solid);
    --g-color-base-selection: var(--g-color-private-brand-150);
    --g-color-base-selection-hover: var(--g-color-private-brand-200);
    --g-color-line-brand: var(--g-color-private-brand-600-solid);
}