/* 
 * Custom Branding Stylesheet
 * Modify these variables to match your brand
 */

:root {
    /* Primary Brand Colors */
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    
    /* Alternative Color Schemes (uncomment to use) */
    
    /* Blue Theme */
    /* --primary-color: #4facfe;
    --secondary-color: #00f2fe; */
    
    /* Green Theme */
    /* --primary-color: #43e97b;
    --secondary-color: #38f9d7; */
    
    /* Orange Theme */
    /* --primary-color: #fa709a;
    --secondary-color: #fee140; */
    
    /* Dark Theme */
    /* --primary-color: #232526;
    --secondary-color: #414345; */
    
    /* Red Theme */
    /* --primary-color: #eb3349;
    --secondary-color: #f45c43; */
    
    /* Teal Theme */
    /* --primary-color: #11998e;
    --secondary-color: #38ef7d; */
    
    /* Text Colors */
    --text-dark: #333333;
    --text-light: #666666;
    --text-white: #ffffff;
    
    /* Border & Background */
    --border-color: #e0e0e0;
    --input-focus-shadow: rgba(102, 126, 234, 0.1);
}

/* Apply brand colors */
body {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.login-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.logo {
    color: var(--primary-color);
}

.login-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.footer a {
    color: var(--primary-color);
}

/* Logo customization */
.logo img {
    /* Adjust padding based on your logo */
    padding: 10px;
}

/* If using a square logo */
.logo.square {
    border-radius: 16px;
}

/* If using a full-width logo */
.logo.wide {
    width: 120px;
    border-radius: 12px;
}

/* Dark logo background */
.logo.dark-bg {
    background: var(--primary-color);
}

.logo.dark-bg .logo-text {
    color: white;
}

.brand img {
  content: url("https://docs.emgage.work/img/favicon.ico");
  height: 32px;
}