:root {
    /* primary */
    --sl-color-primary-50: var(--sl-color-blue-50);
    --sl-color-primary-100: var(--sl-color-blue-100);
    --sl-color-primary-150: var(--sl-color-blue-150);
    --sl-color-primary-200: var(--sl-color-blue-200);
    --sl-color-primary-300: var(--sl-color-blue-300);
    --sl-color-primary-400: var(--sl-color-blue-400);
    --sl-color-primary-500: var(--sl-color-blue-500);
    --sl-color-primary-600: var(--sl-color-blue-600);
    --sl-color-primary-700: var(--sl-color-blue-700);
    --sl-color-primary-800: var(--sl-color-blue-800);
    --sl-color-primary-850: var(--sl-color-blue-850);
    --sl-color-primary-900: var(--sl-color-blue-900);
    --sl-color-primary-950: var(--sl-color-blue-950);
    
    /* utils */
    --max-width: 1146px;
    --transition: all 0.2s ease;
    --sl-font-custom: StMartin, sans-serif;
}

/* Expanding Tags */
sl-tag[variant="accent-blue"]::part(base) {
    background-color: var(--sl-color-blue-50);
    border: 1px solid var(--sl-color-blue-200);
    color: var(--sl-color-blue-600);
}

sl-tag[variant="accent-purple"]::part(base) {
    background-color: var(--sl-color-purple-50);
    border: 1px solid var(--sl-color-purple-200);
    color: var(--sl-color-purple-600);
}

sl-tag[variant="accent-rose"]::part(base) {
    background-color: var(--sl-color-fuchsia-50);
    border: 1px solid var(--sl-color-fuchsia-200);
    color: var(--sl-color-fuchsia-600);
}

sl-tag[variant="accent-green"]::part(base) {
    background-color: var(--sl-color-green-50);
    border: 1px solid var(--sl-color-green-200);
    color: var(--sl-color-green-600);
}

sl-tag[variant="accent-indigo"]::part(base) {
    background-color: var(--sl-color-indigo-50);
    border: 1px solid var(--sl-color-indigo-200);
    color: var(--sl-color-indigo-600);
}

sl-tag[variant="accent-white"]::part(base) {
    background-color: var(--sl-color-neutral-0);
    border: 1px solid var(--sl-color-neutral-200);
    color: var(--sl-color-neutral-600);
}


/* Applying to Flexoki Syntax Highlighting */
.hljs {
    color: var(--sl-color-neutral-1000); /* tx - Primary text */
}

.hljs-comment {
    color: var(--sl-color-neutral-600); /* tx-3 - Faint text */
    font-style: italic;
}

.hljs-string {
    color: var(--sl-color-blue-600); /* cy - Strings */
}

.hljs-number {
    color: var(--sl-color-purple-600); /* pu - Numbers */
}

.hljs-keyword {
    color: var(--sl-color-green-600); /* gr - Keywords */
    font-weight: 600;
}

.hljs-function {
    color: var(--sl-color-orange-600); /* or - Functions */
    font-weight: 600;
}

.hljs-variable {
    color: var(--sl-color-blue-600); /* bl - Variables, attributes */
}

.hljs-title {
    color: var(--sl-color-orange-600); /* or - Functions */
    font-weight: 600;
}

.hljs-params {
    color: var(--sl-color-neutral-1000); /* tx - Primary text */
}

.hljs-built_in {
    color: var(--sl-color-yellow-400); /* ye - Constants */
    font-weight: 600;
}

.hljs-literal {
    color: var(--sl-color-purple-400); /* pu - Numbers */
}

.hljs-attr {
    color: var(--sl-color-blue-600); /* bl - Variables, attributes */
}

.hljs-punctuation {
    color: var(--sl-color-neutral-700); /* tx-2 - Muted text */
}

.hljs-operator {
    color: var(--sl-color-neutral-700); /* tx-2 - Punctuation, operators */
}

.hljs-meta {
    color: var(--sl-color-red-600); /* re - Error text */
}