/* Dark palette for the WebHosteur theme.
   Loaded AFTER webhost.css. Nothing in webhost.css is modified or duplicated here: this file only
   re-points the existing design tokens and the handful of colours that were hard-coded for a light
   background. Every rule is prefixed with ":root[data-bs-theme="dark"]" (specificity 0,2,0) so it
   beats webhost.css's ":root, [data-bs-theme="light"]" block (0,1,0) whatever the load order.

   The dark values are the same design, inverted for a dark surface: violet stays the action colour,
   ink-900 becomes near-white text, surface becomes a dark panel. */

:root[data-bs-theme="dark"] {
    /* --- violet: action colour, lightened so it keeps contrast on a dark surface --- */
    --osir-violet-600: #7c74ee;
    --osir-violet-700: #918af6;
    --osir-violet-50: #211f3d;
    --osir-violet-25: #191734;
    --osir-violet-200: #3a3663;

    /* --- ink: in dark mode the scale runs light-on-dark, so 900 is the brightest --- */
    --osir-ink-900: #f3f3f7;
    --osir-ink-700: #d7d8df;
    --osir-ink-500: #9ea1ac;
    --osir-ink-400: #868a94;
    --osir-ink-300: #6f737d;

    /* --- surfaces --- */
    --osir-page: #131318;
    --osir-ground: #1b1b21;
    --osir-surface: #1c1c22;
    --osir-line: #2f2f38;
    --osir-line-soft: #26262e;

    /* Elevation. Dark surfaces do not read against each other the way light ones do, so these are
       deeper and carry no light-side highlight. */
    --osir-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --osir-shadow-md: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -18px rgba(0, 0, 0, .70);
    --osir-shadow-lg: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px -22px rgba(0, 0, 0, .75);

    /* --- status --- */
    --osir-ok: #4cc38a;
    --osir-ok-bg: #14261c;
    --osir-ok-line: #24422f;
    --osir-warn: #e0a94a;
    --osir-warn-bg: #2a2213;
    --osir-warn-line: #453819;
    --osir-danger: #e88a9c;
    --osir-danger-bg: #2c171c;
    --osir-danger-line: #4b262d;

    /* --- the few Bootstrap values webhost.css hard-codes rather than deriving from a token --- */
    --bs-body-color-rgb: 215, 216, 223;
    --bs-tertiary-bg: #17171c;
    --bs-primary-rgb: 124, 116, 238;
    --bs-link-color-rgb: 124, 116, 238;
    --bs-link-hover-color-rgb: 145, 138, 246;
    --bs-focus-ring-color: rgba(124, 116, 238, .35);
}

/* --- colours that were written as literal light-mode values in webhost.css --- */

:root[data-bs-theme="dark"] .osir-mark::after {
    border-color: var(--osir-surface);
}

:root[data-bs-theme="dark"] .card-footer,
:root[data-bs-theme="dark"] .table > thead > tr > th,
:root[data-bs-theme="dark"] .osir-price {
    background: #17171c;
}

/* The selected TLD in the price list. The block above hard-codes .osir-price's background, and it
   outranks the plain .osir-price.active rule in webhost-home.css, so the violet selection fill has
   to be re-pointed here or the selected TLD would not read as selected in dark mode. */
:root[data-bs-theme="dark"] .osir-price.active {
    background: var(--osir-violet-600);
    border-color: var(--osir-violet-600);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px #fff;
}

:root[data-bs-theme="dark"] .osir-price:hover {
    background: #232329;
    border-color: var(--osir-violet-200);
}

:root[data-bs-theme="dark"] .table {
    --bs-table-border-color: #26262e;
    --bs-table-hover-bg: #1a1a20;
    --bs-table-striped-bg: #1a1a20;
}

:root[data-bs-theme="dark"] .badge.bg-secondary,
:root[data-bs-theme="dark"] .badge.text-bg-secondary,
:root[data-bs-theme="dark"] .badge.bg-light,
:root[data-bs-theme="dark"] .badge.bg-dark {
    background: #232329 !important;
}

:root[data-bs-theme="dark"] .progress {
    --bs-progress-bg: #26262e;
}

:root[data-bs-theme="dark"] .osir-link:hover {
    border-color: #3b3b46;
    background: #232329;
}

/* The popped-out "New here" card. Its violet tokens are already remapped above, so only the
   shadow needs help: a dark shadow is invisible on a dark surface. */
:root[data-bs-theme="dark"] .osir-link--new {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

:root[data-bs-theme="dark"] .btn-dark,
:root[data-bs-theme="dark"] .btn-secondary,
:root[data-bs-theme="dark"] .btn-light,
:root[data-bs-theme="dark"] .btn-outline-primary,
:root[data-bs-theme="dark"] .btn-outline-secondary,
:root[data-bs-theme="dark"] .btn-outline-dark,
:root[data-bs-theme="dark"] .btn-info {
    --bs-btn-hover-bg: #24242b;
    --bs-btn-hover-border-color: #3b3b46;
    --bs-btn-active-bg: #2a2a32;
    --bs-btn-active-border-color: #3b3b46;
}

/* The light/dark switch itself is not styled here. It uses the same markup as hosteur.ma
   (.nav-link.js-theme-toggler with .hide-theme-dark / .hide-theme-light icons), and huraga.css -
   which the layouts already load - provides all of it:
     [data-bs-theme=light] .hide-theme-light,
     [data-bs-theme=dark]  .hide-theme-dark { display: none !important }
     .js-theme-toggler { display: inline-flex; align-items: center; padding: .5rem .75rem }
     .icon { height: 20px; width: 20px; fill: none; stroke: currentColor; ... }
   Adding a competing style here would make it differ from hosteur.ma. */