/* ==========================================================================
   ui.css — HostCraft / Carbon Design System Tokens & Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS VARIABLES (Carbon Color Palette)
   -------------------------------------------------------------------------- */
:root {
   /* --- BLUE (Primary Brand) --- */
   --blue-10: #edf5ff;
   --blue-20: #d0e2ff;
   --blue-30: #a6c8ff;
   --blue-40: #78a9ff;
   --blue-50: #4589ff;
   --blue-60: #0f62fe;
   --blue-70: #0043ce;
   --blue-80: #002d9c;
   --blue-90: #001d6c;
   --blue-100: #001141;

   /* --- GRAY (Neutral Backgrounds) --- */
   --gray-10: #f4f4f4;
   --gray-20: #e0e0e0;
   --gray-30: #c6c6c6;
   --gray-40: #a8a8a8;
   --gray-50: #8d8d8d;
   --gray-60: #6f6f6f;
   --gray-70: #525252;
   --gray-80: #393939;
   --gray-90: #262626;
   --gray-100: #161616;

   /* --- GREEN (Success/Online) --- */
   --green-10: #defbe6;
   --green-20: #a7f0ba;
   --green-30: #6fdc8c;
   --green-40: #42be65;
   --green-50: #24a148;
   --green-60: #198038;
   --green-70: #0e6027;
   --green-80: #044317;
   --green-90: #022d0d;
   --green-100: #071908;

   /* --- PURPLE (Enterprise/Storage) --- */
   --purple-10: #f6f2ff;
   --purple-20: #e8daff;
   --purple-30: #d4bbff;
   --purple-40: #be95ff;
   --purple-50: #a56eff;
   --purple-60: #8a3ffc;
   --purple-70: #6929c4;
   --purple-80: #491d8b;
   --purple-90: #31135e;
   --purple-100: #1c0f30;

   /* --- TEAL (Control/Terminal) --- */
   --teal-10: #d9fbfb;
   --teal-20: #9ef0f0;
   --teal-30: #3ddbd9;
   --teal-40: #08bdba;
   --teal-50: #009d9a;
   --teal-60: #007d79;
   --teal-70: #005d5d;
   --teal-80: #004144;
   --teal-90: #022b30;
   --teal-100: #081a1c;

   /* --- RED (Error/Alert) --- */
   --red-10: #fff1f1;
   --red-20: #ffd7d9;
   --red-30: #ffb3b8;
   --red-40: #ff8389;
   --red-50: #fa4d56;
   --red-60: #da1e28;
   --red-70: #a2191f;
   --red-80: #750e13;
   --red-90: #520408;
   --red-100: #2d0709;

   /* --- CYAN (Network/Cooling) --- */
   --cyan-10: #e5f6ff;
   --cyan-20: #bae6ff;
   --cyan-30: #82cfff;
   --cyan-40: #33b1ff;
   --cyan-50: #1192e8;
   --cyan-60: #0072c3;
   --cyan-70: #00539a;
   --cyan-80: #003a6d;
   --cyan-90: #012749;
   --cyan-100: #061727;

   /* --- MAGENTA (Marketing) --- */
   --magenta-10: #fff0f7;
   --magenta-20: #ffd6e8;
   --magenta-30: #ffafd2;
   --magenta-40: #ff7eb6;
   --magenta-50: #ee5396;
   --magenta-60: #d02670;
   --magenta-70: #9f1853;
   --magenta-80: #740937;
   --magenta-90: #510224;
   --magenta-100: #2a0a18;

   /* --- COOL GRAY (Hardware) --- */
   --coolgray-10: #f2f4f8;
   --coolgray-20: #dde1e6;
   --coolgray-30: #c1c7cd;
   --coolgray-40: #a2a9b0;
   --coolgray-50: #878d96;
   --coolgray-60: #697077;
   --coolgray-70: #4d5358;
   --coolgray-80: #343a3f;
   --coolgray-90: #21272a;
   --coolgray-100: #121619;

   /* --- WARM GRAY --- */
   --warmgray-10: #f7f3f2;
   --warmgray-20: #e5e0df;
   --warmgray-30: #cac5c4;
   --warmgray-40: #ada8a8;
   --warmgray-50: #8f8b8b;
   --warmgray-60: #726e6e;
   --warmgray-70: #565151;
   --warmgray-80: #3c3838;
   --warmgray-90: #272525;
   --warmgray-100: #171414;

   /* --- BASIC --- */
   --black: #000000;
   --white: #ffffff;
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESETS
   -------------------------------------------------------------------------- */
body {
   font-family: 'IBM Plex Sans', sans-serif;
   background-color: var(--gray-10);
   color: var(--gray-100);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
}

/* Carbon Design System requires sharp edges */
* {
   border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   3. COLOR UTILITY CLASSES
   Generates .text-*, .bg-*, .border-*, .fill-*, .stroke-*
   -------------------------------------------------------------------------- */

/* --- BLUE --- */
.text-blue-10 {
   color: var(--blue-10) !important;
}

.bg-blue-10 {
   background-color: var(--blue-10) !important;
}

.border-blue-10 {
   border-color: var(--blue-10) !important;
}

.text-blue-20 {
   color: var(--blue-20) !important;
}

.bg-blue-20 {
   background-color: var(--blue-20) !important;
}

.border-blue-20 {
   border-color: var(--blue-20) !important;
}

.text-blue-30 {
   color: var(--blue-30) !important;
}

.bg-blue-30 {
   background-color: var(--blue-30) !important;
}

.border-blue-30 {
   border-color: var(--blue-30) !important;
}

.text-blue-40 {
   color: var(--blue-40) !important;
}

.bg-blue-40 {
   background-color: var(--blue-40) !important;
}

.border-blue-40 {
   border-color: var(--blue-40) !important;
}

.text-blue-50 {
   color: var(--blue-50) !important;
}

.bg-blue-50 {
   background-color: var(--blue-50) !important;
}

.border-blue-50 {
   border-color: var(--blue-50) !important;
}

.text-blue-60 {
   color: var(--blue-60) !important;
}

.bg-blue-60 {
   background-color: var(--blue-60) !important;
}

.border-blue-60 {
   border-color: var(--blue-60) !important;
}

.text-blue-70 {
   color: var(--blue-70) !important;
}

.bg-blue-70 {
   background-color: var(--blue-70) !important;
}

.border-blue-70 {
   border-color: var(--blue-70) !important;
}

.text-blue-80 {
   color: var(--blue-80) !important;
}

.bg-blue-80 {
   background-color: var(--blue-80) !important;
}

.border-blue-80 {
   border-color: var(--blue-80) !important;
}

.text-blue-90 {
   color: var(--blue-90) !important;
}

.bg-blue-90 {
   background-color: var(--blue-90) !important;
}

.border-blue-90 {
   border-color: var(--blue-90) !important;
}

.text-blue-100 {
   color: var(--blue-100) !important;
}

.bg-blue-100 {
   background-color: var(--blue-100) !important;
}

.border-blue-100 {
   border-color: var(--blue-100) !important;
}

/* Hover States (Blue) */
.hover\:text-blue-40:hover {
   color: var(--blue-40) !important;
}

.hover\:text-blue-60:hover {
   color: var(--blue-60) !important;
}

.hover\:text-blue-70:hover {
   color: var(--blue-70) !important;
}

.hover\:text-blue-80:hover {
   color: var(--blue-80) !important;
}

.hover\:bg-blue-60:hover {
   background-color: var(--blue-60) !important;
}

.hover\:bg-blue-70:hover {
   background-color: var(--blue-70) !important;
}

.hover\:border-blue-60:hover {
   border-color: var(--blue-60) !important;
}

/* --- GRAY --- */
.text-gray-10 {
   color: var(--gray-10) !important;
}

.bg-gray-10 {
   background-color: var(--gray-10) !important;
}

.border-gray-10 {
   border-color: var(--gray-10) !important;
}

.text-gray-20 {
   color: var(--gray-20) !important;
}

.bg-gray-20 {
   background-color: var(--gray-20) !important;
}

.border-gray-20 {
   border-color: var(--gray-20) !important;
}

.text-gray-30 {
   color: var(--gray-30) !important;
}

.bg-gray-30 {
   background-color: var(--gray-30) !important;
}

.border-gray-30 {
   border-color: var(--gray-30) !important;
}

.text-gray-40 {
   color: var(--gray-40) !important;
}

.bg-gray-40 {
   background-color: var(--gray-40) !important;
}

.border-gray-40 {
   border-color: var(--gray-40) !important;
}

.text-gray-50 {
   color: var(--gray-50) !important;
}

.bg-gray-50 {
   background-color: var(--gray-50) !important;
}

.border-gray-50 {
   border-color: var(--gray-50) !important;
}

.text-gray-60 {
   color: var(--gray-60) !important;
}

.bg-gray-60 {
   background-color: var(--gray-60) !important;
}

.border-gray-60 {
   border-color: var(--gray-60) !important;
}

.text-gray-70 {
   color: var(--gray-70) !important;
}

.bg-gray-70 {
   background-color: var(--gray-70) !important;
}

.border-gray-70 {
   border-color: var(--gray-70) !important;
}

.text-gray-80 {
   color: var(--gray-80) !important;
}

.bg-gray-80 {
   background-color: var(--gray-80) !important;
}

.border-gray-80 {
   border-color: var(--gray-80) !important;
}

.text-gray-90 {
   color: var(--gray-90) !important;
}

.bg-gray-90 {
   background-color: var(--gray-90) !important;
}

.border-gray-90 {
   border-color: var(--gray-90) !important;
}

.text-gray-100 {
   color: var(--gray-100) !important;
}

.bg-gray-100 {
   background-color: var(--gray-100) !important;
}

.border-gray-100 {
   border-color: var(--gray-100) !important;
}

/* Hover States (Gray) */
.hover\:bg-gray-10:hover {
   background-color: var(--gray-10) !important;
}

.hover\:bg-gray-20:hover {
   background-color: var(--gray-20) !important;
}

.hover\:bg-gray-80:hover {
   background-color: var(--gray-80) !important;
}

.hover\:bg-gray-90:hover {
   background-color: var(--gray-90) !important;
}

.hover\:text-gray-100:hover {
   color: var(--gray-100) !important;
}

.hover\:border-gray-40:hover {
   border-color: var(--gray-40) !important;
}

/* --- GREEN --- */
.text-green-40 {
   color: var(--green-40) !important;
}

.bg-green-40 {
   background-color: var(--green-40) !important;
}

.text-green-50 {
   color: var(--green-50) !important;
}

.bg-green-50 {
   background-color: var(--green-50) !important;
}

.text-green-60 {
   color: var(--green-60) !important;
}

.bg-green-60 {
   background-color: var(--green-60) !important;
}

.hover\:bg-green-50:hover {
   background-color: var(--green-50) !important;
}

/* --- PURPLE --- */
.text-purple-40 {
   color: var(--purple-40) !important;
}

.bg-purple-40 {
   background-color: var(--purple-40) !important;
}

.text-purple-50 {
   color: var(--purple-50) !important;
}

.bg-purple-50 {
   background-color: var(--purple-50) !important;
}

.text-purple-60 {
   color: var(--purple-60) !important;
}

.bg-purple-60 {
   background-color: var(--purple-60) !important;
}

.hover\:text-purple-40:hover {
   color: var(--purple-40) !important;
}

.hover\:bg-purple-60:hover {
   background-color: var(--purple-60) !important;
}

.hover\:border-purple-60:hover {
   border-color: var(--purple-60) !important;
}

/* --- TEAL --- */
.text-teal-40 {
   color: var(--teal-40) !important;
}

.bg-teal-40 {
   background-color: var(--teal-40) !important;
}

.text-teal-60 {
   color: var(--teal-60) !important;
}

.bg-teal-60 {
   background-color: var(--teal-60) !important;
}

.hover\:bg-teal-60:hover {
   background-color: var(--teal-60) !important;
}

/* --- RED --- */
.text-red-50 {
   color: var(--red-50) !important;
}

.bg-red-50 {
   background-color: var(--red-50) !important;
}

.text-red-60 {
   color: var(--red-60) !important;
}

.bg-red-60 {
   background-color: var(--red-60) !important;
}

/* --- ORANGE (Network) --- */
.text-orange-5 {
   color: #fff8f2 !important;
}

.bg-orange-5 {
   background-color: #fff8f2 !important;
}

.border-orange-10 {
   border-color: #ffe6d6 !important;
}

.text-orange-10 {
   color: #ffe6d6 !important;
}

.bg-orange-10 {
   background-color: #ffe6d6 !important;
}

.text-orange-60 {
   color: #ba4e00 !important;
}

.bg-orange-60 {
   background-color: #ba4e00 !important;
}

.border-orange-60 {
   border-color: #ba4e00 !important;
}

/* Real Orange Defs (approximate for Carbon) */
:root {
   --orange-10: #fff0e0;
   --orange-60: #ba4e00;
}

.bg-orange-10 {
   background-color: var(--orange-10) !important;
}

.group.active .text-orange-60 {
   color: #ba4e00 !important;
}

.group.active .bg-orange-60 {
   background-color: #ba4e00 !important;
}

/* --- YELLOW/WARNING (Mapped to CoolGray for now or manual) --- */
.text-yellow-40 {
   color: #f1c21b !important;
}

/* Carbon Yellow 40 */
.bg-yellow-50 {
   background-color: #d2a106 !important;
}

/* Carbon Yellow 50 */

/* --- BLACK / WHITE --- */
.text-black {
   color: var(--black) !important;
}

.bg-black {
   background-color: var(--black) !important;
}

.text-white {
   color: var(--white) !important;
}

.bg-white {
   background-color: var(--white) !important;
}

.border-white {
   border-color: var(--white) !important;
}

.hover\:text-white:hover {
   color: var(--white) !important;
}

/* --------------------------------------------------------------------------
   4. CARBON TYPOGRAPHY HELPERS (Specifics)
   -------------------------------------------------------------------------- */
.type-code-01 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 0.75rem;
   line-height: 1.33;
   letter-spacing: 0.32px;
}

.type-code-02 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 0.875rem;
   line-height: 1.43;
   letter-spacing: 0.32px;
}

/* --------------------------------------------------------------------------
   5. UTILITY EXTRAS
   -------------------------------------------------------------------------- */
/* Screen Reader Only */
.sr-only {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* Custom Selection Color */
::selection {
   background: var(--blue-60);
   color: var(--white);
}