/*
 * Theme-tinted dark surfaces.
 * Remaps Tailwind's cool slate grays (gray-600..gray-950) used as dark
 * surfaces to a neutral charcoal subtly blended with the brand color
 * (--color-base), so dark mode + the always-dark nav/sidebar match the theme.
 * Generated — edit gen script, not this file by hand.
 * Only surfaces/borders/dividers/rings are remapped; text-gray-* is untouched.
 */

:root {
    --surface-950: color-mix(in srgb, rgb(var(--color-base)) 6%, #0c0c0c);
    --surface-900: color-mix(in srgb, rgb(var(--color-base)) 8%, #181818);
    --surface-800: color-mix(in srgb, rgb(var(--color-base)) 9%, #242424);
    --surface-700: color-mix(in srgb, rgb(var(--color-base)) 10%, #333333);
    --surface-600: color-mix(in srgb, rgb(var(--color-base)) 11%, #4b4b4b);
}

/* Solid backgrounds */
.bg-gray-950 { background-color: var(--surface-950) !important; }
.dark .dark\:bg-gray-950 { background-color: var(--surface-950) !important; }
.bg-gray-900 { background-color: var(--surface-900) !important; }
.dark .dark\:bg-gray-900 { background-color: var(--surface-900) !important; }
.bg-gray-800 { background-color: var(--surface-800) !important; }
.dark .dark\:bg-gray-800 { background-color: var(--surface-800) !important; }
.bg-gray-700 { background-color: var(--surface-700) !important; }
.dark .dark\:bg-gray-700 { background-color: var(--surface-700) !important; }
.bg-gray-600 { background-color: var(--surface-600) !important; }
.dark .dark\:bg-gray-600 { background-color: var(--surface-600) !important; }

/* Solid borders */
.border-gray-600 { border-color: var(--surface-600) !important; }
.dark .dark\:border-gray-600 { border-color: var(--surface-600) !important; }
.border-gray-700 { border-color: var(--surface-700) !important; }
.dark .dark\:border-gray-700 { border-color: var(--surface-700) !important; }
.border-gray-800 { border-color: var(--surface-800) !important; }
.dark .dark\:border-gray-800 { border-color: var(--surface-800) !important; }
.border-gray-900 { border-color: var(--surface-900) !important; }
.dark .dark\:border-gray-900 { border-color: var(--surface-900) !important; }

/* Solid dividers */
.divide-gray-600 > :not([hidden]) ~ :not([hidden]) { border-color: var(--surface-600) !important; }
.dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) { border-color: var(--surface-600) !important; }
.divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--surface-700) !important; }
.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--surface-700) !important; }

/* Solid rings */
.dark .dark\:ring-gray-600 { --tw-ring-color: var(--surface-600) !important; }
.dark .dark\:ring-gray-700 { --tw-ring-color: var(--surface-700) !important; }
.dark .dark\:ring-gray-800 { --tw-ring-color: var(--surface-800) !important; }
.dark .dark\:ring-gray-900 { --tw-ring-color: var(--surface-900) !important; }

/* Translucent background overlays / hover states */
.bg-gray-700\/80 { background-color: color-mix(in srgb, transparent 20%, var(--surface-700)) !important; }
.dark .dark\:bg-gray-700\/80 { background-color: color-mix(in srgb, transparent 20%, var(--surface-700)) !important; }
.bg-gray-700\/60 { background-color: color-mix(in srgb, transparent 40%, var(--surface-700)) !important; }
.dark .dark\:bg-gray-700\/60 { background-color: color-mix(in srgb, transparent 40%, var(--surface-700)) !important; }
.bg-gray-700\/50 { background-color: color-mix(in srgb, transparent 50%, var(--surface-700)) !important; }
.dark .dark\:bg-gray-700\/50 { background-color: color-mix(in srgb, transparent 50%, var(--surface-700)) !important; }
.bg-gray-700\/40 { background-color: color-mix(in srgb, transparent 60%, var(--surface-700)) !important; }
.dark .dark\:bg-gray-700\/40 { background-color: color-mix(in srgb, transparent 60%, var(--surface-700)) !important; }
.bg-gray-800\/90 { background-color: color-mix(in srgb, transparent 10%, var(--surface-800)) !important; }
.dark .dark\:bg-gray-800\/90 { background-color: color-mix(in srgb, transparent 10%, var(--surface-800)) !important; }
.bg-gray-800\/80 { background-color: color-mix(in srgb, transparent 20%, var(--surface-800)) !important; }
.dark .dark\:bg-gray-800\/80 { background-color: color-mix(in srgb, transparent 20%, var(--surface-800)) !important; }
.bg-gray-800\/60 { background-color: color-mix(in srgb, transparent 40%, var(--surface-800)) !important; }
.dark .dark\:bg-gray-800\/60 { background-color: color-mix(in srgb, transparent 40%, var(--surface-800)) !important; }
.bg-gray-800\/50 { background-color: color-mix(in srgb, transparent 50%, var(--surface-800)) !important; }
.dark .dark\:bg-gray-800\/50 { background-color: color-mix(in srgb, transparent 50%, var(--surface-800)) !important; }
.bg-gray-800\/30 { background-color: color-mix(in srgb, transparent 70%, var(--surface-800)) !important; }
.dark .dark\:bg-gray-800\/30 { background-color: color-mix(in srgb, transparent 70%, var(--surface-800)) !important; }
.bg-gray-900\/95 { background-color: color-mix(in srgb, transparent 5%, var(--surface-900)) !important; }
.dark .dark\:bg-gray-900\/95 { background-color: color-mix(in srgb, transparent 5%, var(--surface-900)) !important; }
.bg-gray-900\/90 { background-color: color-mix(in srgb, transparent 10%, var(--surface-900)) !important; }
.dark .dark\:bg-gray-900\/90 { background-color: color-mix(in srgb, transparent 10%, var(--surface-900)) !important; }
.bg-gray-900\/80 { background-color: color-mix(in srgb, transparent 20%, var(--surface-900)) !important; }
.dark .dark\:bg-gray-900\/80 { background-color: color-mix(in srgb, transparent 20%, var(--surface-900)) !important; }
.bg-gray-900\/70 { background-color: color-mix(in srgb, transparent 30%, var(--surface-900)) !important; }
.dark .dark\:bg-gray-900\/70 { background-color: color-mix(in srgb, transparent 30%, var(--surface-900)) !important; }
.bg-gray-900\/50 { background-color: color-mix(in srgb, transparent 50%, var(--surface-900)) !important; }
.dark .dark\:bg-gray-900\/50 { background-color: color-mix(in srgb, transparent 50%, var(--surface-900)) !important; }
.bg-gray-900\/40 { background-color: color-mix(in srgb, transparent 60%, var(--surface-900)) !important; }
.dark .dark\:bg-gray-900\/40 { background-color: color-mix(in srgb, transparent 60%, var(--surface-900)) !important; }
.bg-gray-900\/30 { background-color: color-mix(in srgb, transparent 70%, var(--surface-900)) !important; }
.dark .dark\:bg-gray-900\/30 { background-color: color-mix(in srgb, transparent 70%, var(--surface-900)) !important; }
.bg-gray-900\/20 { background-color: color-mix(in srgb, transparent 80%, var(--surface-900)) !important; }
.dark .dark\:bg-gray-900\/20 { background-color: color-mix(in srgb, transparent 80%, var(--surface-900)) !important; }

/* Translucent borders */
.border-gray-700\/80 { border-color: color-mix(in srgb, transparent 20%, var(--surface-700)) !important; }
.dark .dark\:border-gray-700\/80 { border-color: color-mix(in srgb, transparent 20%, var(--surface-700)) !important; }
.border-gray-600\/80 { border-color: color-mix(in srgb, transparent 20%, var(--surface-600)) !important; }
.dark .dark\:border-gray-600\/80 { border-color: color-mix(in srgb, transparent 20%, var(--surface-600)) !important; }
.border-gray-600\/50 { border-color: color-mix(in srgb, transparent 50%, var(--surface-600)) !important; }
.dark .dark\:border-gray-600\/50 { border-color: color-mix(in srgb, transparent 50%, var(--surface-600)) !important; }
/* Translucent dividers */
.dark .dark\:divide-gray-700\/80 > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb, transparent 20%, var(--surface-700)) !important; }
.dark .dark\:divide-gray-700\/70 > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb, transparent 30%, var(--surface-700)) !important; }