/* Base styles for auth app */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Backgrounds - Premium Light Theme */
    --bg-color: #F8F9FA;
    --bg-gradient-start: #F0F4FF;
    --bg-gradient-end: #FAFBFF;
    --card-bg: #FFFFFF;
    
    /* Borders */
    --border-color: rgba(28, 23, 67, 0.08);
    --border-hover: rgba(87, 98, 223, 0.3);
    
    /* Text - Brandbook Colors */
    --text-primary: #1C1743;
    --text-secondary: #4A4E51;
    --text-tertiary: #8B8E91;
    
    /* Accent - Brandbook Colors */
    --primary-color: #5762DF;
    --primary-hover: #4550CC;
    --primary-active: #3A42B8;
    --primary-text: #FFFFFF;
    --primary-light: rgba(87, 98, 223, 0.08);
    
    /* Shadows - Premium multi-layered */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(87, 98, 223, 0.15);
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', sans-serif;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}