/* Wbsync documentation theme. Tokens come from reference/colours.css. */

:root {
    --wbgreen-50: #ecf1ff;
    --wbgreen-100: #d8e2fe;
    --wbgreen-200: #b0c6fe;
    --wbgreen-300: #82aafd;
    --wbgreen-400: #3f8efc;
    --wbgreen-500: #1374da;
    --wbgreen-600: #0e5db3;
    --wbgreen-700: #084689;
    --wbgreen-800: #043061;
    --wbgreen-900: #011b3c;
    --wbgreen-950: #011129;

    --wbgrey-100: #f7f7f7;
    --wbgrey-200: #e1e1e1;
    --wbgrey-300: #cfcfcf;
    --wbgrey-400: #b1b1b1;
    --wbgrey-500: #9e9e9e;
    --wbgrey-600: #7e7e7e;
    --wbgrey-700: #626262;
    --wbgrey-800: #515151;
    --wbgrey-900: #3b3b3b;
    --wbgrey-950: #222222;

    --dc-accent: var(--wbgreen-600);
    --dc-accent-fg: #ffffff;
    --dc-bg: #ffffff;
    --dc-bg-elev: var(--wbgrey-100);
    --dc-paper: #ffffff;
    --dc-fg: var(--wbgrey-950);
    --dc-muted: var(--wbgrey-700);
    --dc-subtle: var(--wbgrey-500);
    --dc-rule: var(--wbgrey-200);
    --dc-rule-strong: var(--wbgrey-300);
    --dc-sidebar-bg: var(--wbgrey-100);
    --dc-code-bg: var(--wbgrey-100);
    --dc-code-fg: var(--wbgrey-950);
    --dc-radius: 0.75rem;
    --dc-radius-lg: 0.75rem;
    --dc-tabs-h: 0px;
}

:root:has(.laradocs-tabs) {
    --dc-tabs-h: 0px;
}

.laradocs-tabs {
    display: none;
}

.laradocs-prose ol > li::marker {
    color: var(--wbgreen-600);
    font-weight: 600;
}

[data-theme="dark"] {
    --dc-accent: var(--wbgreen-400);
    --dc-accent-fg: var(--wbgreen-950);
    --dc-bg: var(--wbgreen-950);
    --dc-bg-elev: var(--wbgreen-900);
    --dc-paper: var(--wbgreen-950);
    --dc-fg: var(--wbgrey-100);
    --dc-muted: var(--wbgrey-400);
    --dc-subtle: var(--wbgrey-500);
    --dc-rule: color-mix(in srgb, var(--wbgreen-100) 16%, transparent);
    --dc-rule-strong: color-mix(in srgb, var(--wbgreen-100) 28%, transparent);
    --dc-sidebar-bg: var(--wbgreen-950);
    --dc-code-bg: var(--wbgreen-900);
    --dc-code-fg: var(--wbgrey-100);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dc-accent: var(--wbgreen-400);
        --dc-accent-fg: var(--wbgreen-950);
        --dc-bg: var(--wbgreen-950);
        --dc-bg-elev: var(--wbgreen-900);
        --dc-paper: var(--wbgreen-950);
        --dc-fg: var(--wbgrey-100);
        --dc-muted: var(--wbgrey-400);
        --dc-subtle: var(--wbgrey-500);
        --dc-rule: color-mix(in srgb, var(--wbgreen-100) 16%, transparent);
        --dc-rule-strong: color-mix(in srgb, var(--wbgreen-100) 28%, transparent);
        --dc-sidebar-bg: var(--wbgreen-950);
        --dc-code-bg: var(--wbgreen-900);
        --dc-code-fg: var(--wbgrey-100);
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .laradocs-prose ol > li::marker {
        color: var(--wbgreen-400);
    }
}

[data-theme="dark"] .laradocs-prose ol > li::marker {
    color: var(--wbgreen-400);
}