/* HSH-LAB Custom Theme — Hqv/HSH "Hexagonal" Design */
/* Overrides Bootstrap 5.3 CSS variables for light and dark themes */
/* See: https://www.figma.com/design/bBjMKBgIsjDVbv5a26URro/HSH--Hexagon-local-lib-?node-id=241-11866&t=wFEOC2MtAi5oPcoA-0 */

[data-bs-theme="light"] {
    /* Design tokens */
    --hsh-background: #EEEEED;
    --hsh-on-background: #3D3D3C;
    --hsh-on-background-variant: #595959;
    --hsh-surface: #FFFFFF;
    --hsh-on-surface: #3D3D3C;
    --hsh-on-surface-variant: #595959;
    --hsh-surface-inverted: #3D3D3C;
    --hsh-on-surface-inverted: #EEEEED;
    --hsh-surface-hover: #D2D2D1;
    --hsh-primary: #F25420;
    --hsh-on-primary: #FFFFFF;
    --hsh-error: #B9222A;
    --hsh-caution: #FFC800;
    --hsh-success: #299B00;
    --hsh-connection: #4076D0;

    /* Bootstrap global overrides */
    --bs-body-bg: var(--hsh-background);
    --bs-body-color: var(--hsh-on-background);
    --bs-secondary-color: var(--hsh-on-background-variant);
    --bs-tertiary-color: var(--hsh-on-surface-variant);
    --bs-emphasis-color: var(--hsh-on-background);

    --bs-primary: var(--hsh-primary);
    --bs-primary-rgb: 242, 84, 32;
    --bs-danger: var(--hsh-error);
    --bs-danger-rgb: 185, 34, 42;
    --bs-warning: var(--hsh-caution);
    --bs-warning-rgb: 255, 200, 0;
    --bs-success: var(--hsh-success);
    --bs-success-rgb: 41, 155, 0;
    --bs-info: var(--hsh-connection);
    --bs-info-rgb: 64, 118, 208;

    --bs-border-color: var(--hsh-surface-hover);
    --bs-card-bg: var(--hsh-surface);
    --bs-card-color: var(--hsh-on-surface);
    --bs-tertiary-bg: #F5F5F4;

    --bs-link-color: var(--hsh-primary);
    --bs-link-color-rgb: 242, 84, 32;
    --bs-link-hover-color: #D54A1C;
    --bs-link-hover-color-rgb: 213, 74, 28;
    --bs-focus-ring-color: rgba(242, 84, 32, 0.25);
}

[data-bs-theme="dark"] {
    /* Design tokens */
    --hsh-background: #1E1E1D;
    --hsh-on-background: #EEEEED;
    --hsh-on-background-variant: #B0B0B1;
    --hsh-surface: #2C2C2C;
    --hsh-on-surface: #EEEEED;
    --hsh-on-surface-variant: #B0B0B1;
    --hsh-surface-inverted: #EEEEED;
    --hsh-on-surface-inverted: #1E1E1D;
    --hsh-surface-hover: #3D3D3C;
    --hsh-primary: #F25420;
    --hsh-on-primary: #FFFFFF;
    --hsh-secondary: #284981;
    --hsh-error: #E45C64;
    --hsh-caution: #FFC800;
    --hsh-success: #31B900;
    --hsh-connection: #699FF9;

    /* Bootstrap global overrides */
    --bs-body-bg: var(--hsh-background);
    --bs-body-color: var(--hsh-on-background);
    --bs-secondary-color: var(--hsh-on-background-variant);
    --bs-tertiary-color: var(--hsh-on-surface-variant);
    --bs-emphasis-color: var(--hsh-on-background);

    --bs-primary: var(--hsh-primary);
    --bs-primary-rgb: 242, 84, 32;
    --bs-danger: var(--hsh-error);
    --bs-danger-rgb: 228, 92, 100;
    --bs-warning: var(--hsh-caution);
    --bs-warning-rgb: 255, 200, 0;
    --bs-success: var(--hsh-success);
    --bs-success-rgb: 49, 185, 0;
    --bs-info: var(--hsh-connection);
    --bs-info-rgb: 105, 159, 249;

    --bs-border-color: var(--hsh-surface-hover);
    --bs-card-bg: var(--hsh-surface);
    --bs-card-color: var(--hsh-on-surface);
    --bs-tertiary-bg: #333332;

    --bs-link-color: var(--hsh-primary);
    --bs-link-color-rgb: 242, 84, 32;
    --bs-link-hover-color: #F4764D;
    --bs-link-hover-color-rgb: 244, 118, 77;
    --bs-focus-ring-color: rgba(242, 84, 32, 0.25);
}

/* ── Button overrides (Bootstrap compiles these as hardcoded values) ── */

.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #F25420;
    --bs-btn-border-color: #F25420;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #D54A1C;
    --bs-btn-hover-border-color: #C6451A;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #C6451A;
    --bs-btn-active-border-color: #BA4018;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #F25420;
    --bs-btn-disabled-border-color: #F25420;
}

.btn-outline-primary {
    --bs-btn-color: #F25420;
    --bs-btn-border-color: #F25420;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #F25420;
    --bs-btn-hover-border-color: #F25420;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #F25420;
    --bs-btn-active-border-color: #F25420;
    --bs-btn-disabled-color: #F25420;
    --bs-btn-disabled-border-color: #F25420;
}

[data-bs-theme="light"] .btn-danger {
    --bs-btn-bg: #B9222A;
    --bs-btn-border-color: #B9222A;
    --bs-btn-hover-bg: #9D1D24;
    --bs-btn-hover-border-color: #941B22;
    --bs-btn-active-bg: #941B22;
    --bs-btn-active-border-color: #8A191F;
}

[data-bs-theme="dark"] .btn-danger {
    --bs-btn-bg: #E45C64;
    --bs-btn-border-color: #E45C64;
    --bs-btn-hover-bg: #C94E55;
    --bs-btn-hover-border-color: #BE4A50;
    --bs-btn-active-bg: #BE4A50;
    --bs-btn-active-border-color: #B3464C;
}

[data-bs-theme="light"] .btn-success {
    --bs-btn-bg: #299B00;
    --bs-btn-border-color: #299B00;
    --bs-btn-hover-bg: #238400;
    --bs-btn-hover-border-color: #207C00;
    --bs-btn-active-bg: #207C00;
    --bs-btn-active-border-color: #1D7400;
}

[data-bs-theme="dark"] .btn-success {
    --bs-btn-bg: #31B900;
    --bs-btn-border-color: #31B900;
    --bs-btn-hover-bg: #2A9E00;
    --bs-btn-hover-border-color: #279500;
    --bs-btn-active-bg: #279500;
    --bs-btn-active-border-color: #248C00;
}

/* ── Badge overrides ── */

.badge.bg-primary { background-color: var(--hsh-primary) !important; }
.badge.bg-danger { background-color: var(--hsh-error) !important; }
.badge.bg-warning { background-color: var(--hsh-caution) !important; color: #1E1E1D !important; }
.badge.bg-success { background-color: var(--hsh-success) !important; }
.badge.bg-info { background-color: var(--hsh-connection) !important; }

/* ── Form control overrides ── */

.form-control:focus,
.form-select:focus {
    border-color: var(--hsh-primary);
    box-shadow: 0 0 0 0.25rem rgba(242, 84, 32, 0.25);
}

.form-check-input:checked {
    background-color: var(--hsh-primary);
    border-color: var(--hsh-primary);
}
