@charde/core 0.0.3 → 0.0.5

package/dist/charde/charde.css

@@ -0,0 +1,1775 @@
+/* src/global/global.css */
+
+/* Import design tokens and utilities - these are dynamically generated */
+:root {
+
+  /* Accent color */
+  --secondary-color: #dcd926ff;
+
+  /* Neutral background/text color */
+  --neutral-color: #cccccc;
+
+  /* Light text color for dark backgrounds */
+  --text-light: #ffffff;
+
+  /* Light background color */
+  --background-light: #f9f9f9;
+
+  /* Base font size for body text */
+  --font-size-base: 1rem;
+
+  /* Large font size for headings */
+  --font-size-lg: 1.2rem;
+
+  /* Small font size */
+  --font-size-sm: 0.875rem;
+
+  /* Extra small font size */
+  --font-size-xs: 0.75rem;
+
+  /* Semibold font weight */
+  --font-weight-semibold: 600;
+
+  /* Monospace font stack */
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  /* Sans-serif font utility class */
+  --font-sans: font-sans;
+
+  --spacing-0: 0px;
+
+  /* 4px */
+  --spacing-1: 0.25rem;
+
+  /* 8px */
+  --spacing-2: 0.5rem;
+
+  /* 12px */
+  --spacing-3: 0.75rem;
+
+  /* 16px */
+  --spacing-4: 1rem;
+
+  /* 24px */
+  --spacing-6: 2.5rem;
+
+  /* 32px */
+  --spacing-8: 2rem;
+
+  /* Default width of the card */
+  --width: 100%;
+
+  /* Maximum width of the card */
+  --max-width: 300rem;
+
+  --border-radius-xs: 2rem;
+
+  --border-radius-sm: 4px;
+
+  --border-radius-md: 6px;
+
+  --border-radius-lg: 8px;
+
+  --border-radius-xl: 2rem;
+
+  --border-radius-2xl: 16px;
+
+  /* For very rounded corners, e.g., rounded-3xl */
+  --border-radius-3xl: 20px;
+
+  /* For circular elements */
+  --border-radius-full: 50%;
+
+  --white: #ffffff;
+
+  --black: #000000;
+
+  --gray-50: #f9f9f9;
+
+  --gray-100: #f3f4f6;
+
+  --gray-200: #67880c;
+
+  --gray-300: #d5d8dc;
+
+  --gray-400: #9ca3af;
+
+  --gray-500: #7af202;
+
+  --gray-600: #4b5563;
+
+  --gray-700: #374151;
+
+  --gray-800: #122be2;
+
+  --gray-900: #76f990;
+
+  --indigo-500: #6366f1;
+
+  /* Light blue background */
+  --blue-50: #eff6ff;
+
+  /* Blue for icons */
+  --blue-600: #2563eb;
+
+  /* Width utility class (3.5rem) */
+  --w-14: w-14;
+
+  /* Height utility class (3.5rem) */
+  --h-14: h-14;
+
+  /* Width utility class (2rem) */
+  --w-8: w-8;
+
+  /* Height utility class (2rem) */
+  --h-8: h-8;
+
+  /* Width utility class (3rem) */
+  --w-12: w-12;
+
+  /* Height utility class (3rem) */
+  --h-12: h-12;
+
+  /* Horizontal spacing utility class */
+  --space-x-2: space-x-2;
+
+  /* Padding utility class */
+  --p-2: p-2;
+
+  /* White text color utility class */
+  --text-white: text-white;
+
+  /* Medium font weight utility class */
+  --font-medium: font-medium;
+
+  /* Bold font weight utility class */
+  --font-bold: font-bold;
+
+  /* Border utility class */
+  --border: border;
+
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  /* Large shadow for cards and elevated elements */
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  /* Transition for color properties */
+  --transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+  /* Standard transition duration for hover effects */
+  --duration-200: 0.2;
+
+  /* Standard 1px border width */
+  --border-width-1: 1rem;
+
+  /* 2px border width */
+  --border-width-2: 2rem;
+
+  /* Solid border style */
+  --border-style-solid: solid;
+
+  /* No border style */
+  --border-style-none: none;
+
+  /* Flex display property */
+  --display-flex: flex;
+
+  /* Center alignment for flex items */
+  --align-items-center: center;
+
+  /* Start alignment for flex items */
+  --align-items-start: flex-start;
+
+  /* Space between flex items */
+  --justify-content-space-between: space-between;
+
+  /* Center justification for flex items */
+  --justify-content-center: center;
+
+  /* Pointer cursor */
+  --cursor-pointer: pointer;
+
+  /* Center text alignment */
+  --text-align-center: center;
+
+  /* Default width for profile images */
+  --image-width: 32px;
+
+  /* Default height for profile images */
+  --image-height: 32px;
+
+  /* Border radius for circular images */
+  --image-border-radius: 50%;
+
+  /* Utility class for white background */
+  --bg-white: bg-white;
+
+  /* Utility class for gray-50 background */
+  --bg-gray-50: bg-gray-50;
+
+  /* Utility class for gray-900 background */
+  --bg-gray-900: bg-gray-900;
+
+  /* Utility class for gray-800 background */
+  --bg-gray-800: bg-gray-800;
+
+  /* Utility class for blue-50 background */
+  --bg-blue-50: bg-blue-50;
+
+  /* Utility class for padding (maps to --spacing-6) */
+  --p-6: p-6;
+
+  /* Utility class for padding (maps to --spacing-4) */
+  --p-4: p-4;
+
+  /* Utility class for horizontal padding (maps to --spacing-6) */
+  --px-6: px-6;
+
+  /* Utility class for bottom padding (maps to --spacing-6) */
+  --pb-6: pb-6;
+
+  /* Utility class for vertical padding (maps to --spacing-6) */
+  --py-6: py-6;
+
+  /* Utility class for margin-top: 0.25rem */
+  --mt-1: mt-1;
+
+  /* Utility class for flex-shrink: 0 */
+  --flex-shrink-0: flex-shrink-0;
+
+  /* Utility class for extra large border radius (maps to --border-radius-xl) */
+  --rounded-xl: rounded-xl;
+
+  /* Utility class for 3X large border radius (maps to --border-radius-3xl) */
+  --rounded-3xl: rounded-3xl;
+
+  /* Utility class for large border radius (maps to --border-radius-lg) */
+  --rounded-lg: rounded-lg;
+
+  /* Utility class for 50% border radius */
+  --rounded-full: rounded-full;
+
+  /* Utility class for full width */
+  --w-full: w-full;
+
+  /* Utility class for medium max-width */
+  --max-w-md: max-w-md;
+
+  /* Utility class for horizontal auto margin (centering) */
+  --mx-auto: mx-auto;
+
+  /* Utility class for overflow: hidden */
+  --overflow-hidden: overflow-hidden;
+
+  /* Utility class for large shadow (maps to --shadow-lg) */
+  --class-shadow-lg: shadow-lg;
+
+  /* Utility class for display: flex */
+  --flex: flex;
+
+  /* Utility class for align-items: center */
+  --items-center: items-center;
+
+  /* Utility class for align-items: flex-start */
+  --items-start: items-start;
+
+  /* Utility class for justify-content: space-between */
+  --justify-between: justify-between;
+
+  /* Utility class for justify-content: center */
+  --justify-center: justify-center;
+
+  /* Utility class for bottom border (maps to --border-width-1, --border-style-solid, --gray-200) */
+  --border-b: border-b;
+
+  /* Utility class for gray-200 border color */
+  --border-gray-200: border-gray-200;
+
+  /* Utility class for gray-300 border color */
+  --border-gray-300: border-gray-300;
+
+  /* Utility class for top border */
+  --border-t: border-t;
+
+  /* Utility class for horizontal gap (maps to 0.75rem / 12px) */
+  --space-x-3: space-x-3;
+
+  /* Utility class for horizontal gap (maps to 1rem / 16px) */
+  --space-x-4: space-x-4;
+
+  /* Utility class for vertical gap (maps to 1.5rem / 24px) */
+  --space-y-6: space-y-6;
+
+  /* Utility class for semibold font weight */
+  --font-semibold: font-semibold;
+
+  /* Utility class for monospace font family */
+  --font-mono: font-mono;
+
+  /* Utility class for extra large text size */
+  --text-xl: text-xl;
+
+  /* Utility class for large text size */
+  --text-lg: text-lg;
+
+  /* Utility class for small text size */
+  --text-sm: text-sm;
+
+  /* Utility class for gray-900 text color */
+  --text-gray-900: text-gray-900;
+
+  /* Utility class for gray-800 text color */
+  --text-gray-800: text-gray-800;
+
+  /* Utility class for gray-700 text color */
+  --text-gray-700: text-gray-700;
+
+  /* Utility class for gray-600 text color */
+  --text-gray-600: text-gray-600;
+
+  /* Utility class for gray-500 text color */
+  --text-gray-500: text-gray-500;
+
+  /* Utility class for gray-300 text color */
+  --text-gray-300: text-gray-300;
+
+  /* Utility class for blue-600 text color */
+  --text-blue-600: text-blue-600;
+
+  /* Utility class for hover state gray-100 background */
+  --hover-bg-gray-100: hover:bg-gray-100;
+
+  /* Utility class for hover state gray-700 background */
+  --hover-bg-gray-700: hover:bg-gray-700;
+
+  /* Utility class for color transition */
+  --class-transition-colors: transition-colors;
+
+  /* Utility class for flex: 1 1 0% */
+  --flex-1: flex-1;
+
+  /* Default sans-serif font stack */
+  --font-family-sans: Inter, system-ui, sans-serif;
+
+  /* Standard transition duration */
+  --duration-150: 150ms;
+
+  /* Z-index for modals */
+  --z-index-modal: 50%;
+
+  /* Z-index for tooltips */
+  --z-index-tooltip: 60;
+
+  /* Opacity for disabled states */
+  --opacity-disabled: 0.6;
+
+  /* Cursor for disabled elements */
+  --cursor-not-allowed: not-allowed;
+
+  /* Grid display property */
+  --display-grid: grid;
+
+  /* 8px gap */
+  --gap-2: 0.5rem;
+
+  /* 16px gap */
+  --gap-4: 1rem;
+
+  /* Default icon size */
+  --icon-size-md: 16px;
+
+  /* Small icon size (1rem) */
+  --icon-size-sm: 16px;
+
+  /* User-added custom property */
+  --custom-primary-color: #6add2c;
+
+  /* Default height for input elements (44px) */
+  --input-height: 2.75rem;
+
+  /* Maximum height for dropdown menu (256px) */
+  --dropdown-max-height: 16px;
+
+  /* Blue focus ring color */
+  --focus-ring-color: #3b82f6;
+
+  /* Focus ring width */
+  --focus-ring-width: 2rem;
+
+  /* Size of chevron icon (20px) */
+  --chevron-size: 1.25rem;
+
+  /* Primary button background color */
+  --button-primary-bg: #dcd926ff;
+
+  /* Primary button hover state background */
+  --button-primary-hover-bg: #1d56b0;
+
+  /* Primary button active/pressed state */
+  --button-primary-active-bg: #174291;
+
+  /* Secondary button background color */
+  --button-secondary-bg: #6b7280;
+
+  /* Secondary button hover state background */
+  --button-secondary-hover-bg: #4b5563;
+
+  /* Danger/error button background */
+  --button-danger-bg: #dc2626;
+
+  /* Danger button hover state */
+  --button-danger-hover-bg: #b91c1c;
+
+  /* Success button background */
+  --button-success-bg: #059669;
+
+  /* Success button hover state */
+  --button-success-hover-bg: #047857;
+
+  /* Outline button border color */
+  --button-outline-border: #d1d5db;
+
+  /* Outline button hover border color */
+  --button-outline-hover-border: #9ca3af;
+
+  /* Default button text color */
+  --button-text-color: 1rem;
+
+  /* Outline button text color */
+  --button-outline-text: #374151;
+
+  /* Disabled button background */
+  --button-disabled-bg: #f3f4f6;
+
+  /* Disabled button text color */
+  --button-disabled-text: #9ca3af;
+
+  /* Disabled button border color */
+  --button-disabled-border: #e5e7eb;
+
+  /* Horizontal padding for medium buttons */
+  --button-padding-x: 1rem;
+
+  /* Vertical padding for medium buttons */
+  --button-padding-y: 0.5rem;
+
+  /* Horizontal padding for small buttons */
+  --button-padding-x-sm: 0.75rem;
+
+  /* Vertical padding for small buttons */
+  --button-padding-y-sm: 0.375rem;
+
+  /* Horizontal padding for large buttons */
+  --button-padding-x-lg: 1.5rem;
+
+  /* Vertical padding for large buttons */
+  --button-padding-y-lg: 0.75rem;
+
+  /* Default button font size */
+  --button-font-size: 1rem;
+
+  /* Small button font size */
+  --button-font-size-sm: 0.875rem;
+
+  /* Large button font size */
+  --button-font-size-lg: 1.125rem;
+
+  /* Button font weight */
+  --button-font-weight: 600;
+
+  /* Default button border radius */
+  --button-border-radius: 6px;
+
+  /* Small button border radius */
+  --button-border-radius-sm: 4px;
+
+  /* Large button border radius */
+  --button-border-radius-lg: 8px;
+
+  /* Button border width */
+  --button-border-width: 1rem;
+
+  /* Button transition animation */
+  --button-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Button focus ring style */
+  --button-focus-ring: 0 0 0 3px rgba(38, 109, 220, 0.25);
+
+  /* Primary button utility classes */
+  --button-primary-class: bg-blue-600 hover:bg-blue-700 active:bg-blue-800;
+
+  /* Secondary button utility classes */
+  --button-secondary-class: bg-gray-600 hover:bg-gray-700 active:bg-gray-800;
+
+  /* Danger button utility classes */
+  --button-danger-class: bg-red-600 hover:bg-red-700 active:bg-red-800;
+
+  /* Success button utility classes */
+  --button-success-class: bg-green-600 hover:bg-green-700 active:bg-green-800;
+
+  /* Outline button utility classes */
+  --button-outline-class: bg-transparent border border-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-50;
+
+  /* Disabled button utility classes */
+  --button-disabled-class: bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200;
+
+  /* Base button utility classes */
+  --button-base-class: inline-flex items-center justify-center font-semibold rounded-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
+
+  /* Medium button size utility classes */
+  --button-size-md-class: px-4 py-2 text-sm;
+
+  /* Small button size utility classes */
+  --button-size-sm-class: px-3 py-1.5 text-xs;
+
+  /* Large button size utility classes */
+  --button-size-lg-class: px-6 py-3 text-base;
+
+  /* Background color for input fields */
+  --input-bg-color: #ffffff;
+
+  /* Text color for input fields */
+  --input-text-color: #b5d416;
+
+  /* Default border color for input fields */
+  --input-border-color: #d5d8dc;
+
+  /* Border color for input fields when focused */
+  --input-border-color-focus: var(--primary-color);
+
+  /* Placeholder text color */
+  --input-placeholder-color: #7af202;
+
+  /* Horizontal padding for input fields */
+  --input-padding-x: 1rem;
+
+  /* Vertical padding for input fields */
+  --input-padding-y: 0.75rem;
+
+  /* Border radius for input fields */
+  --input-border-radius: 8px;
+
+  /* Border width for input fields */
+  --input-border-width: 1rem;
+
+  /* Font size for input text */
+  --input-font-size: 1rem;
+
+  /* Font family for input fields */
+  --input-font-family: Inter, system-ui, sans-serif;
+
+  /* Transition for input focus/hover states */
+  --input-transition: 0.2;
+
+  /* Box shadow for focused input fields */
+  --input-shadow-focus: 0 0 0 3px rgba(38, 109, 220, 0.1);
+
+  /* Border color on hover */
+  --input-hover-border-color: #9ca3af;
+
+  /* Background color for disabled inputs */
+  --input-disabled-bg: #f3f4f6;
+
+  /* Text color for disabled inputs */
+  --input-disabled-text: #7af202;
+
+  /* Border color for disabled inputs */
+  --input-disabled-border: #67880c;
+
+  /* Color for input labels */
+  --input-label-color: #374151;
+
+  /* Color for error states */
+  --input-error-color: #dc2626;
+
+  /* Color for success states */
+  --input-success-color: #16a34a;
+
+  /* Base input utility class */
+  --input: input;
+
+  /* Primary input variant */
+  --input-primary: input-primary;
+
+  /* Error input variant */
+  --input-error: input-error;
+
+  /* Success input variant */
+  --input-success: input-success;
+
+  /* Disabled input variant */
+  --input-disabled: input-disabled;
+
+  /* Large input size */
+  --input-lg: input-lg;
+
+  /* Small input size */
+  --input-sm: input-sm;
+
+  /* Width utility class (1.25rem) */
+  --w-5: w-5;
+
+  /* Height utility class (1.25rem) */
+  --h-5: h-5;
+
+  /* Horizontal padding utility class (1rem) */
+  --px-4: px-4;
+
+  /* Vertical padding utility class (0.75rem) */
+  --py-3: py-3;
+
+  /* Vertical padding utility class (0.5rem) */
+  --py-2: py-2;
+
+  /* Base text size utility class */
+  --text-base: text-base;
+
+  /* Extra small text size utility class */
+  --text-xs: text-xs;
+
+  /* Bottom margin utility class (0.25rem) */
+  --mb-1: mb-1;
+
+  /* Vertical spacing utility class */
+  --space-y-2: space-y-2;
+
+  /* Transition all properties utility class */
+  --transition-all: transition-all;
+
+  /* Remove outline utility class */
+  --outline-none: outline-none;
+
+  /* Margin left utility class (0.75rem / 12px) */
+  --ml-3: ml-3;
+
+  /* 2px border width utility class */
+  --border-2: border-2;
+
+  /* Solid border style utility class */
+  --border-solid: border-solid;
+
+  /* Medium border radius utility class */
+  --rounded: rounded;
+
+  /* Width utility class (0.75rem / 12px) */
+  --w-3: w-3;
+
+  /* Height utility class (0.75rem / 12px) */
+  --h-3: h-3;
+
+  /* Gray 400 border color utility class */
+  --border-gray-400: border-gray-400;
+
+  /* Blue 600 border color utility class */
+  --border-blue-600: border-blue-600;
+
+  /* Blue 700 border color utility class */
+  --border-blue-700: border-blue-700;
+
+  /* Blue 600 background utility class */
+  --bg-blue-600: bg-blue-600;
+
+  /* Blue 700 background utility class */
+  --bg-blue-700: bg-blue-700;
+
+  /* Gray 100 background utility class */
+  --bg-gray-100: bg-gray-100;
+
+  /* Gray 300 background utility class */
+  --bg-gray-300: bg-gray-300;
+
+  /* Checked state border color */
+  --checked:border-blue-600: checked:border-blue-600;
+
+  /* Checked state background color */
+  --checked:bg-blue-600: checked:bg-blue-600;
+
+  /* Hover state border color */
+  --hover:border-gray-400: hover:border-gray-400;
+
+  /* Hover checked state border color */
+  --hover:checked:border-blue-700: hover:checked:border-blue-700;
+
+  /* Hover checked state background color */
+  --hover:checked:bg-blue-700: hover:checked:bg-blue-700;
+
+  /* Remove default focus outline */
+  --focus:outline-none: focus:outline-none;
+
+  /* Focus ring width */
+  --focus:ring-2: focus:ring-2;
+
+  /* Focus ring color with opacity */
+  --focus:ring-blue-500/30: focus:ring-blue-500/30;
+
+  /* Focus state border color */
+  --focus:border-blue-600: focus:border-blue-600;
+
+  /* Disabled state border color */
+  --disabled:border-gray-200: disabled:border-gray-200;
+
+  /* Disabled state background color */
+  --disabled:bg-gray-100: disabled:bg-gray-100;
+
+  /* Disabled state cursor */
+  --disabled:cursor-not-allowed: disabled:cursor-not-allowed;
+
+  /* Disabled checked state border color */
+  --disabled:checked:border-gray-300: disabled:checked:border-gray-300;
+
+  /* Disabled checked state background color */
+  --disabled:checked:bg-gray-300: disabled:checked:bg-gray-300;
+
+  /* Show checkmark when checked */
+  --group-has-[:checked]:opacity-100: group-has-[:checked]:opacity-100;
+
+  /* Disabled label text color */
+  --group-has-[:disabled]:text-gray-400: group-has-[:disabled]:text-gray-400;
+
+  /* Opacity transition utility class */
+  --transition-opacity: transition-opacity;
+
+  /* CSS transform utility class */
+  --transform: transform;
+
+  /* Horizontal translation utility class */
+  -translate-x-1/2: -translate-x-1/2;
+
+  /* Vertical translation utility class */
+  -translate-y-1/2: -translate-y-1/2;
+
+  /* Top 50% positioning utility class */
+  --top-1/2: top-1/2;
+
+  /* Left 50% positioning utility class */
+  --left-1/2: left-1/2;
+
+  /* Absolute positioning utility class */
+  --absolute: absolute;
+
+  /* Pointer events none utility class */
+  --pointer-events-none: pointer-events-none;
+
+  /* Opacity 0 utility class */
+  --opacity-0: opacity-0;
+
+  /* Text selection none utility class */
+  --select-none: select-none;
+
+  /* Remove default appearance utility class */
+  --appearance-none: appearance-none;
+
+  /* Z-index for modals to appear above other content */
+  --modal-z-index: 50%;
+
+  /* Semi-transparent backdrop behind modal */
+  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
+
+  /* Backdrop blur amount */
+  --modal-backdrop-blur: 8px;
+
+  /* Maximum width of modal content */
+  --modal-max-width: 32px;
+
+  /* Minimum width of modal content */
+  --modal-min-width: 20px;
+
+  /* Duration of modal open/close animations */
+  --modal-animation-duration: 0.3;
+
+  /* Easing function for modal animations */
+  --modal-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Padding inside modal content area */
+  --modal-content-padding: 1.5rem;
+
+  /* Utility class for fixed positioning */
+  --fixed: fixed;
+
+  /* Utility class for top, right, bottom, left: 0 */
+  --inset-0: inset-0;
+
+  /* Utility class for flex-direction: column */
+  --flex-col: flex-col;
+
+  /* Utility class for 1.5rem gap */
+  --gap-6: gap-6;
+
+  /* Utility class for sticky positioning */
+  --sticky: sticky;
+
+  /* Utility class for top: 0 */
+  --top-0: top-0;
+
+  /* Utility class for backdrop blur */
+  --backdrop-blur-sm: backdrop-blur-sm;
+
+  /* Utility class for 300ms transition duration */
+  --duration-300: duration-300;
+
+  /* Utility class for ease-out timing function */
+  --ease-out: ease-out;
+
+  /* Utility class for 95% scale transform */
+  --scale-95: scale-95;
+
+  /* Utility class for 100% scale transform */
+  --scale-100: scale-100;
+
+  /* Utility class for 100% opacity */
+  --opacity-100: opacity-100;
+
+  /* Utility class for z-index: 50 */
+  --z-50: z-50;
+
+  /* Utility class for pointer-events: auto */
+  --pointer-events-auto: pointer-events-auto;
+
+  /* Utility class for scale 105% on hover */
+  --hover-scale-105: hover:scale-105;
+
+  /* Utility class for gray-800 background on hover */
+  --hover-bg-gray-800: hover:bg-gray-800;
+
+  /* Utility class for blue-600 background on hover */
+  --hover-bg-blue-600: hover:bg-blue-600;
+
+  /* Utility class for focus ring */
+  --focus-ring-4: focus:ring-4;
+
+  /* Utility class for blue focus ring */
+  --focus-ring-blue-500: focus:ring-blue-500;
+
+  /* Utility class for focus ring opacity */
+  --focus-ring-opacity-20: focus:ring-opacity-20;
+
+  /* Utility class for no outline on focus */
+  --focus-outline-none: focus:outline-none;
+
+  /* Animation utility class for entrance animations */
+  --animate-in: animate-in;
+
+  /* Fade in animation class */
+  --fade-in: fade-in;
+
+  /* Zoom in animation class */
+  --zoom-in-95: zoom-in-95;
+
+  /* Focus ring utility */
+  --focus-ring-2: focus:ring-2;
+
+  /* Focus ring offset */
+  --focus-ring-offset-2: focus:ring-offset-2;
+
+  /* Hover state for primary button */
+  --hover-bg-blue-700: hover:bg-blue-700;
+
+  /* Placeholder text color */
+  --placeholder-gray-400: placeholder-gray-400;
+
+  /* Line height utility */
+  --leading-relaxed: leading-relaxed;
+
+  /* Top margin utility class (1.5rem) */
+  --mt-6: mt-6;
+
+  /* Medium border radius utility class */
+  --rounded-md: rounded-md;
+
+  /* 2XL border radius utility class */
+  --rounded-2xl: rounded-2xl;
+
+  /* Very light success background color */
+  --success-50: #f0fdf4;
+
+  /* Light success background color */
+  --success-100: #dcfce7;
+
+  /* Primary success color */
+  --success-500: #22c55e;
+
+  /* Dark success color */
+  --success-600: #16a34a;
+
+  /* Darker success color */
+  --success-700: #15803d;
+
+  /* Very light warning background color */
+  --warning-50: #fffbeb;
+
+  /* Light warning background color */
+  --warning-100: #fef3c7;
+
+  /* Primary warning color */
+  --warning-500: #f59e0b;
+
+  /* Dark warning color */
+  --warning-600: #d97706;
+
+  /* Darker warning color */
+  --warning-700: #b45309;
+
+  /* Very light error background color */
+  --error-50: #fef2f2;
+
+  /* Light error background color */
+  --error-100: #fee2e2;
+
+  /* Primary error color */
+  --error-500: #ef4444;
+
+  /* Dark error color */
+  --error-600: #dc2626;
+
+  /* Darker error color */
+  --error-700: #b91c1c;
+
+  /* Very light info background color */
+  --info-50: #eff6ff;
+
+  /* Light info background color */
+  --info-100: #dbeafe;
+
+  /* Primary info color */
+  --info-500: #3b82f6;
+
+  /* Dark info color */
+  --info-600: #2563eb;
+
+  /* Darker info color */
+  --info-700: #1d4ed8;
+
+  /* Primary neutral color */
+  --neutral-500: #6b7280;
+
+  /* Soft shadow for subtle elevation */
+  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+  /* Subtle shadow for alerts */
+  --shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.04);
+
+  /* Base size for alert icons */
+  --icon-size-base: 1.25rem;
+
+  /* Smooth transition for interactive elements */
+  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Utility class for success-50 background */
+  --bg-success-50: bg-success-50;
+
+  /* Utility class for warning-50 background */
+  --bg-warning-50: bg-warning-50;
+
+  /* Utility class for error-50 background */
+  --bg-error-50: bg-error-50;
+
+  /* Utility class for info-50 background */
+  --bg-info-50: bg-info-50;
+
+  /* Utility class for success-700 text color */
+  --text-success-700: text-success-700;
+
+  /* Utility class for warning-700 text color */
+  --text-warning-700: text-warning-700;
+
+  /* Utility class for error-700 text color */
+  --text-error-700: text-error-700;
+
+  /* Utility class for info-700 text color */
+  --text-info-700: text-info-700;
+
+  /* Utility class for success-200 border */
+  --border-success-200: border-success-200;
+
+  /* Utility class for warning-200 border */
+  --border-warning-200: border-warning-200;
+
+  /* Utility class for error-200 border */
+  --border-error-200: border-error-200;
+
+  /* Utility class for info-200 border */
+  --border-info-200: border-info-200;
+
+  /* Utility class for soft shadow */
+  --shadow-soft-class: shadow-soft;
+
+  /* Utility class for subtle shadow */
+  --shadow-subtle-class: shadow-subtle;
+
+  /* Utility class for smooth transition */
+  --transition-all-smooth: transition-all-smooth;
+
+  /* Vertical spacing utility class (1rem) */
+  --space-y-4: space-y-4;
+
+  /* Bottom margin utility class (0.5rem) */
+  --mb-2: mb-2;
+
+  /* Padding utility class (0.25rem) */
+  --p-1: p-1;
+
+  /* Bottom margin utility class (0.75rem) */
+  --mb-3: mb-3;
+
+  /* Primary background color for badges */
+  --badge-bg-primary: var(--primary-color);
+
+  /* Text color for primary badges */
+  --badge-text-primary: #ffffff;
+
+  /* Secondary background color for badges */
+  --badge-bg-secondary: #dcd926ff;
+
+  /* Text color for secondary badges */
+  --badge-text-secondary: #76f990;
+
+  /* Success state background color */
+  --badge-bg-success: #10b981;
+
+  /* Text color for success badges */
+  --badge-text-success: #ffffff;
+
+  /* Warning state background color */
+  --badge-bg-warning: #f59e0b;
+
+  /* Text color for warning badges */
+  --badge-text-warning: #ffffff;
+
+  /* Error state background color */
+  --badge-bg-error: #ef4444;
+
+  /* Text color for error badges */
+  --badge-text-error: #ffffff;
+
+  /* Transparent background for outline badges */
+  --badge-bg-outline: transparent;
+
+  /* Border color for outline badges */
+  --badge-border-outline: #d5d8dc;
+
+  /* Text color for outline badges */
+  --badge-text-outline: #374151;
+
+  /* Horizontal padding for badges */
+  --badge-padding-x: 0.75rem;
+
+  /* Vertical padding for badges */
+  --badge-padding-y: 0.25rem;
+
+  /* Border radius for pill-shaped badges */
+  --badge-border-radius: 50%;
+
+  /* Border radius for square badges */
+  --badge-border-radius-square: 6px;
+
+  /* Border width for outline badges */
+  --badge-border-width: 1rem;
+
+  /* Font size for badge text */
+  --badge-font-size: 0.75rem;
+
+  /* Font weight for badge text */
+  --badge-font-weight: 600;
+
+  /* Letter spacing for badge text */
+  --badge-letter-spacing: 0.025em;
+
+  /* Transition for hover states */
+  --badge-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+  /* Box shadow for elevated badges */
+  --badge-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  /* Scale transform on hover */
+  --badge-hover-scale: 1.05;
+
+  /* Scale transform when active/clicked */
+  --badge-active-scale: 0.95;
+
+  /* Size for icons within badges */
+  --badge-icon-size: 0.75rem;
+
+  /* Gap between badge elements */
+  --badge-gap: 0.5rem;
+
+  /* Primary badge utility class */
+  --badge-primary: badge-primary;
+
+  /* Secondary badge utility class */
+  --badge-secondary: badge-secondary;
+
+  /* Success badge utility class */
+  --badge-success: badge-success;
+
+  /* Warning badge utility class */
+  --badge-warning: badge-warning;
+
+  /* Error badge utility class */
+  --badge-error: badge-error;
+
+  /* Outline badge utility class */
+  --badge-outline: badge-outline;
+
+  /* Pill-shaped badge utility class */
+  --badge-pill: badge-pill;
+
+  /* Badge with icon utility class */
+  --badge-with-icon: badge-with-icon;
+
+  /* Interactive badge utility class */
+  --badge-interactive: badge-interactive;
+
+  /* User-added custom property */
+  --muzingo-primary-color: #dd2c47;
+
+  /* User-added custom property */
+  --muzingo-primary-color-1: #266DDC;
+}
+/* Auto-generated Utility Classes from Design System */
+/* DO NOT EDIT - Generated from your design system API */
+
+:host, :root {
+  display: block;
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+.bg-gray-50 {
+  background-color: var(--gray-50, #f9f9f9);
+}
+
+.font-sans {
+  font-family: var(--font-family-sans, Inter, system-ui, sans-serif);
+}
+
+.w-full {
+  width: var(--width, 100%);
+}
+
+.max-w-md {
+  max-width: var(--max-width, 300rem);
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.bg-white {
+  background-color: var(--white, #ffffff);
+}
+
+.rounded-3xl {
+  border-radius: var(--border-radius-3xl, 20px);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.p-6 {
+  padding: var(--spacing-6, 2.5rem);
+}
+
+.border-b {
+  border-bottom-width: var(--border-width-1, 1px);
+  border-bottom-style: var(--border-style-solid, solid);
+  border-bottom-color: var(--gray-200, #67880c);
+}
+
+.border-gray-200 {
+  border-color: var(--gray-200, #67880c);
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-semibold {
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+.text-gray-900 {
+  color: var(--gray-900, #76f990);
+}
+
+.font-mono {
+  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+}
+
+.text-gray-800 {
+  color: var(--gray-800, #122be2);
+}
+
+.rounded-xl {
+  border-radius: var(--border-radius-xl, 2px);
+}
+
+.p-4 {
+  padding: var(--spacing-4, 1rem);
+}
+
+.space-x-4 {
+  > * + * { margin-left: var(--spacing-4, 1rem); };
+}
+
+.w-14 {
+  width: 3.5rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.rounded-full {
+  border-radius: var(--border-radius-full, 50%);
+}
+
+.object-cover {
+  object-fit: cover;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.text-sm {
+  font-size: var(--font-size-sm, 0.875rem);
+  line-height: 1.25rem;
+}
+
+.text-gray-500 {
+  color: var(--gray-500, #7af202);
+}
+
+.space-x-2 {
+  > * + * { margin-left: var(--spacing-2, 0.5rem); };
+}
+
+.p-2 {
+  padding: var(--spacing-2, 0.5rem);
+}
+
+.border {
+  border-width: var(--border-width-1, 1px);
+  border-style: var(--border-style-solid, solid);
+  border-color: var(--gray-200, #67880c);
+}
+
+.border-gray-300 {
+  border-color: var(--gray-300, #d5d8dc);
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-duration: var(--duration-200, 0.2);
+  transition-timing-function: ease-in-out;
+}
+
+.bg-gray-800 {
+  background-color: var(--gray-800, #122be2);
+}
+
+.text-white {
+  color: var(--white, #ffffff);
+}
+
+.px-6 {
+  padding-left: var(--spacing-6, 2.5rem);
+  padding-right: var(--spacing-6, 2.5rem);
+}
+
+.pb-6 {
+  padding-bottom: var(--spacing-6, 2.5rem);
+}
+
+.space-y-6 {
+  > * + * { margin-top: var(--spacing-6, 2.5rem); };
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.space-x-3 {
+  > * + * { margin-left: var(--spacing-3, 0.75rem); };
+}
+
+.mt-1 {
+  margin-top: var(--spacing-1, 0.25rem);
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.w-8 {
+  width: var(--spacing-8, 2rem);
+}
+
+.h-8 {
+  height: var(--spacing-8, 2rem);
+}
+
+.bg-blue-50 {
+  background-color: var(--blue-50, #eff6ff);
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.bg-gray-900 {
+  background-color: var(--gray-900, #76f990);
+}
+
+.w-12 {
+  width: 3rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.text-lg {
+  font-size: var(--font-size-lg, 1.2rem);
+  line-height: 1.75rem;
+}
+
+.text-gray-300 {
+  color: var(--gray-300, #d5d8dc);
+}
+
+.py-6 {
+  padding-top: var(--spacing-6, 2.5rem);
+  padding-bottom: var(--spacing-6, 2.5rem);
+}
+
+.border-t {
+  border-top-width: var(--border-width-1, 1px);
+  border-top-style: var(--border-style-solid, solid);
+  border-top-color: var(--gray-200, #67880c);
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.rounded-md {
+  border-radius: var(--border-radius-md, 6px);
+}
+
+.transition-all {
+  transition-property: all;
+  transition-duration: var(--duration-200, 0.2);
+  transition-timing-function: ease-in-out;
+}
+
+.bg-blue-600 {
+  background-color: var(--blue-600, #2563eb);
+}
+
+.px-4 {
+  padding-left: var(--spacing-4, 1rem);
+  padding-right: var(--spacing-4, 1rem);
+}
+
+.py-2 {
+  padding-top: var(--spacing-2, 0.5rem);
+  padding-bottom: var(--spacing-2, 0.5rem);
+}
+
+.text-gray-700 {
+  color: var(--gray-700, #374151);
+}
+
+.mb-1 {
+  margin-bottom: var(--spacing-1, 0.25rem);
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.transform {
+  transform: translateX(0) translateY(0) rotate(0) scale(1);
+}
+
+.-translate-y-1\/2 {
+  transform: translateY(-50%);
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.rounded-lg {
+  border-radius: var(--border-radius-lg, 8px);
+}
+
+.text-base {
+  font-size: var(--font-size-base, 1rem);
+  line-height: 1.5rem;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.duration-200 {
+  transition-duration: var(--duration-200, 0.2);
+}
+
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.pl-12 {
+  padding-left: 3rem;
+}
+
+.text-xs {
+  font-size: var(--font-size-xs, 0.75rem);
+  line-height: 1rem;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.mt-6 {
+  margin-top: var(--spacing-6, 2.5rem);
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.space-y-2 {
+  > * + * { margin-top: var(--spacing-2, 0.5rem); };
+}
+
+.text-red-600 {
+  color: #dc2626;
+}
+
+.border-red-500 {
+  border-color: #ef4444;
+}
+
+.border-green-600 {
+  border-color: #16a34a;
+}
+
+.text-green-600 {
+  color: #16a34a;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.select-none {
+  user-select: none;
+}
+
+.appearance-none {
+  appearance: none;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.border-2 {
+  border-width: 2px;
+  border-style: solid;
+  border-color: inherit;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
+.rounded {
+  border-radius: var(--border-radius-md, 6px);
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.-translate-x-1\/2 {
+  transform: translateX(-50%);
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-duration: var(--duration-200, 0.2);
+  transition-timing-function: ease-in-out;
+}
+
+.ml-3 {
+  margin-left: var(--spacing-3, 0.75rem);
+}
+
+.fixed {
+  position: fixed;
+}
+
+.inset-0 {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.rounded-2xl {
+  border-radius: var(--border-radius-2xl, 16px);
+}
+
+.duration-300 {
+  transition-duration: 0.3s;
+}
+
+.space-y-4 {
+  > * + * { margin-top: var(--spacing-4, 1rem); };
+}
+
+.mb-2 {
+  margin-bottom: var(--spacing-2, 0.5rem);
+}
+
+.px-3 {
+  padding-left: var(--spacing-3, 0.75rem);
+  padding-right: var(--spacing-3, 0.75rem);
+}
+
+.border-blue-600 {
+  border-color: var(--blue-600, #2563eb);
+}
+
+.text-blue-600 {
+  color: var(--blue-600, #2563eb);
+}
+
+.p-1 {
+  padding: var(--spacing-1, 0.25rem);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.mb-3 {
+  margin-bottom: var(--spacing-3, 0.75rem);
+}
+
+.text-gray-600 {
+  color: var(--gray-600, #4b5563);
+}
+
+.py-1 {
+  padding-top: var(--spacing-1, 0.25rem);
+  padding-bottom: var(--spacing-1, 0.25rem);
+}
+
+.shadow-sm {
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.bg-gray-100:hover {
+  background-color: var(--gray-100, #f3f4f6);
+}
+
+.outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.bg-blue-700:hover {
+  background-color: #1d4ed8;
+}
+
+.border-gray-400:hover {
+  border-color: var(--gray-400, #9ca3af);
+}
+
+.border-red-500:focus {
+  border-color: #ef4444;
+}
+
+.border-green-600:focus {
+  border-color: #16a34a;
+}
+
+.border-blue-600:checked {
+  border-color: var(--blue-600, #2563eb);
+}
+
+.bg-blue-600:checked {
+  background-color: var(--blue-600, #2563eb);
+}
+
+.border-blue-600:focus {
+  border-color: var(--blue-600, #2563eb);
+}
+
+.border-gray-200:disabled {
+  border-color: var(--gray-200, #67880c);
+}
+
+.bg-gray-100:disabled {
+  background-color: var(--gray-100, #f3f4f6);
+}
+
+.bg-gray-50:hover {
+  background-color: var(--gray-50, #f9f9f9);
+}
+
+.bg-blue-600:hover {
+  background-color: var(--blue-600, #2563eb);
+}
+
+.bg-green-600:hover {
+  background-color: #16a34a;
+}
+
+.bg-red-600:hover {
+  background-color: #dc2626;
+}
+
+.text-gray-900:hover {
+  color: var(--gray-900, #76f990);
+}
+
+
+/* Global reset */
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+/* Base styles using design tokens */
+:root {
+  font-family: var(--font-family-sans, Inter, system-ui, sans-serif);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Ensure SVG icons display properly and can be styled via tokens */
+svg {
+  display: inline-block;
+  vertical-align: middle;
+  fill: currentColor;
+  width: 1em;
+  height: 1em;
+}
+
+/* Allow SVG parts to be styled */
+svg[part="icon"] {
+  width: var(--icon-size, 1em);
+  height: var(--icon-size, 1em);
+  color: var(--icon-color, currentColor);
+}
+
+/* Host styles for components */
+:host {
+  display: block;
+}
+
+/* Component part styling */
+::part(icon) {
+  width: var(--icon-size, 1.25rem);
+  height: var(--icon-size, 1.25rem);
+}
+
+/* Animation keyframes from design system */
+@keyframes fadeIn {
+  from {
+    opacity: var(--opacity-0, 0);
+  }
+  to {
+    opacity: var(--opacity-100, 1);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}