/* TIC Lens API — Scalar theme */
:root {
    --scalar-text-decoration: none;
    --scalar-text-decoration-hover: none;
    --scalar-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --scalar-font-code: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
}
.scalar-app {
    --refs-sidebar-width: 380px;
}

.light-mode {
    --scalar-background-1: #f9f8f6;
    --scalar-background-2: #ffffff;
    --scalar-background-3: #f5f4f2;
    --scalar-background-accent: rgba(53, 122, 107, 0.08);

    --scalar-color-1: #1f1f1f;
    --scalar-color-2: #525252;
    --scalar-color-3: #5c5c5c;

    --scalar-color-accent: #357a6b;
    --scalar-border-color: #e5e5e5;
}

.dark-mode {
    --scalar-background-1: #1a1a1a;
    --scalar-background-2: #242424;
    --scalar-background-3: #2a2a2a;

    --scalar-color-1: #fafafa;
    --scalar-color-2: #d4d4d8;
    --scalar-color-3: #b4b4bb;

    --scalar-color-accent: #4a9c88;
    --scalar-background-accent: rgba(74, 156, 136, 0.12);

    --scalar-border-color: #333333;
}

/* Document Sidebar */
.light-mode,
.dark-mode {
    --scalar-sidebar-background-1: var(--scalar-background-1);
    --scalar-sidebar-color-1: var(--scalar-color-1);
    --scalar-sidebar-color-2: var(--scalar-color-2);
    --scalar-sidebar-border-color: var(--scalar-border-color);

    --scalar-sidebar-item-hover-background: var(--scalar-background-2);
    --scalar-sidebar-item-hover-color: var(--scalar-sidebar-color-2);

    --scalar-sidebar-item-active-background: var(--scalar-background-2);
    --scalar-sidebar-color-active: var(--scalar-sidebar-color-1);

    --scalar-sidebar-indent-border: var(--scalar-sidebar-border-color);
    --scalar-sidebar-indent-border-hover: var(--scalar-sidebar-border-color);
    --scalar-sidebar-indent-border-active: var(--scalar-sidebar-border-color);

    --scalar-sidebar-search-background: color-mix(in srgb, var(--scalar-background-2), var(--scalar-background-1));
    --scalar-sidebar-search-color: var(--scalar-color-3);
    --scalar-sidebar-search-border-color: var(--scalar-border-color);
}

/* Advanced — light */
.light-mode {
    --scalar-color-green: #4a9d7c;
    --scalar-color-red: #c75555;
    --scalar-color-yellow: #c9a857;
    --scalar-color-blue: #3b82f6;
    --scalar-color-orange: #ff5800;
    --scalar-color-purple: #8b5cf6;

    --scalar-link-color: var(--scalar-color-1);
    --scalar-link-color-hover: var(--scalar-link-color);

    --scalar-button-1: #357a6b;
    --scalar-button-1-hover: #2d6a5c;
    --scalar-button-1-color: #ffffff;

    --scalar-tooltip-background: color-mix(in srgb, #1a1a1a, transparent 10%);
    --scalar-tooltip-color: color-mix(in srgb, #fff, transparent 15%);

    --scalar-color-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-color-1) 20%);
    --scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-color-1) 20%);

    --scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 95%);
    --scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 95%);
}

/* Advanced — dark */
.dark-mode {
    --scalar-color-green: #5db88e;
    --scalar-color-red: #d47070;
    --scalar-color-yellow: #d4b86a;
    --scalar-color-blue: #4eb3ec;
    --scalar-color-orange: #ff8d4d;
    --scalar-color-purple: #b191f9;

    --scalar-link-color: var(--scalar-color-1);
    --scalar-link-color-hover: var(--scalar-link-color);

    --scalar-button-1: #4a9c88;
    --scalar-button-1-hover: #3d8b78;
    --scalar-button-1-color: #ffffff;

    --scalar-tooltip-background: color-mix(in srgb, var(--scalar-background-1), #fff 10%);
    --scalar-tooltip-color: color-mix(in srgb, #fff, transparent 5%);

    --scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 20%);

    --scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 95%);
    --scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 95%);
}

/* Badge overrides — only tier badges (with inline style from x-badges), not the v1 version badge */
.badge[style] {
    --badge-border-color: var(--badge-background-color) !important;
    color: #fff !important;
    font-weight: 500;
}

/* Override display-p3 wide gamut colors to keep TIC brand consistent */
@supports (color: color(display-p3 1 1 1)) {
    .light-mode {
        --scalar-color-accent: color(display-p3 0.208 0.478 0.420);
        --scalar-color-green: color(display-p3 0.290 0.616 0.486);
        --scalar-color-red: color(display-p3 0.780 0.333 0.333);
    }
    .dark-mode {
        --scalar-color-accent: color(display-p3 0.290 0.612 0.533);
        --scalar-color-green: color(display-p3 0.365 0.722 0.557);
        --scalar-color-red: color(display-p3 0.831 0.439 0.439);
    }
}