// General reusable colors from our custom color palette

// Gray (blueish) palette
$white: white;
$gray-01: #f2f4f8;
$gray-02: #e4e9f1;
$gray-03: #d7ddea;
$gray-04: #cad2e2;
$gray-05: #bdc7db;
$gray-06: #afbcd4;
$gray-07: #a2b0cd;
$gray-08: #95a5c6;
$gray-09: #889abf;
$gray-10: #7a8fb8;
$gray-11: #6d84b0;
$gray-12: #6078a9;
$gray-13: #566e9f;
$gray-14: #4f6592;
$gray-15: #475c85;
$gray-16: #405377;
$gray-17: #39496a;
$gray-18: #32405d;
$gray-19: #2b3750;
$gray-20: #242e42;
$gray-21: #1d2535;
$gray-22: #151c28;
$gray-23: #0e121b;
$black: #07090d;

// Dark Theme

$color-bg-1: #151c28;
$color-bg-2: #1d2535;
$color-bg-3: #2b3750;
$color-bg-4: #0e121b;
$color-bg-5: #39496a;
$color-text: #f2f4f8;
$color-text-1: #a2b0cd;
$color-text-2: #f2f4f8;
$color-text-3: white;
$color-border: #2b3750;
$color-border-hover: #566e9f;

$color-border-active: #329af0;

// TODO add Basics color standards to Dark Theme

// Light Theme
// Basics
$color-light-bg-1: white;
$color-light-bg-2: #f2f4f8;
$color-light-bg-3: #cad2e2;
$color-light-bg-4: #e4e9f1;
$color-light-bg-5: #566e9f;
$color-light-bg-6: #070a0d;
$color-light-text-1: #2b3750;
$color-light-text-2: #6d727c;
$color-light-text-3: rgba(57, 73, 106, 0.5);
$color-light-text-4: white;
$color-light-text-5: #07090d;
$color-light-text-6: #1d2535;

$color-light-border: #cad2e2;
$color-light-border-2: #e4e9f1;

.bg-striped-secondary {
    background: repeating-linear-gradient(
        45deg,
        var(--secondary),
        var(--secondary) 10px,
        transparent 10px,
        transparent 20px
    );
}