/* Karakal Design System
 * A comprehensive set of variables, utility classes, and components
 * to ensure consistent design across the application
 */

/* -------------------------------- 
   TABLE OF CONTENTS:
   1. CSS Custom Properties (Variables)
   2. Typography
   3. Grid System
   4. Spacing Utilities
   5. Flexbox Utilities
   6. Display Utilities
   7. Text Utilities
   8. Color Utilities
   9. Shadow Utilities
   10. Border Utilities
   11. Interactive States
   12. Form Controls & Inputs
   13. Buttons
   14. Cards & Containers
   15. Component-Specific Styles
   16. Responsive Breakpoints
   17. Accessibility
   18. Icon System
   19. Animation & Transitions
   20. Dark Mode Adjustments
-------------------------------- */

/* -------------------------------- 
   1. CSS Custom Properties (Variables)
-------------------------------- */

:root {
    /* Color System */
    /* Primary Colors */
    --primary-50: #e6f2ff;
    --primary-100: #bfdfff;
    --primary-200: #80bfff;
    --primary-300: #4d9fff;
    --primary-400: #1a80ff;
    --primary-500: #0066cc;
    /* Base Primary Color */
    --primary-600: #0052a3;
    --primary-700: #003d7a;
    --primary-800: #002952;
    --primary-900: #001429;

    /* Secondary/Neutral Colors */
    --neutral-50: #f8f9fa;
    --neutral-100: #f1f3f5;
    --neutral-200: #e9ecef;
    --neutral-300: #dee2e6;
    --neutral-400: #ced4da;
    --neutral-500: #adb5bd;
    --neutral-600: #868e96;
    --neutral-700: #495057;
    --neutral-800: #343a40;
    --neutral-900: #212529;

    /* Semantic Colors */
    --success-50: #eafaf1;
    --success-100: #d4f5e2;
    --success-200: #a9ebc4;
    --success-300: #7ee2a8;
    --success-400: #54d98c;
    --success-500: #28a745;
    /* Base Success Color */
    --success-600: #208537;
    --success-700: #186429;
    --success-800: #10421c;
    --success-900: #08210e;

    --warning-50: #fff9e6;
    --warning-100: #fff3cc;
    --warning-200: #ffe799;
    --warning-300: #ffdb66;
    --warning-400: #ffcf33;
    --warning-500: #ffc107;
    /* Base Warning Color */
    --warning-600: #cc9a06;
    --warning-700: #997404;
    --warning-800: #664d03;
    --warning-900: #332701;

    --danger-50: #fbeef0;
    --danger-100: #f8dde1;
    --danger-200: #f1bbc3;
    --danger-300: #ea99a5;
    --danger-400: #e37787;
    --danger-500: #dc3545;
    /* Base Danger Color */
    --danger-600: #b02a37;
    --danger-700: #842029;
    --danger-800: #58151c;
    --danger-900: #2c0b0e;

    --info-50: #e6f8fb;
    --info-100: #ccf1f6;
    --info-200: #99e3ee;
    --info-300: #66d5e5;
    --info-400: #33c7dd;
    --info-500: #17a2b8;
    /* Base Info Color */
    --info-600: #138293;
    --info-700: #0e616e;
    --info-800: #0a414a;
    --info-900: #052025;

    /* Light & Dark Theme Variables */
    /* Will be overridden by theme.css for dark mode */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;

    --text-primary: #212529;
    --text-secondary: #495057;
    --text-tertiary: #868e96;

    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #ced4da;

    /* Sizing & Spacing */
    --space-unit: 0.25rem;
    --space-1: calc(var(--space-unit));
    /* 4px */
    --space-2: calc(var(--space-unit) * 2);
    /* 8px */
    --space-3: calc(var(--space-unit) * 3);
    /* 12px */
    --space-4: calc(var(--space-unit) * 4);
    /* 16px */
    --space-5: calc(var(--space-unit) * 6);
    /* 24px */
    --space-6: calc(var(--space-unit) * 8);
    /* 32px */
    --space-7: calc(var(--space-unit) * 12);
    /* 48px */
    --space-8: calc(var(--space-unit) * 16);
    /* 64px */
    --space-9: calc(var(--space-unit) * 24);
    /* 96px */
    --space-10: calc(var(--space-unit) * 32);
    /* 128px */

    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-4xl: 2.25rem;
    /* 36px */

    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    /* 2px */
    --radius-md: 0.25rem;
    /* 4px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Z-index values */
    --z-index-below: -1;
    --z-index-base: 0;
    --z-index-above: 1;
    --z-index-nav: 10;
    --z-index-dropdown: 50;
    --z-index-sticky: 100;
    --z-index-fixed: 200;
    --z-index-modal: 700;
    --z-index-toast: 750;
    --z-index-tooltip: 1000;

    /* Transitions */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-slow: 1500ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-out: cubic-bezier(0, 0, 0.2, 1);
    --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
}

/* -------------------------------- 
   2. Typography
-------------------------------- */

/* Headings */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.h1 {
    font-size: var(--font-size-4xl);
}

.h2 {
    font-size: var(--font-size-3xl);
}

.h3 {
    font-size: var(--font-size-2xl);
}

.h4 {
    font-size: var(--font-size-xl);
}

.h5 {
    font-size: var(--font-size-lg);
}

.h6 {
    font-size: var(--font-size-base);
}

/* Text sizes */
.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

.text-4xl {
    font-size: var(--font-size-4xl);
}

/* Font weights */
.font-light {
    font-weight: var(--font-weight-light);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* Line heights */
.leading-tight {
    line-height: var(--line-height-tight);
}

.leading-snug {
    line-height: var(--line-height-snug);
}

.leading-normal {
    line-height: var(--line-height-normal);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

.leading-loose {
    line-height: var(--line-height-loose);
}

/* Text transformations */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.normal-case {
    text-transform: none;
}

/* Text alignment */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* Text decoration */
.underline {
    text-decoration: underline;
}

.line-through {
    text-decoration: line-through;
}

.no-underline {
    text-decoration: none;
}

/* Text wrapping and overflow */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitespace-normal {
    white-space: normal;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.whitespace-pre {
    white-space: pre;
}

.whitespace-pre-line {
    white-space: pre-line;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

/* -------------------------------- 
   3. Grid System
-------------------------------- */

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-span-full {
    grid-column: 1 / -1;
}

.row-span-1 {
    grid-row: span 1 / span 1;
}

.row-span-2 {
    grid-row: span 2 / span 2;
}

.row-span-3 {
    grid-row: span 3 / span 3;
}

.row-span-4 {
    grid-row: span 4 / span 4;
}

.row-span-5 {
    grid-row: span 5 / span 5;
}

.row-span-6 {
    grid-row: span 6 / span 6;
}

.row-span-full {
    grid-row: 1 / -1;
}

.grid-flow-row {
    grid-auto-flow: row;
}

.grid-flow-col {
    grid-auto-flow: column;
}

.grid-flow-row-dense {
    grid-auto-flow: row dense;
}

.grid-flow-col-dense {
    grid-auto-flow: column dense;
}

.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

.gap-6 {
    gap: var(--space-6);
}

.gap-7 {
    gap: var(--space-7);
}

.gap-8 {
    gap: var(--space-8);
}

.gap-x-0 {
    column-gap: 0;
}

.gap-x-1 {
    column-gap: var(--space-1);
}

.gap-x-2 {
    column-gap: var(--space-2);
}

.gap-x-3 {
    column-gap: var(--space-3);
}

.gap-x-4 {
    column-gap: var(--space-4);
}

.gap-x-5 {
    column-gap: var(--space-5);
}

.gap-x-6 {
    column-gap: var(--space-6);
}

.gap-x-7 {
    column-gap: var(--space-7);
}

.gap-x-8 {
    column-gap: var(--space-8);
}

.gap-y-0 {
    row-gap: 0;
}

.gap-y-1 {
    row-gap: var(--space-1);
}

.gap-y-2 {
    row-gap: var(--space-2);
}

.gap-y-3 {
    row-gap: var(--space-3);
}

.gap-y-4 {
    row-gap: var(--space-4);
}

.gap-y-5 {
    row-gap: var(--space-5);
}

.gap-y-6 {
    row-gap: var(--space-6);
}

.gap-y-7 {
    row-gap: var(--space-7);
}

.gap-y-8 {
    row-gap: var(--space-8);
}

/* -------------------------------- 
   4. Spacing Utilities
-------------------------------- */

/* Margin */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: var(--space-1);
}

.m-2 {
    margin: var(--space-2);
}

.m-3 {
    margin: var(--space-3);
}

.m-4 {
    margin: var(--space-4);
}

.m-5 {
    margin: var(--space-5);
}

.m-6 {
    margin: var(--space-6);
}

.m-auto {
    margin: auto;
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
}

.mx-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
}

.mx-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
}

.mx-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
}

.mx-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
}

.mx-6 {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

.my-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

.my-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.my-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.my-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
}

.my-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: var(--space-1);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: var(--space-3);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-5 {
    margin-top: var(--space-5);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-auto {
    margin-top: auto;
}

.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: var(--space-1);
}

.mr-2 {
    margin-right: var(--space-2);
}

.mr-3 {
    margin-right: var(--space-3);
}

.mr-4 {
    margin-right: var(--space-4);
}

.mr-5 {
    margin-right: var(--space-5);
}

.mr-6 {
    margin-right: var(--space-6);
}

.mr-auto {
    margin-right: auto;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-5 {
    margin-bottom: var(--space-5);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-auto {
    margin-bottom: auto;
}

.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: var(--space-1);
}

.ml-2 {
    margin-left: var(--space-2);
}

.ml-3 {
    margin-left: var(--space-3);
}

.ml-4 {
    margin-left: var(--space-4);
}

.ml-5 {
    margin-left: var(--space-5);
}

.ml-6 {
    margin-left: var(--space-6);
}

.ml-auto {
    margin-left: auto;
}

/* Padding */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: var(--space-1);
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: var(--space-3);
}

.p-4 {
    padding: var(--space-4);
}

.p-5 {
    padding: var(--space-5);
}

.p-6 {
    padding: var(--space-6);
}

.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}

.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.px-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.px-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

.px-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.py-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.py-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.py-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: var(--space-1);
}

.pt-2 {
    padding-top: var(--space-2);
}

.pt-3 {
    padding-top: var(--space-3);
}

.pt-4 {
    padding-top: var(--space-4);
}

.pt-5 {
    padding-top: var(--space-5);
}

.pt-6 {
    padding-top: var(--space-6);
}

.pr-0 {
    padding-right: 0;
}

.pr-1 {
    padding-right: var(--space-1);
}

.pr-2 {
    padding-right: var(--space-2);
}

.pr-3 {
    padding-right: var(--space-3);
}

.pr-4 {
    padding-right: var(--space-4);
}

.pr-5 {
    padding-right: var(--space-5);
}

.pr-6 {
    padding-right: var(--space-6);
}

.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: var(--space-1);
}

.pb-2 {
    padding-bottom: var(--space-2);
}

.pb-3 {
    padding-bottom: var(--space-3);
}

.pb-4 {
    padding-bottom: var(--space-4);
}

.pb-5 {
    padding-bottom: var(--space-5);
}

.pb-6 {
    padding-bottom: var(--space-6);
}

.pl-0 {
    padding-left: 0;
}

.pl-1 {
    padding-left: var(--space-1);
}

.pl-2 {
    padding-left: var(--space-2);
}

.pl-3 {
    padding-left: var(--space-3);
}

.pl-4 {
    padding-left: var(--space-4);
}

.pl-5 {
    padding-left: var(--space-5);
}

.pl-6 {
    padding-left: var(--space-6);
}

/* -------------------------------- 
   5. Flexbox Utilities
-------------------------------- */

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-initial {
    flex: 0 1 auto;
}

.flex-none {
    flex: none;
}

.flex-grow {
    flex-grow: 1;
}

.flex-grow-0 {
    flex-grow: 0;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-stretch {
    align-content: stretch;
}

.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-stretch {
    align-self: stretch;
}

.order-first {
    order: -9999;
}

.order-last {
    order: 9999;
}

.order-none {
    order: 0;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

/* -------------------------------- 
   6. Display Utilities
-------------------------------- */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.table-cell {
    display: table-cell;
}

.grid {
    display: grid;
}

.inline-grid {
    display: inline-grid;
}

.hidden {
    display: none;
}

/* -------------------------------- 
   7. Text Utilities
-------------------------------- */

/* Colors */
.text-primary {
    color: var(--primary-500);
}

.text-primary-dark {
    color: var(--primary-700);
}

.text-primary-light {
    color: var(--primary-300);
}

.text-success {
    color: var(--success-500);
}

.text-warning {
    color: var(--warning-500);
}

.text-danger {
    color: var(--danger-500);
}

.text-info {
    color: var(--info-500);
}

.text-default {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-tertiary);
}

.text-white {
    color: white;
}

/* -------------------------------- 
   8. Color Utilities
-------------------------------- */

.bg-primary {
    background-color: var(--primary-500);
}

.bg-primary-dark {
    background-color: var(--primary-700);
}

.bg-primary-light {
    background-color: var(--primary-300);
}

.bg-success {
    background-color: var(--success-500);
}

.bg-warning {
    background-color: var(--warning-500);
}

.bg-danger {
    background-color: var(--danger-500);
}

.bg-info {
    background-color: var(--info-500);
}

.bg-default {
    background-color: var(--bg-primary);
}

.bg-secondary {
    background-color: var(--bg-secondary);
}

.bg-tertiary {
    background-color: var(--bg-tertiary);
}

.bg-white {
    background-color: white;
}

.bg-transparent {
    background-color: transparent;
}

/* -------------------------------- 
   9. Shadow Utilities
-------------------------------- */

.shadow-none {
    box-shadow: none;
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* -------------------------------- 
   10. Border Utilities
-------------------------------- */

.border {
    border: 1px solid var(--border-color);
}

.border-0 {
    border: 0;
}

.border-top {
    border-top: 1px solid var(--border-color);
}

.border-right {
    border-right: 1px solid var(--border-color);
}

.border-bottom {
    border-bottom: 1px solid var(--border-color);
}

.border-left {
    border-left: 1px solid var(--border-color);
}

.border-primary {
    border-color: var(--primary-500);
}

.border-success {
    border-color: var(--success-500);
}

.border-warning {
    border-color: var(--warning-500);
}

.border-danger {
    border-color: var(--danger-500);
}

.border-info {
    border-color: var(--info-500);
}

.rounded-none {
    border-radius: var(--radius-none);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* -------------------------------- 
   11. Interactive States
-------------------------------- */

.cursor-auto {
    cursor: auto;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-wait {
    cursor: wait;
}

.cursor-text {
    cursor: text;
}

.cursor-move {
    cursor: move;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-help {
    cursor: help;
}

.cursor-progress {
    cursor: progress;
}

.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

.select-none {
    user-select: none;
}

.select-text {
    user-select: text;
}

.select-all {
    user-select: all;
}

.select-auto {
    user-select: auto;
}

.focus-ring {
    outline: 2px solid var(--primary-300);
    outline-offset: 2px;
}

.opacity-0 {
    opacity: 0;
}

.opacity-25 {
    opacity: 0.25;
}

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

/* -------------------------------- 
   12. Form Controls & Inputs
-------------------------------- */

.form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-1);
    color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast) ease-in-out, box-shadow var(--transition-fast) ease-in-out;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px var(--primary-100);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: var(--bg-tertiary);
    opacity: 0.7;
    cursor: not-allowed;
}

.form-checkbox,
.form-radio {
    cursor: pointer;
    height: 1rem;
    width: 1rem;
    margin-right: var(--space-2);
    vertical-align: middle;
}

.form-checkbox:checked,
.form-radio:checked {
    accent-color: var(--primary-500);
}

.form-input-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
}

.form-input-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-lg);
}

/* -------------------------------- 
   13. Buttons
-------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast) ease;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb), 0.25);
}

.btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-lg);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-color);
}

.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-secondary {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--bg-tertiary);
}

.btn-success {
    color: white;
    background-color: var(--success-500);
    border-color: var(--success-500);
}

.btn-success:hover {
    background-color: var(--success-600);
    border-color: var(--success-600);
}

.btn-danger {
    color: white;
    background-color: var(--danger-500);
    border-color: var(--danger-500);
}

.btn-danger:hover {
    background-color: var(--danger-600);
    border-color: var(--danger-600);
}

.btn-warning {
    color: var(--text-primary);
    background-color: var(--warning-500);
    border-color: var(--warning-500);
}

.btn-warning:hover {
    background-color: var(--warning-600);
    border-color: var(--warning-600);
}

.btn-link {
    color: var(--primary-500);
    background-color: transparent;
    border-color: transparent;
}

.btn-link:hover {
    color: var(--primary-600);
    text-decoration: underline;
}

.btn-outline {
    background-color: transparent;
    border-color: currentColor;
}

.btn-outline.btn-primary {
    color: var(--primary-500);
}

.btn-outline.btn-primary:hover {
    color: white;
    background-color: var(--primary-500);
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.btn-sm {
    width: 2rem;
    height: 2rem;
}

.btn-icon.btn-lg {
    width: 3rem;
    height: 3rem;
}

.btn-group {
    display: inline-flex;
    align-items: center;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.btn-group .btn:not(:first-child) {
    margin-left: -1px;
}

/* -------------------------------- 
   14. Cards & Containers
-------------------------------- */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.card-body {
    flex: 1 1 auto;
    padding: var(--space-4);
}

.card-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-sm {
    max-width: 640px;
}

.container-md {
    max-width: 768px;
}

.container-lg {
    max-width: 1024px;
}

.container-xl {
    max-width: 1280px;
}

.container-full {
    max-width: 100%;
}

/* -------------------------------- 
   15. Component-Specific Styles
-------------------------------- */

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--radius-full);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.badge-primary {
    color: white;
    background-color: var(--primary-500);
}

.badge-success {
    color: white;
    background-color: var(--success-500);
}

.badge-warning {
    color: var(--text-primary);
    background-color: var(--warning-500);
}

.badge-danger {
    color: white;
    background-color: var(--danger-500);
}

.badge-info {
    color: white;
    background-color: var(--info-500);
}

/* Alerts */
.alert {
    position: relative;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.alert-primary {
    color: var(--primary-700);
    background-color: var(--primary-100);
    border-color: var(--primary-200);
}

.alert-success {
    color: var(--success-700);
    background-color: var(--success-100);
    border-color: var(--success-200);
}

.alert-warning {
    color: var(--warning-700);
    background-color: var(--warning-100);
    border-color: var(--warning-200);
}

.alert-danger {
    color: var(--danger-700);
    background-color: var(--danger-100);
    border-color: var(--danger-200);
}

.alert-info {
    color: var(--info-700);
    background-color: var(--info-100);
    border-color: var(--info-200);
}

/* Tabs */
.tabs {
    display: flex;
    flex-direction: column;
}

.tabs-header {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
}

.tab-button {
    padding: var(--space-2) var(--space-4);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
}

.tab-button:hover {
    color: var(--primary-500);
}

.tab-button.active {
    color: var(--primary-500);
    border-bottom-color: var(--primary-500);
}

.tabs-content {
    padding: var(--space-4) 0;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Avatar */
.avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--primary-100);
    color: var(--primary-700);
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: var(--font-size-sm);
}

.avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: var(--font-size-lg);
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------- 
   16. Responsive Breakpoints
   Using mobile-first approach
-------------------------------- */

/* Extra small screens (< 576px): No media query needed (mobile-first) */

/* Small screens (≥ 576px) */
@media (min-width: 576px) {
    .sm\:block {
        display: block;
    }

    .sm\:inline-block {
        display: inline-block;
    }

    .sm\:inline {
        display: inline;
    }

    .sm\:flex {
        display: flex;
    }

    .sm\:hidden {
        display: none;
    }

    .sm\:flex-row {
        flex-direction: row;
    }

    .sm\:flex-col {
        flex-direction: column;
    }

    .sm\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:text-center {
        text-align: center;
    }

    .sm\:text-left {
        text-align: left;
    }

    .sm\:text-right {
        text-align: right;
    }

    /* Add additional responsive classes as needed for this breakpoint */
}

/* Medium screens (≥ 768px) */
@media (min-width: 768px) {
    .md\:block {
        display: block;
    }

    .md\:inline-block {
        display: inline-block;
    }

    .md\:inline {
        display: inline;
    }

    .md\:flex {
        display: flex;
    }

    .md\:hidden {
        display: none;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:flex-col {
        flex-direction: column;
    }

    .md\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .md\:text-center {
        text-align: center;
    }

    .md\:text-left {
        text-align: left;
    }

    .md\:text-right {
        text-align: right;
    }

    /* Add additional responsive classes as needed for this breakpoint */
}

/* Large screens (≥ 992px) */
@media (min-width: 992px) {
    .lg\:block {
        display: block;
    }

    .lg\:inline-block {
        display: inline-block;
    }

    .lg\:inline {
        display: inline;
    }

    .lg\:flex {
        display: flex;
    }

    .lg\:hidden {
        display: none;
    }

    .lg\:flex-row {
        flex-direction: row;
    }

    .lg\:flex-col {
        flex-direction: column;
    }

    .lg\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:text-center {
        text-align: center;
    }

    .lg\:text-left {
        text-align: left;
    }

    .lg\:text-right {
        text-align: right;
    }

    /* Add additional responsive classes as needed for this breakpoint */
}

/* Extra large screens (≥ 1200px) */
@media (min-width: 1200px) {
    .xl\:block {
        display: block;
    }

    .xl\:inline-block {
        display: inline-block;
    }

    .xl\:inline {
        display: inline;
    }

    .xl\:flex {
        display: flex;
    }

    .xl\:hidden {
        display: none;
    }

    .xl\:flex-row {
        flex-direction: row;
    }

    .xl\:flex-col {
        flex-direction: column;
    }

    .xl\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .xl\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .xl\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .xl\:text-center {
        text-align: center;
    }

    .xl\:text-left {
        text-align: left;
    }

    .xl\:text-right {
        text-align: right;
    }

    /* Add additional responsive classes as needed for this breakpoint */
}

/* -------------------------------- 
   17. Accessibility
-------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.focus-visible:focus {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-500);
    color: white;
    padding: var(--space-2) var(--space-4);
    z-index: 9999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* -------------------------------- 
   18. Icon System
-------------------------------- */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-lg {
    width: 2rem;
    height: 2rem;
}

.icon svg {
    width: 100%;
    height: 100%;
}

.icon-primary {
    color: var(--primary-500);
}

.icon-success {
    color: var(--success-500);
}

.icon-warning {
    color: var(--warning-500);
}

.icon-danger {
    color: var(--danger-500);
}

.icon-info {
    color: var(--info-500);
}

/* -------------------------------- 
   19. Animation & Transitions
-------------------------------- */

.transition-all {
    transition-property: all;
    transition-timing-function: var(--easing-default);
    transition-duration: var(--transition-normal);
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--easing-default);
    transition-duration: var(--transition-normal);
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--easing-default);
    transition-duration: var(--transition-normal);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: var(--easing-default);
    transition-duration: var(--transition-normal);
}

.duration-fast {
    transition-duration: var(--transition-fast);
}

.duration-normal {
    transition-duration: var(--transition-normal);
}

.duration-slow {
    transition-duration: var(--transition-slow);
}

.ease-default {
    transition-timing-function: var(--easing-default);
}

.ease-in {
    transition-timing-function: var(--easing-in);
}

.ease-out {
    transition-timing-function: var(--easing-out);
}

.ease-in-out {
    transition-timing-function: var(--easing-in-out);
}

/* -------------------------------- 
   20. Dark Mode Adjustments
-------------------------------- */

:root[data-theme="dark"] .dark\:bg-primary {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .dark\:bg-secondary {
    background-color: var(--bg-secondary);
}

:root[data-theme="dark"] .dark\:text-white {
    color: white;
}

:root[data-theme="dark"] .dark\:text-primary {
    color: var(--text-primary);
}

:root[data-theme="dark"] .dark\:border-dark {
    border-color: var(--border-dark);
}

/* Ensure icons are properly colored in dark mode */
:root[data-theme="dark"] .icon {
    color: var(--text-primary);
}


/* Touch-optimized controls for mobile */
@media (max-width: 768px) {
    .touch-target {
        min-height: 48px;
        min-width: 48px;
    }

    .btn,
    .form-input,
    .form-select,
    .tab-button {
        min-height: 16px;
    }

    .form-checkbox,
    .form-radio {
        transform: scale(1.2);
    }

    select.form-select {
        background-size: 12px;
        padding-right: 36px;
    }
}