/* =================================
   Fluent Design System - Color Palette
   Based on Microsoft Fluent UI
   ================================= */

/* =================================
   Fluent Color Tokens
   ================================= */

:root {
	/* Neutral Colors */
	--fluent-grey-10: #faf9f8;
	--fluent-grey-20: #f3f2f1;
	--fluent-grey-30: #edebe9;
	--fluent-grey-40: #e1dfdd;
	--fluent-grey-50: #d2d0ce;
	--fluent-grey-60: #c8c6c4;
	--fluent-grey-70: #bebbb8;
	--fluent-grey-80: #b3b0ad;
	--fluent-grey-90: #a19f9d;
	--fluent-grey-100: #979593;
	--fluent-grey-110: #8a8886;
	--fluent-grey-120: #797775;
	--fluent-grey-130: #605e5c;
	--fluent-grey-140: #484644;
	--fluent-grey-150: #3b3a39;
	--fluent-grey-160: #323130;
	--fluent-grey-170: #292827;
	--fluent-grey-180: #252423;
	--fluent-grey-190: #201f1e;

	/* Blue Colors */
	--fluent-blue-10: #deecf9;
	--fluent-blue-20: #c7e0f4;
	--fluent-blue-30: #a9d3f2;
	--fluent-blue-40: #5eb7e7;
	--fluent-blue-50: #2b88d8;
	--fluent-blue-60: #0078d4;
	--fluent-blue-70: #106ebe;
	--fluent-blue-80: #005a9e;
	--fluent-blue-90: #004578;
	--fluent-blue-100: #003e5e;

	/* Teal Colors */
	--fluent-teal-10: #dff6f5;
	--fluent-teal-20: #a6e9ed;
	--fluent-teal-30: #5dd3d8;
	--fluent-teal-40: #00b7c3;
	--fluent-teal-50: #038387;
	--fluent-teal-60: #005b70;

	/* Green Colors */
	--fluent-green-10: #dff6dd;
	--fluent-green-20: #9fd89f;
	--fluent-green-30: #6bb700;
	--fluent-green-40: #498205;
	--fluent-green-50: #0b6a0b;
	--fluent-green-60: #094509;

	/* Yellow/Gold Colors */
	--fluent-yellow-10: #fff100;
	--fluent-yellow-20: #ffdc00;
	--fluent-yellow-30: #ffc83d;
	--fluent-yellow-40: #ffb900;
	--fluent-yellow-50: #f7b500;

	/* Orange Colors */
	--fluent-orange-10: #ffefdb;
	--fluent-orange-20: #ffd7b5;
	--fluent-orange-30: #ffaa44;
	--fluent-orange-40: #f7630c;
	--fluent-orange-50: #ca5010;
	--fluent-orange-60: #8e562e;

	/* Red Colors */
	--fluent-red-10: #fde7e9;
	--fluent-red-20: #f1707b;
	--fluent-red-30: #e81123;
	--fluent-red-40: #d13438;
	--fluent-red-50: #a80000;
	--fluent-red-60: #750b1c;

	/* Magenta/Pink Colors */
	--fluent-magenta-10: #f7e7f4;
	--fluent-magenta-20: #e3008c;
	--fluent-magenta-30: #c239b3;
	--fluent-magenta-40: #881798;
	--fluent-magenta-50: #5c005c;

	/* Purple Colors */
	--fluent-purple-10: #e9e3f7;
	--fluent-purple-20: #c7b8ea;
	--fluent-purple-30: #b4a0ff;
	--fluent-purple-40: #8764b8;
	--fluent-purple-50: #6b3fa0;
	--fluent-purple-60: #5c2e91;
}

/* =================================
   Fluent Color Classes - Background
   ================================= */

/* Neutral Backgrounds */
.bg-fluent-grey-10 { background-color: var(--fluent-grey-10); }
.bg-fluent-grey-20 { background-color: var(--fluent-grey-20); }
.bg-fluent-grey-30 { background-color: var(--fluent-grey-30); }
.bg-fluent-grey-40 { background-color: var(--fluent-grey-40); }
.bg-fluent-grey-50 { background-color: var(--fluent-grey-50); }
.bg-fluent-grey-60 { background-color: var(--fluent-grey-60); }
.bg-fluent-grey-70 { background-color: var(--fluent-grey-70); }
.bg-fluent-grey-80 { background-color: var(--fluent-grey-80); }
.bg-fluent-grey-90 { background-color: var(--fluent-grey-90); }
.bg-fluent-grey-100 { background-color: var(--fluent-grey-100); }
.bg-fluent-grey-110 { background-color: var(--fluent-grey-110); }
.bg-fluent-grey-120 { background-color: var(--fluent-grey-120); }
.bg-fluent-grey-130 { background-color: var(--fluent-grey-130); }
.bg-fluent-grey-140 { background-color: var(--fluent-grey-140); }
.bg-fluent-grey-150 { background-color: var(--fluent-grey-150); }
.bg-fluent-grey-160 { background-color: var(--fluent-grey-160); }
.bg-fluent-grey-170 { background-color: var(--fluent-grey-170); }
.bg-fluent-grey-180 { background-color: var(--fluent-grey-180); }
.bg-fluent-grey-190 { background-color: var(--fluent-grey-190); }

/* Blue Backgrounds */
.bg-fluent-blue-10 { background-color: var(--fluent-blue-10); }
.bg-fluent-blue-20 { background-color: var(--fluent-blue-20); }
.bg-fluent-blue-30 { background-color: var(--fluent-blue-30); }
.bg-fluent-blue-40 { background-color: var(--fluent-blue-40); }
.bg-fluent-blue-50 { background-color: var(--fluent-blue-50); }
.bg-fluent-blue-60 { background-color: var(--fluent-blue-60); }
.bg-fluent-blue-70 { background-color: var(--fluent-blue-70); }
.bg-fluent-blue-80 { background-color: var(--fluent-blue-80); }
.bg-fluent-blue-90 { background-color: var(--fluent-blue-90); }
.bg-fluent-blue-100 { background-color: var(--fluent-blue-100); }

/* Teal Backgrounds */
.bg-fluent-teal-10 { background-color: var(--fluent-teal-10); }
.bg-fluent-teal-20 { background-color: var(--fluent-teal-20); }
.bg-fluent-teal-30 { background-color: var(--fluent-teal-30); }
.bg-fluent-teal-40 { background-color: var(--fluent-teal-40); }
.bg-fluent-teal-50 { background-color: var(--fluent-teal-50); }
.bg-fluent-teal-60 { background-color: var(--fluent-teal-60); }

/* Green Backgrounds */
.bg-fluent-green-10 { background-color: var(--fluent-green-10); }
.bg-fluent-green-20 { background-color: var(--fluent-green-20); }
.bg-fluent-green-30 { background-color: var(--fluent-green-30); }
.bg-fluent-green-40 { background-color: var(--fluent-green-40); }
.bg-fluent-green-50 { background-color: var(--fluent-green-50); }
.bg-fluent-green-60 { background-color: var(--fluent-green-60); }

/* Yellow/Gold Backgrounds */
.bg-fluent-yellow-10 { background-color: var(--fluent-yellow-10); }
.bg-fluent-yellow-20 { background-color: var(--fluent-yellow-20); }
.bg-fluent-yellow-30 { background-color: var(--fluent-yellow-30); }
.bg-fluent-yellow-40 { background-color: var(--fluent-yellow-40); }
.bg-fluent-yellow-50 { background-color: var(--fluent-yellow-50); }

/* Orange Backgrounds */
.bg-fluent-orange-10 { background-color: var(--fluent-orange-10); }
.bg-fluent-orange-20 { background-color: var(--fluent-orange-20); }
.bg-fluent-orange-30 { background-color: var(--fluent-orange-30); }
.bg-fluent-orange-40 { background-color: var(--fluent-orange-40); }
.bg-fluent-orange-50 { background-color: var(--fluent-orange-50); }
.bg-fluent-orange-60 { background-color: var(--fluent-orange-60); }

/* Red Backgrounds */
.bg-fluent-red-10 { background-color: var(--fluent-red-10); }
.bg-fluent-red-20 { background-color: var(--fluent-red-20); }
.bg-fluent-red-30 { background-color: var(--fluent-red-30); }
.bg-fluent-red-40 { background-color: var(--fluent-red-40); }
.bg-fluent-red-50 { background-color: var(--fluent-red-50); }
.bg-fluent-red-60 { background-color: var(--fluent-red-60); }

/* Magenta Backgrounds */
.bg-fluent-magenta-10 { background-color: var(--fluent-magenta-10); }
.bg-fluent-magenta-20 { background-color: var(--fluent-magenta-20); }
.bg-fluent-magenta-30 { background-color: var(--fluent-magenta-30); }
.bg-fluent-magenta-40 { background-color: var(--fluent-magenta-40); }
.bg-fluent-magenta-50 { background-color: var(--fluent-magenta-50); }

/* Purple Backgrounds */
.bg-fluent-purple-10 { background-color: var(--fluent-purple-10); }
.bg-fluent-purple-20 { background-color: var(--fluent-purple-20); }
.bg-fluent-purple-30 { background-color: var(--fluent-purple-30); }
.bg-fluent-purple-40 { background-color: var(--fluent-purple-40); }
.bg-fluent-purple-50 { background-color: var(--fluent-purple-50); }
.bg-fluent-purple-60 { background-color: var(--fluent-purple-60); }

/* =================================
   Fluent Color Classes - Text
   ================================= */

/* Neutral Text */
.text-fluent-grey-10 { color: var(--fluent-grey-10); }
.text-fluent-grey-20 { color: var(--fluent-grey-20); }
.text-fluent-grey-30 { color: var(--fluent-grey-30); }
.text-fluent-grey-40 { color: var(--fluent-grey-40); }
.text-fluent-grey-50 { color: var(--fluent-grey-50); }
.text-fluent-grey-60 { color: var(--fluent-grey-60); }
.text-fluent-grey-70 { color: var(--fluent-grey-70); }
.text-fluent-grey-80 { color: var(--fluent-grey-80); }
.text-fluent-grey-90 { color: var(--fluent-grey-90); }
.text-fluent-grey-100 { color: var(--fluent-grey-100); }
.text-fluent-grey-110 { color: var(--fluent-grey-110); }
.text-fluent-grey-120 { color: var(--fluent-grey-120); }
.text-fluent-grey-130 { color: var(--fluent-grey-130); }
.text-fluent-grey-140 { color: var(--fluent-grey-140); }
.text-fluent-grey-150 { color: var(--fluent-grey-150); }
.text-fluent-grey-160 { color: var(--fluent-grey-160); }
.text-fluent-grey-170 { color: var(--fluent-grey-170); }
.text-fluent-grey-180 { color: var(--fluent-grey-180); }
.text-fluent-grey-190 { color: var(--fluent-grey-190); }

/* Blue Text */
.text-fluent-blue-10 { color: var(--fluent-blue-10); }
.text-fluent-blue-20 { color: var(--fluent-blue-20); }
.text-fluent-blue-30 { color: var(--fluent-blue-30); }
.text-fluent-blue-40 { color: var(--fluent-blue-40); }
.text-fluent-blue-50 { color: var(--fluent-blue-50); }
.text-fluent-blue-60 { color: var(--fluent-blue-60); }
.text-fluent-blue-70 { color: var(--fluent-blue-70); }
.text-fluent-blue-80 { color: var(--fluent-blue-80); }
.text-fluent-blue-90 { color: var(--fluent-blue-90); }
.text-fluent-blue-100 { color: var(--fluent-blue-100); }

/* Teal Text */
.text-fluent-teal-10 { color: var(--fluent-teal-10); }
.text-fluent-teal-20 { color: var(--fluent-teal-20); }
.text-fluent-teal-30 { color: var(--fluent-teal-30); }
.text-fluent-teal-40 { color: var(--fluent-teal-40); }
.text-fluent-teal-50 { color: var(--fluent-teal-50); }
.text-fluent-teal-60 { color: var(--fluent-teal-60); }

/* Green Text */
.text-fluent-green-10 { color: var(--fluent-green-10); }
.text-fluent-green-20 { color: var(--fluent-green-20); }
.text-fluent-green-30 { color: var(--fluent-green-30); }
.text-fluent-green-40 { color: var(--fluent-green-40); }
.text-fluent-green-50 { color: var(--fluent-green-50); }
.text-fluent-green-60 { color: var(--fluent-green-60); }

/* Yellow/Gold Text */
.text-fluent-yellow-10 { color: var(--fluent-yellow-10); }
.text-fluent-yellow-20 { color: var(--fluent-yellow-20); }
.text-fluent-yellow-30 { color: var(--fluent-yellow-30); }
.text-fluent-yellow-40 { color: var(--fluent-yellow-40); }
.text-fluent-yellow-50 { color: var(--fluent-yellow-50); }

/* Orange Text */
.text-fluent-orange-10 { color: var(--fluent-orange-10); }
.text-fluent-orange-20 { color: var(--fluent-orange-20); }
.text-fluent-orange-30 { color: var(--fluent-orange-30); }
.text-fluent-orange-40 { color: var(--fluent-orange-40); }
.text-fluent-orange-50 { color: var(--fluent-orange-50); }
.text-fluent-orange-60 { color: var(--fluent-orange-60); }

/* Red Text */
.text-fluent-red-10 { color: var(--fluent-red-10); }
.text-fluent-red-20 { color: var(--fluent-red-20); }
.text-fluent-red-30 { color: var(--fluent-red-30); }
.text-fluent-red-40 { color: var(--fluent-red-40); }
.text-fluent-red-50 { color: var(--fluent-red-50); }
.text-fluent-red-60 { color: var(--fluent-red-60); }

/* Magenta Text */
.text-fluent-magenta-10 { color: var(--fluent-magenta-10); }
.text-fluent-magenta-20 { color: var(--fluent-magenta-20); }
.text-fluent-magenta-30 { color: var(--fluent-magenta-30); }
.text-fluent-magenta-40 { color: var(--fluent-magenta-40); }
.text-fluent-magenta-50 { color: var(--fluent-magenta-50); }

/* Purple Text */
.text-fluent-purple-10 { color: var(--fluent-purple-10); }
.text-fluent-purple-20 { color: var(--fluent-purple-20); }
.text-fluent-purple-30 { color: var(--fluent-purple-30); }
.text-fluent-purple-40 { color: var(--fluent-purple-40); }
.text-fluent-purple-50 { color: var(--fluent-purple-50); }
.text-fluent-purple-60 { color: var(--fluent-purple-60); }

/* =================================
   Fluent Color Classes - Border
   ================================= */

/* Neutral Borders */
.border-fluent-grey-10 { border-color: var(--fluent-grey-10); }
.border-fluent-grey-20 { border-color: var(--fluent-grey-20); }
.border-fluent-grey-30 { border-color: var(--fluent-grey-30); }
.border-fluent-grey-40 { border-color: var(--fluent-grey-40); }
.border-fluent-grey-50 { border-color: var(--fluent-grey-50); }
.border-fluent-grey-60 { border-color: var(--fluent-grey-60); }
.border-fluent-grey-70 { border-color: var(--fluent-grey-70); }
.border-fluent-grey-80 { border-color: var(--fluent-grey-80); }
.border-fluent-grey-90 { border-color: var(--fluent-grey-90); }
.border-fluent-grey-100 { border-color: var(--fluent-grey-100); }
.border-fluent-grey-110 { border-color: var(--fluent-grey-110); }
.border-fluent-grey-120 { border-color: var(--fluent-grey-120); }
.border-fluent-grey-130 { border-color: var(--fluent-grey-130); }

/* Blue Borders */
.border-fluent-blue-10 { border-color: var(--fluent-blue-10); }
.border-fluent-blue-20 { border-color: var(--fluent-blue-20); }
.border-fluent-blue-30 { border-color: var(--fluent-blue-30); }
.border-fluent-blue-40 { border-color: var(--fluent-blue-40); }
.border-fluent-blue-50 { border-color: var(--fluent-blue-50); }
.border-fluent-blue-60 { border-color: var(--fluent-blue-60); }
.border-fluent-blue-70 { border-color: var(--fluent-blue-70); }
.border-fluent-blue-80 { border-color: var(--fluent-blue-80); }

/* Other colors borders */
.border-fluent-teal-40 { border-color: var(--fluent-teal-40); }
.border-fluent-green-30 { border-color: var(--fluent-green-30); }
.border-fluent-yellow-40 { border-color: var(--fluent-yellow-40); }
.border-fluent-orange-40 { border-color: var(--fluent-orange-40); }
.border-fluent-red-30 { border-color: var(--fluent-red-30); }
.border-fluent-magenta-20 { border-color: var(--fluent-magenta-20); }
.border-fluent-purple-40 { border-color: var(--fluent-purple-40); }

/* =================================
   Fluent Semantic Colors
   ================================= */

:root {
	--fluent-success: var(--fluent-green-30);
	--fluent-warning: var(--fluent-yellow-40);
	--fluent-error: var(--fluent-red-30);
	--fluent-info: var(--fluent-blue-60);
}

/* Semantic Background Classes */
.bg-fluent-success { background-color: var(--fluent-success); }
.bg-fluent-warning { background-color: var(--fluent-warning); }
.bg-fluent-error { background-color: var(--fluent-error); }
.bg-fluent-info { background-color: var(--fluent-info); }

/* Semantic Text Classes */
.text-fluent-success { color: var(--fluent-success); }
.text-fluent-warning { color: var(--fluent-warning); }
.text-fluent-error { color: var(--fluent-error); }
.text-fluent-info { color: var(--fluent-info); }

/* Semantic Border Classes */
.border-fluent-success { border-color: var(--fluent-success); }
.border-fluent-warning { border-color: var(--fluent-warning); }
.border-fluent-error { border-color: var(--fluent-error); }
.border-fluent-info { border-color: var(--fluent-info); }

/* =================================
   Fluent Utility Classes
   ================================= */

/* Hover States */
.hover-fluent-blue-60:hover {
	background-color: var(--fluent-blue-60);
	color: white;
	transition: all 0.3s ease;
}

.hover-fluent-blue-80:hover {
	background-color: var(--fluent-blue-80);
	transition: all 0.3s ease;
}

/* Opacity Variants */
.bg-fluent-blue-60-10 {
	background-color: rgba(0, 120, 212, 0.1);
}

.bg-fluent-blue-60-20 {
	background-color: rgba(0, 120, 212, 0.2);
}

.bg-fluent-blue-60-30 {
	background-color: rgba(0, 120, 212, 0.3);
}

/* Acrylic/Glass Effects */
.fluent-acrylic-light {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.fluent-acrylic-dark {
	background: rgba(32, 31, 30, 0.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.fluent-glass {
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px) saturate(180%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =================================
   Fluent Card Components
   ================================= */

.fluent-card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	padding: 1.5rem;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fluent-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

html.dark-theme .fluent-card {
	background: var(--fluent-grey-160);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

html.dark-theme .fluent-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* =================================
   Fluent Alert Components
   ================================= */

.fluent-alert {
	padding: 1rem 1.25rem;
	border-radius: 6px;
	border-left: 4px solid;
	margin-bottom: 1rem;
}

.fluent-alert-success {
	background: var(--fluent-green-10);
	border-color: var(--fluent-green-30);
	color: var(--fluent-green-50);
}

.fluent-alert-warning {
	background: var(--fluent-yellow-10);
	border-color: var(--fluent-yellow-40);
	color: var(--fluent-orange-60);
}

.fluent-alert-error {
	background: var(--fluent-red-10);
	border-color: var(--fluent-red-30);
	color: var(--fluent-red-50);
}

.fluent-alert-info {
	background: var(--fluent-blue-10);
	border-color: var(--fluent-blue-60);
	color: var(--fluent-blue-80);
}

/* =================================
   Fluent Badge Components
   ================================= */

.fluent-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
}

.fluent-badge-primary {
	background: var(--fluent-blue-60);
	color: white;
}

.fluent-badge-success {
	background: var(--fluent-green-30);
	color: white;
}

.fluent-badge-warning {
	background: var(--fluent-yellow-40);
	color: var(--fluent-grey-190);
}

.fluent-badge-error {
	background: var(--fluent-red-30);
	color: white;
}

.fluent-badge-grey {
	background: var(--fluent-grey-40);
	color: var(--fluent-grey-160);
}

html.dark-theme .fluent-badge-grey {
	background: var(--fluent-grey-140);
	color: var(--fluent-grey-20);
}