﻿
/*COLORS*/
:root {
    --color-red-1: #c42f41;
    --color-red-2: #c94a49;
    --color-red-3: #801837;
    --color-red-4: #511734;
    --color-red-5: #2c152b;
    --color-red-6: #ff8080;
    --color-red-7: #e9546b;
    --color-green-1: #2ab367;
    --color-purple-1: #4f46e5;
    --color-orange-1: #d97706;
    --color-orange-2: #ec8e3d;
    --color-blue-1: #4292E7;
    --color-blue-2: #1a7dc7;
    --color-blue-3: #15629c;
    --color-yellow-1: #FCC350;
    --color-grey-1: #f1f5f9;
    --color-grey-2: #dadada;
    --color-grey-3: #acacac;
    --color-grey-4: #979797;
    --color-grey-5: #f3f3f3;
    --color-black-1: #22282e;
    --color-white-1: #ffffff;
    --color-blue-1-light: #e0efff;
    --color-blue-2-light: #c5def1;
    --color-green-1-light: #D1F2EB;
    --color-yellow-1-light: #FFF5E0;
    --color-red-1-light: #F5DCDF;
    --color-orange-1-light: #fef3c7;
    --color-purple-1-light: #eef2ff;
    --max-cell-width: 216px;
    --color-task-status-pending_accept: #fff3cd;
    --color-task-status-pending: #ffd7d7;
    --color-task-status-inprogress: #ffebd9;
    --color-task-status-waiting: #dcf5fc;
    --color-task-status-done: #d9ffe6;
    --color-task-priority-low: #d0ffcc;
    --color-task-priority-medium: #ffdbbb;
    --color-task-priority-high: #fdc5cc;


    --brand: #4292e7;
    --brand-600: #2d7fd6;
    --brand-700: #1d70c9;
    --brand-050: #eef5fd;
    --brand-100: #dbe9fb;
    --sage: #4f9474;
    --sage-050: #edf5f0;
    --coral: #e2634a;
    --coral-050: #fbecea;
    --amber: #c88628;
    --amber-050: #fbf1dc;
    --ink: #121821;
    --ink-2: #3a4654;
    --ink-3: #6b7886;
    --ink-4: #9aa5b2;
    --line: #e7e9ee;
    --line-2: #f0f2f6;
    --bg: #f6f7f9;
    --bg-warm: #f4f0e8;
    --surface: #ffffff;
    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-2xl: 44px;
    --shadow-sm: 0 1px 2px rgba(18, 24, 33, 0.04), 0 2px 6px rgba(18, 24, 33, 0.04);
    --shadow-md: 0 4px 14px rgba(18, 24, 33, 0.06), 0 10px 30px rgba(18, 24, 33, 0.06);
    --shadow-lg: 0 10px 40px rgba(18, 24, 33, 0.08), 0 20px 60px rgba(18, 24, 33, 0.06);
    --shadow-brand: 0 10px 30px rgba(66, 146, 231, 0.28);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sans: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
    --serif: "Instrument Serif", Georgia, serif;
}

.color-green-1-light {
    color: var(--color-green-1-light) !important;
}

.color-white-1 {
    color: var(--color-white-1) !important;
}

.color-red-1 {
    color: var(--color-red-1) !important;
}

.color-red-2 {
    color: var(--color-red-2) !important;
}

.color-red-3 {
    color: var(--color-red-3) !important;
}

.color-red-4 {
    color: var(--color-red-4) !important;
}

.color-red-5 {
    color: var(--color-red-5) !important;
}
.color-red-7 {
    color: var(--color-red-7) !important;
}
.color-purple-1 {
    color: var(--color-purple-1) !important;
}


.color-green-1 {
    color: var(--color-green-1) !important;
}

.color-orange-1 {
    color: var(--color-orange-1) !important;
}

.color-orange-2 {
    color: var(--color-orange-2) !important;
}

.color-blue-1 {
    color: var(--color-blue-1) !important;
}

.color-grey-1 {
    color: var(--color-grey-1) !important;
}

.color-grey-2 {
    color: var(--color-grey-2) !important;
}
.color-grey-3 {
    color: var(--color-grey-3) !important;
}
.color-grey-4 {
    color: var(--color-grey-4) !important;
}
.color-black-1 {
    color: var(--color-black-1) !important;
}

.color-blue-2 {
    color: var(--color-blue-2) !important;
}

.color-blue-3 {
    color: var(--color-blue-3) !important;
}

.color-yellow-1 {
    color: var(--color-yellow-1) !important;
}

.bkcolor-red-1 {
    background-color: var(--color-red-1) !important;
}

.bkcolor-red-2 {
    background-color: var(--color-red-2) !important;
}

.bkcolor-red-3 {
    background-color: var(--color-red-3) !important;
}

.bkcolor-red-4 {
    background-color: var(--color-red-4) !important;
}

.bkcolor-red-5 {
    background-color: var(--color-red-5) !important;
}

.bkcolor-red-1-light {
    background-color: var(--color-red-1-light) !important;
}

.bkcolor-orange-1 {
    background-color: var(--color-orange-1) !important;
}

.bkcolor-orange-2 {
    background-color: var(--color-orange-2) !important;
}

.bkcolor-green-1 {
    background-color: var(--color-green-1) !important;
}
.bkcolor-green-5 {
    background-color: var(--color-green-5) !important;
}

.bkcolor-blue-1 {
    background-color: var(--color-blue-1) !important;
}
.bkcolor-blue-2 {
    background-color: var(--color-blue-2) !important;
}

.bkcolor-yellow-1 {
    background-color: var(--color-yellow-1) !important;
}
.bkcolor-grey-1 {
    background-color: var(--color-grey-1) !important;
}
.bkcolor-green-1-light {
    background-color: var(--color-green-1-light) !important;
}

[data-task-status-bg="Pending_Accept"] {
    background-color: var(--color-task-status-pending_accept);
}

[data-task-status-bg="Pending"] {
    background-color: var(--color-task-status-pending);
}

[data-task-status-bg="InProgress"] {
    background-color: var(--color-task-status-inprogress);

}

[data-task-status-bg="Waiting"] {
    background-color: var(--color-task-status-waiting);
}

[data-task-status-bg="Done"] {
    background-color: var(--color-task-status-done);

}

[data-task-priority-bg="Low"] {
    background-color: var(--color-task-priority-low);
    border: 1px solid #07dc07;
    color: #0b640b;
}

[data-task-priority-bg="Medium"] {
    background-color: var(--color-task-priority-medium);
    border: 1px solid #fbac67;
    color: #ba5700;
}

[data-task-priority-bg="High"] {
    background-color: var(--color-task-priority-high);
    color: #940505;
    border: 1px solid #d95039;
}