@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --white: #ffffff;
    --black: #141414;

    // Neutrals
    --neutral-800: #1c2026;
    --neutral-700: #6e6e72;
    --neutral-600: #7f7f83;
    --neutral-500: #8e8e93;
    --neutral-400: #ababae;
    --neutral-300: #c3c3c5;
    --neutral-200: #d9d9da;
    --neutral-100: #ededed;
    --neutral-50: #f6f6f6;
    --neutral-25: #fafafa;

    // Blue
    --blue-900: #003772;
    --blue-800: #004da1;
    --blue-700: #005fc6;
    --blue-600: #006de4;
    --blue-500: #007aff;
    --blue-400: #729eff;
    --blue-300: #a1bbff;
    --blue-200: #c6d4ff;
    --blue-100: #e4ebff;
    --blue-0: #f2f5ff;

    // Green
    --green-900: #26513b;
    --green-800: #367353;
    --green-700: #438d65;
    --green-600: #4da375;
    --green-500: #56b683;
    --green-400: #8ac7a4;
    --green-300: #aed6bf;
    --green-200: #cde5d6;
    --green-100: #e7f2eb;
    --green-0: #f3f9f5;

    // Red
    --red-900: #6c3a2f;
    --red-800: #985242;
    --red-700: #bb6451;
    --red-600: #d8735e;
    --red-500: #f18169;
    --red-400: #f4a294;
    --red-300: #f7beb5;
    --red-200: #f9d6d0;
    --red-100: #fcebe9;
    --red-0: #fef5f4;

    // Yellow
    --yellow-900: #442304;
    --yellow-800: #89530a;
    --yellow-700: #a66a02;
    --yellow-600: #d19500;
    --yellow-500: #ffcc00;
    --yellow-400: #ffdb0d;
    --yellow-300: #ffec41;
    --yellow-200: #fff886;
    --yellow-100: #fffec1;
    --yellow-0: #fffee7;

    // Orange
    --orange-900: #461804;
    --orange-800: #82350c;
    --orange-700: #a13e0b;
    --orange-600: #cc5002;
    --orange-500: #ff6f00;
    --orange-400: #ffa432;
    --orange-300: #ffc86d;
    --orange-200: #ffdfa5;
    --orange-100: #fff1d3;
    --orange-0: #fff9ec;

    // Overlay
    --overlay: rgba(28, 32, 38, 0.75);
}

body,
body[theme='light'] {
    --primary-accent: var(--blue-500);
    --primary-deep: var(--blue-800);
    --primary-soft: var(--blue-300);

    --text-high-emphasis: var(--neutral-800);
    --text-mid-emphasis: var(--neutral-500);
    --text-low-emphasis: var(--neutral-300);
    --text-light: var(--white);
    --text-invert: var(--white);
    --text-success-accent: var(--green-500);
    --text-error-accent: var(--red-500);
    --text-warning-accent: var(--orange-500);
    --text-attention-accent: var(--yellow-500);

    --icons-high-emphasis: var(--neutral-800);
    --icons-mid-emphasis: var(--neutral-500);
    --icons-low-emphasis: var(--neutral-300);
    --icons-success-accent: var(--green-500);
    --icons-error-accent: var(--red-500);
    --icons-warning-accent: var(--orange-500);
    --icons-attention-accent: var(--yellow-500);
    --icons-light: var(--white);

    --navbar-background: var(--white);
    --card-background: var(--white);
    --dark-background: var(--neutral-800);
    --app-background: var(--neutral-25);

    --card-primary-background-light: var(--blue-100);
    --card-neutral-background: var(--neutral-100);
    --card-success-background-light: var(--green-100);
    --card-error-background-light: var(--red-100);
    --card-attention-background-light: var(--yellow-100);
    --card-warning-background-light: var(--orange-100);

    --border: var(--neutral-100);
    --border-error: var(--red-500);

    --success-deep: var(--green-800);
    --success-soft: var(--green-300);
    --error-soft: var(--red-300);
    --warning-soft: var(--orange-300);
    --attention-soft: var(--yellow-300);
    --error-deep: var(--red-800);
    --orange-deep: var(--orange-800);
    --attention-deep: var(--yellow-800);

    --border-secondary: transparent;
    --background-secondary: transparent;
    --background-tertiary: transparent;
}

body[theme='dark'] {
    --primary-accent: var(--blue-500);
    --primary-deep: var(--blue-300);
    --primary-soft: var(--blue-300);

    --text-high-emphasis: var(--neutral-50);
    --text-mid-emphasis: var(--neutral-500);
    --text-low-emphasis: #515151;
    --text-light: var(--white);
    --text-invert: var(--black);
    --text-success-accent: var(--green-500);
    --text-error-accent: var(--red-500);
    --text-warning-accent: var(--orange-500);
    --text-attention-accent: var(--yellow-500);

    --icons-high-emphasis: var(--neutral-50);
    --icons-mid-emphasis: var(--neutral-500);
    --icons-low-emphasis: #515151;
    --icons-success-accent: var(--green-500);
    --icons-error-accent: var(--red-500);
    --icons-warning-accent: var(--orange-500);
    --icons-attention-accent: var(--yellow-500);
    --icons-light: var(--white);

    --navbar-background: var(--black);
    --card-background: #101011;
    --dark-background: var(--neutral-800);
    --app-background: #090909;

    --card-primary-background-light: #007aff26;
    --card-neutral-background: #1c1c1e;
    --card-success-background-light: #56b68326;
    --card-error-background-light: #f1816926;
    --card-attention-background-light: #ffcc0026;
    --card-warning-background-light: #ff6f0026;

    --border: #292929;
    --border-error: var(--red-500);

    --success-deep: var(--green-500);
    --success-soft: var(--green-700);
    --error-soft: var(--red-700);
    --warning-soft: var(--orange-600);
    --attention-soft: var(--yellow-600);
    --error-deep: var(--red-500);
    --orange-deep: var(--orange-500);
    --attention-deep: var(--yellow-500);

    --border-secondary: #3e3e3e;
    --background-secondary: #292929;
    --background-tertiary: #3e3e3e;
}

$primary-accent: var(--primary-accent);
$primary-deep: var(--primary-deep);
$primary-soft: var(--primary-soft);

$text-high-emphasis: var(--text-high-emphasis);
$text-mid-emphasis: var(--text-mid-emphasis);
$text-low-emphasis: var(--text-low-emphasis);
$text-light: var(--text-light);
$text-invert: var(--text-invert);
$text-success-accent: var(--text-success-accent);
$text-error-accent: var(--text-error-accent);
$text-warning-accent: var(--text-warning-accent);
$text-attention-accent: var(--text-attention-accent);

$icons-high-emphasis: var(--icons-high-emphasis);
$icons-mid-emphasis: var(--icons-mid-emphasis);
$icons-low-emphasis: var(--icons-low-emphasis);
$icons-success-accent: var(--icons-success-accent);
$icons-error-accent: var(--icons-error-accent);
$icons-warning-accent: var(--icons-warning-accent);
$icons-attention-accent: var(--icons-attention-accent);
$icons-light: var(--icons-light);

$navbar-background: var(--navbar-background);
$card-background: var(--card-background);
$dark-background: var(--dark-background);
$app-background: var(--app-background);

$card-primary-background-light: var(--card-primary-background-light);
$card-neutral-background: var(--card-neutral-background);
$card-success-background-light: var(--card-success-background-light);
$card-error-background-light: var(--card-error-background-light);
$card-attention-background-light: var(--card-attention-background-light);
$card-warning-background-light: var(--card-warning-background-light);

$border: var(--border);
$border-error: var(--border-error);

$success-deep: var(--success-deep);
$success-soft: var(--success-soft);
$error-soft: var(--error-soft);
$warning-soft: var(--warning-soft);
$attention-soft: var(--attention-soft);
$error-deep: var(--error-deep);
$orange-deep: var(--orange-deep);
$attention-deep: var(--attention-deep);

$border-secondary: var(--border-secondary);
$background-secondary: var(--background-secondary);
$background-tertiary: var(--background-tertiary);

/* ------------------- Old colors ------------------- */

$color-white: #ffffff;
$color-black: #000;
$color-dark-theme-bg: #101213;

$color-yellow: #fc0;

$color-grey-0: #f6f6f6;
$color-grey-2: #f2f2f2;
$color-grey-15: #ececec;
$color-grey-100: #ededed;
$color-grey-200: #d9d9da;
$color-grey-300: #c3c3c5;
$color-grey-400: #ababae;
$color-grey-500: #8e8e93;
$color-grey-600: #7f7f83;
$color-grey-700: #6e6e72;
$color-grey-800: #1c2026;

$color-blue-0: #f2f5ff;
$color-blue-100: #e4ebff;
$color-blue-200: #c6d4ff;
$color-blue-250: #cce5ff;
$color-blue-300: #a1bbff;
$color-blue-350: #99caff;
$color-blue-400: #729eff;
$color-blue-500: #489ffa;
$color-blue-600: #006de4;
$color-blue-700: #006de4;
$color-blue-800: #004da1;
$color-blue-900: #003772;

$color-red: #ff3b30;
$color-red-0: #fef5f4;
$color-red-50: #ffe7e5;
$color-red-100: #fcebe9;
$color-red-200: #f9d6d0;
$color-red-250: #ffcfcc;
$color-red-500: #d84f68;
$color-red-800: #985242;
$color-red-900: #c9496129;

$color-green-0: #f3f9f5;
$color-green-50: #ebfaef;
$color-green-100: #e7f2eb;
$color-green-200: #d7f4de;
$color-green-400: #8ac7a4;
$color-green-500: #439f7f;
$color-green-600: #2aa248;
$color-green-800: #367353;
$color-green-900: #439f7f29;

$dark-theme-gray-60: #303030;
$dark-theme-gray-80: #1d1f20;
$dark-theme-gray-100: #171717;
$dark-theme-blue: #3579e9;
$dark-theme-line: #2d2d2d;