/* VARIABLES CSS */
:root {
    --primary: #1479FF;
    --background: #FFF;

    --contrast-text: #1479FF;
    --primary-text: #000000;
    --warning-text: #ff0000;
    --secondary-text: #9ca3af;
    --tertiary-text: #d1d5db;

    --border: #d0d4da;
    --shadow: 0 9px 9px 5px rgba(0, 0, 0, 0.05);

    --contrast-bg: rgba(20, 121, 255, 0.1);
}

.shadow-tab-buttons {
    box-shadow: var(--shadow);
}


.text-accent {
    color: var(--primary);
}

.hover\:text-accent:hover {
    color: var(--primary) ;
}

.text-primary {
    color: var(--primary-text);
}

.text-secondary {
    color: var(--secondary-text);
}

.text-tertiary {
    color: var(--tertiary-text);
}

.text-warning {
    color: var(--warning-text);
}

.bg-accent {
    background: var(--primary);
}

.bg-contrast {
    background: var(--contrast-bg);
}

.hover\:bg-base:hover {
    background: var(--background);
}


.fill-accent {
    fill: var(--primary);
}


.border-accent {
    border-color: var(--primary);
}
body {
    background: var(--background);
}



/* EXTRA INFO - TABS ------------------------------------------------------------------ */
/* Define initial tabs colors */
.stroke-primary {
    stroke: var(--primary-text) !important;
}
/* Define hover tabs colors */
.group:hover .group-hover\:text-accent {
    color: var(--primary) !important;
}
.group:hover .group-hover\:stroke-accent {
    stroke: var(--primary) !important;
}
/* Define active tabs colors */
.activeclass {
    border-color: var(--primary) !important;
}
.activeclass svg {
    stroke: var(--primary) !important;
}
.activeclass p {
    color: var(--primary) !important;
}