/* ==========================================
   COLOR TOKENS
========================================== */

:root {
    /* PRIMARY */
    --color-primary: #0d6efd;
    --color-primary-light: #e9f2ff;
    --color-primary-dark: #0b5fd6;
    /* SECONDARY */
    --color-secondary: #6b7280;
    --color-secondary-light: #f3f4f6;
    /* SUCCESS */
    --color-success: #198754;
    --color-success-light: #e9f9ef;
    /* DANGER */
    --color-danger: #dc3545;
    --color-danger-light: #fff0f1;
    /* WARNING */
    --color-warning: #ffc107;
    --color-warning-light: #fff8e6;
    /* INFO */
    --color-info: #0dcaf0;
    --color-info-light: #e8fbff;
    /* NEUTRAL */
    --color-white: #ffffff;
    --color-black: #000000;
    /* SURFACE */
    --color-bg: #f7f8fb;
    --color-surface: #ffffff;
    --color-border: #e6e9ee;
    /* TEXT */
    --color-heading: #1e293b;
    --color-text: #334155;
    --color-text-muted: #64748b;
    --color-disabled: #94a3b8;
    /* LINKS */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);
    /* SELECTION */
    --color-selection-bg: var(--color-primary);
    --color-selection-text: var(--color-white);
}

/* ==========================================
   PAGE
========================================== */

body {
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* ==========================================
   HEADINGS
========================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);
}

/* ==========================================
   TEXT
========================================== */

p,
label,
span,
li,
td,
th,
dt,
dd {
    color: var(--color-text);
}

small {
    color: var(--color-text-muted);
}

strong,
b {
    color: inherit;
}

/* ==========================================
   LINKS
========================================== */

a {
    color: var(--color-link);
}

    a:hover {
        color: var(--color-link-hover);
    }

/* ==========================================
   HORIZONTAL RULE
========================================== */

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
}

/* ==========================================
   FORM ELEMENTS
========================================== */

input,
textarea,
select {
    color: var(--color-text);
    background-color: var(--color-white);
}

    input::placeholder,
    textarea::placeholder {
        color: var(--color-text-muted);
    }

/* ==========================================
   TABLES
========================================== */

table {
    color: var(--color-text);
}

thead {
    color: var(--color-heading);
}

/* ==========================================
   DISABLED
========================================== */

:disabled,
.disabled {
    color: var(--color-disabled);
}

/* ==========================================
   TEXT HELPERS
========================================== */

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

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

.text-success {
    color: var(--color-success) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

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

.text-info {
    color: var(--color-info) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-black {
    color: var(--color-black) !important;
}

/* ==========================================
   BACKGROUND HELPERS
========================================== */

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
}

.bg-info {
    background-color: var(--color-info) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-surface {
    background-color: var(--color-surface) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* ==========================================
   BORDER HELPERS
========================================== */

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-secondary) !important;
}

.border-success {
    border-color: var(--color-success) !important;
}

.border-danger {
    border-color: var(--color-danger) !important;
}

.border-warning {
    border-color: var(--color-warning) !important;
}

.border-info {
    border-color: var(--color-info) !important;
}

.border-default {
    border-color: var(--color-border) !important;
}

/* ==========================================
   TEXT SELECTION
========================================== */

::selection {
    background: var(--color-selection-bg);
    color: var(--color-selection-text);
}