/* Color Variables */
:root {
    /* Color Palette */
    /* Grey (0-900) */
    --grey-0: #ffffff;
    --grey-50: #F6F6F7;
    --grey-100: #E7E9EB;
    --grey-200: #D2D4D9;
    --grey-300: #B5B9C1;
    --grey-400: #959AA4;
    --grey-500: #767C88;
    --grey-600: #5C6370;
    --grey-700: #464C5A;
    --grey-800: #303745;
    --grey-900: #1C2331;
    
    /* Blue (50-900) */
    --blue-50: #F0F7FF;
    --blue-100: #D0E6FF;
    --blue-200: #A3CEFF;
    --blue-300: #72AFFB;
    --blue-400: #4F95ED;
    --blue-500: #377FD9;
    --blue-600: #2A6FC0;
    --blue-700: #1F5FA5;
    --blue-800: #0D4F8C;
    --blue-900: #0D3D6B;
    
    /* Teal (50-900) */
    --teal-50: #E0FFFC;
    --teal-100: #C1FBF6;
    --teal-200: #9BF3EB;
    --teal-300: #74E7DD;
    --teal-400: #4DD7CC;
    --teal-500: #27C3B7;
    --teal-600: #00AA9E;
    --teal-700: #00857B;
    --teal-800: #00635A;
    --teal-900: #00413B;
    
    /* Orange (50-900) */
    --orange-50: #FFF6E3;
    --orange-100: #FFE5B2;
    --orange-200: #FFD07A;
    --orange-300: #FFB747;
    --orange-400: #FA9C26;
    --orange-500: #E2850F;
    --orange-600: #C66D00;
    --orange-700: #A95600;
    --orange-800: #8D3F00;
    --orange-900: #702C00;
    
    /* Red (50-900) */
    --red-50: #FFEDED;
    --red-100: #FFD9D9;
    --red-200: #FFC1C1;
    --red-300: #FF9EA0;
    --red-400: #FF7983;
    --red-500: #FF4958;
    --red-600: #E12A39;
    --red-700: #D21020;
    --red-800: #AF000C;
    --red-900: #870000;
    
    /* App Theme Colors */
    --primary-color: var(--teal-500);
    --primary-light: var(--teal-300);
    --primary-dark: var(--teal-700);
    --secondary-color: var(--blue-500);
    --active-color: var(--blue-400);
    --accent-color: var(--orange-500);
    --error-color: var(--red-500);
    
    /* Dark Theme Colors */
    --bg-light: var(--grey-900);
    --bg-panel: var(--grey-800);
    --bg-chat: var(--grey-900);
    --bg-message-sent: var(--grey-800);
    --bg-message-received: var(--grey-800);
    --text-primary: var(--grey-50);
    --text-secondary: var(--grey-400);
    --text-muted: var(--grey-300);
    --border-light: var(--grey-600);
    
    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.4);
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 48px;
    --space-3xl: 80px;
    --space-input: 12px;

    /* Font Sizes */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 20px;
    --font-xl: 24px;
    
    /* Font Families */
    --font-heading: 'Gabarito', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-circle: 50%;
    
    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    
    /* Layout */
    --sidebar-width: 260px;
    --avatar-size-sm: 24px;
    --avatar-size-md: 36px;
    --message-max-width: 100%;
    
    /* Gradient Colors */
    --gradient-primary: linear-gradient(135deg, var(--blue-800) 0%, var(--teal-700) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--orange-400) 0%, var(--orange-200) 100%);
    
    /* Typography System */
    /* Typography - Heading Styles */
    --heading-900: 700 36px/134% var(--font-heading);
    --heading-800: 700 32px/134% var(--font-heading);
    --heading-700: 700 24px/134% var(--font-heading);
    --heading-600: 600 20px/140% var(--font-heading);
    --heading-500: 600 18px/140% var(--font-heading);
    --heading-400: 500 16px/140% var(--font-heading);
    --heading-300: 500 14px/140% var(--font-heading);
    --heading-200: 500 12px/140% var(--font-heading);
    --heading-100: 600 10px/140% var(--font-heading);
    
    /* Typography - Body Styles */
    --body-xs: 400 12px/150% var(--font-body);
    --body-sm: 400 14px/150% var(--font-body);
    --body-md: 400 16px/150% var(--font-body);
    --body-lg: 400 18px/150% var(--font-body);
    
    /* Letter spacing for headings */
--letter-spacing-heading: 0.03em; /* 3% letter spacing */
    
    /* Button typography */
    --button-md: 600 16px/1.4 'Open Sans', sans-serif;
    --button-sm: 600 14px/1.4 'Open Sans', sans-serif;
    --button-xs: 600 12px/1.4 'Open Sans', sans-serif;
}

/* Sentence Case Utility */
.sentence-case {
    text-transform: lowercase;
}

.sentence-case::first-letter {
    text-transform: uppercase;
}

/* Typography */
body {
    font-family: var(--font-body);
    color: var(--text-primary);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    font-family: var(--font-heading);
}

/* Utility Classes */
/* Text Colors */
.text-primary {
    color: var(--primary-color);
}

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

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

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

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

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

.text-teal-600 {
    color: var(--teal-600);
}

/* Background Colors */
.bg-primary {
    background-color: var(--primary-color);
}

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

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

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

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

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

/* Rest of utility classes remain unchanged */
.text-center {
    text-align: center;
}

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

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

.flex {
    display: flex;
}

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

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

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

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

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

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.hidden {
    display: none;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.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-full {
    border-radius: var(--radius-circle);
}

/* Typography Utility Classes */
.heading-900, .heading-800, .heading-700, .heading-600, .heading-500, 
.heading-400, .heading-300, .heading-200, .heading-100 {
    letter-spacing: var(--letter-spacing-heading);
}

.heading-900 {
    font: var(--heading-900);
}

.heading-800 {
    font: var(--heading-800);
}

.heading-700 {
    font: var(--heading-700);
}

.heading-600 {
    font: var(--heading-600);
}

.heading-500 {
    font: var(--heading-500);
}

.heading-400 {
    font: var(--heading-400);
}

.heading-300 {
    font: var(--heading-300);
}

.heading-200 {
    font: var(--heading-200);
}

.heading-100 {
    font: var(--heading-100);
}

.body-xs {
    font: var(--body-xs);
}

.body-sm {
    font: var(--body-sm);
}

.body-md {
    font: var(--body-md);
}

.body-lg {
    font: var(--body-lg);
}