/* color-system.css */

/* Base Utilities */
.bg-black { background-color: #000; }
.text-white { color: #fff; }
.p-5 { padding: 20px; }
.font-sans { font-family: Arial, sans-serif; }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.text-2xl { font-size: 1.5rem; }
.mb-5 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 12px; }
.mb-2 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 40px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-start { justify-content: flex-start; }
.border { border-width: 1px; }
.border-white { border-color: #fff; }
.p-3 { padding: 12px; }

/* Swatch and Label (for design system page) */
.swatch { width: 150px; height: 80px; margin: 10px; display: inline-block; text-align: center; line-height: 80px; color: #000; border: 1px solid #333; }
.label { margin-top: 5px; color: #fff; text-align: center; }
.triad-swatch { width: 150px; height: 150px; line-height: 150px; text-align: center; color: #000; }

/* Color Utilities - Bitcoin Orange */
.bg-orange-100 { background-color: #ffffff; }
.bg-orange-200 { background-color: #fde9d1; }
.bg-orange-300 { background-color: #fcd4a3; }
.bg-orange-400 { background-color: #fabe76; }
.bg-orange-500 { background-color: #f9a948; }
.bg-orange-600 { background-color: #d37707; }
.bg-orange-700 { background-color: #9e5906; }
.bg-orange-800 { background-color: #6a3b04; }
.bg-orange-900 { background-color: #351e02; }

/* Nostr Purple */
.bg-purple-100 { background-color: #ffffff; }
.bg-purple-200 { background-color: #e4deff; }
.bg-purple-300 { background-color: #cabeff; }
.bg-purple-400 { background-color: #af9dff; }
.bg-purple-500 { background-color: #957dff; }
.bg-purple-600 { background-color: #4117ff; }
.bg-purple-700 { background-color: #2600d0; }
.bg-purple-800 { background-color: #1a008b; }
.bg-purple-900 { background-color: #0d0045; }

/* Vivid Cyan Blue (Primary) */
.bg-blue-100 { background-color: #ffffff; }
.bg-blue-200 { background-color: #ccefff; }
.bg-blue-300 { background-color: #99dfff; }
.bg-blue-400 { background-color: #66ceff; }
.bg-blue-500 { background-color: #33beff; }
.bg-blue-600 { background-color: #008bcc; }
.bg-blue-700 { background-color: #006899; }
.bg-blue-800 { background-color: #004666; }
.bg-blue-900 { background-color: #002333; }

/* Tech Blue (Variant) */
.bg-techblue-100 { background-color: #ffffff; }
.bg-techblue-200 { background-color: #d4e4fb; }
.bg-techblue-300 { background-color: #a9c8f7; }
.bg-techblue-400 { background-color: #7dadf2; }
.bg-techblue-500 { background-color: #5291ee; }
.bg-techblue-600 { background-color: #135cc7; }
.bg-techblue-700 { background-color: #0f4595; }
.bg-techblue-800 { background-color: #0a2e64; }
.bg-techblue-900 { background-color: #051732; }

/* Neutrals */
.bg-neutral-50 { background-color: #FFFFFF; }
.bg-neutral-100 { background-color: #F5F5F5; }
.bg-neutral-200 { background-color: #E0E0E0; }
.bg-neutral-300 { background-color: #BDBDBD; }
.bg-neutral-400 { background-color: #9E9E9E; }
.bg-neutral-500 { background-color: #757575; }
.bg-neutral-600 { background-color: #616161; }
.bg-neutral-700 { background-color: #424242; }
.bg-neutral-800 { background-color: #212121; }
.bg-neutral-900 { background-color: #000000; }
.bg-neutral-950 { background-color: #0a0a0a; } /* Added for homepage dark bg option */

/* Semantic Colors */
.bg-success { background-color: #66ceff; } /* Blue-400 */
.bg-warning { background-color: #d37707; } /* Orange-600 */
.bg-error { background-color: #ff4d4d; }
.bg-info { background-color: #af9dff; } /* Purple-400 */

/* Opacity Utilities (for backgrounds like bg-success/20) */
.bg-success\/20 { background-color: rgba(102, 206, 255, 0.2); }
.bg-warning\/20 { background-color: rgba(211, 119, 7, 0.2); }
.bg-error\/20 { background-color: rgba(255, 77, 77, 0.2); }
.bg-info\/20 { background-color: rgba(175, 157, 255, 0.2); }

/* Text Color Utilities */
.text-success { color: #66ceff; }
.text-warning { color: #d37707; }
.text-error { color: #ff4d4d; }
.text-info { color: #af9dff; }
.text-blue-500 { color: #33beff; }
.text-blue-400 { color: #66ceff; }
.text-blue-300 { color: #99dfff; } /* Added for brighter links/hovers */
.text-techblue-500 { color: #5291ee; }
.text-techblue-400 { color: #7dadf2; }
.text-techblue-300 { color: #a9c8f7; } /* Added for brighter variants */
.text-orange-500 { color: #f9a948; }
.text-orange-400 { color: #fabe76; } /* Added for gradients */
.text-orange-300 { color: #fcd4a3; } /* Added for hovers */
.text-purple-500 { color: #957dff; }
.text-purple-300 { color: #cabeff; } /* Added for hovers */
.text-neutral-100 { color: #F5F5F5; }
.text-neutral-200 { color: #E0E0E0; } /* Added for improved contrast */
.text-neutral-300 { color: #BDBDBD; }
.text-neutral-400 { color: #9E9E9E; }

/* Border Color Utilities */
.border-success { border-color: #66ceff; }
.border-warning { border-color: #d37707; }
.border-error { border-color: #ff4d4d; }
.border-info { border-color: #af9dff; }
.border-neutral-600 { border-color: #616161; } /* Added for inputs */

/* Hover Utilities (Example) */
.hover\:bg-blue-600:hover { background-color: #008bcc; }
.hover\:bg-techblue-600:hover { background-color: #135cc7; }
.hover\:bg-orange-600:hover { background-color: #d37707; }
.hover\:bg-purple-600:hover { background-color: #4117ff; }
.hover\:bg-blue-300:hover { background-color: #99dfff; }
.hover\:bg-orange-700:hover { background-color: #9e5906; }
.hover\:bg-red-700:hover { background-color: #cc0000; } /* Derived for error hover */
.hover\:text-blue-300:hover { color: #99dfff; } /* Added for links */
.hover\:text-techblue-300:hover { color: #a9c8f7; }
.hover\:text-orange-300:hover { color: #fcd4a3; }
.hover\:text-purple-300:hover { color: #cabeff; }

/* Gradient Utilities (Added) */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-135 { background-image: linear-gradient(135deg, var(--tw-gradient-stops)); }
.from-orange-500 { --tw-gradient-from: #f9a948; var(--tw-gradient-stops): var(--tw-gradient-from), var(--tw-gradient-to, rgb(249 169 72 / 0)); }
.to-orange-300 { --tw-gradient-to: #fcd4a3; }
.from-transparent { --tw-gradient-from: transparent; var(--tw-gradient-stops): var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.to-transparent { --tw-gradient-to: transparent; }
.bg-gradient-120 { background-image: linear-gradient(120deg, var(--tw-gradient-stops)); } /* For scan */

/* Text Clip Utilities (Added) */
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.text-transparent { -webkit-text-fill-color: transparent; color: transparent; }

/* Additional Component Utilities */
.rounded { border-radius: 0.375rem; } /* 6px */
.rounded-lg { border-radius: 0.5rem; } /* 8px */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.p-6 { padding: 1.5rem; }
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.w-80 { width: 20rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-10 { margin-top: 2.5rem; }

/* Link Color (Added per preference) */
.text-link-blue { color: #00b4ee; }
.hover\:text-link-blue-hover:hover { color: #00a0d3; } /* Derived darker hover if needed */