/**
 * DESIGN TOKENS - Shared across Web & Mobile
 * 
 * These CSS custom properties define the visual language.
 * Both platforms import this file for consistent styling.
 */

:root {
    /* Colors - Core */
    --color-bg: #FAF9F7;
    --color-card: #FFFFFF;
    --color-text: #1A1A1A;
    --color-text-secondary: #6B6B6B;
    --color-text-tertiary: #9B9B9B;
    --color-border: #E8E6E3;
    --color-accent: #1A1A1A;
    --color-hover: #F5F4F2;
    
    /* Colors - Semantic */
    --color-danger: #DC3545;
    --color-success: #4CAF50;
    --color-warning: #FF9800;
    --color-important: #4CAF50;
    --color-feed: #FF9800;
    --color-spam: #F44336;
    
    /* Avatar Colors */
    --avatar-blue-bg: #E3F2FD;
    --avatar-blue-fg: #1976D2;
    --avatar-green-bg: #E8F5E9;
    --avatar-green-fg: #388E3C;
    --avatar-orange-bg: #FFF3E0;
    --avatar-orange-fg: #F57C00;
    --avatar-purple-bg: #F3E5F5;
    --avatar-purple-fg: #7B1FA2;
    --avatar-red-bg: #FFEBEE;
    --avatar-red-fg: #D32F2F;
    --avatar-teal-bg: #E0F2F1;
    --avatar-teal-fg: #00796B;
    --avatar-gray-bg: #ECEFF1;
    --avatar-gray-fg: #546E7A;
    --avatar-pink-bg: #FCE4EC;
    --avatar-pink-fg: #C2185B;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    --space-5xl: 48px;
    --space-6xl: 56px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 50%;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Z-index layers */
    --z-base: 1;
    --z-hint: 5;
    --z-card: 10;
    --z-header: 50;
    --z-modal: 100;
    --z-toast: 200;
    
    /* Component-specific */
    --sidebar-width: 240px;
    --mobile-header-height: 56px;
    --mobile-nav-height: 64px;
    --banner-height: 40px;
    --avatar-size: 40px;
    --avatar-size-lg: 56px;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Shared Avatar Styles */
.avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}
.avatar.large { 
    width: var(--avatar-size-lg); 
    height: var(--avatar-size-lg); 
    font-size: var(--font-size-xl); 
}

.avatar-blue { background: var(--avatar-blue-bg); color: var(--avatar-blue-fg); }
.avatar-green { background: var(--avatar-green-bg); color: var(--avatar-green-fg); }
.avatar-orange { background: var(--avatar-orange-bg); color: var(--avatar-orange-fg); }
.avatar-purple { background: var(--avatar-purple-bg); color: var(--avatar-purple-fg); }
.avatar-red { background: var(--avatar-red-bg); color: var(--avatar-red-fg); }
.avatar-teal { background: var(--avatar-teal-bg); color: var(--avatar-teal-fg); }
.avatar-gray { background: var(--avatar-gray-bg); color: var(--avatar-gray-fg); }
.avatar-pink { background: var(--avatar-pink-bg); color: var(--avatar-pink-fg); }