/* Design tokens for AIMduka */
:root {
    /* Brand palette */
    --primary-50: #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
    --primary-950: #082f49;

    --secondary-50: #ecfdf5;
    --secondary-100: #d1fae5;
    --secondary-200: #a7f3d0;
    --secondary-300: #6ee7b7;
    --secondary-400: #34d399;
    --secondary-500: #10b981;
    --secondary-600: #059669;
    --secondary-700: #047857;
    --secondary-800: #065f46;
    --secondary-900: #064e3b;
    --secondary-950: #022c22;

    --tertiary-50: #f5f3ff;
    --tertiary-100: #ede9fe;
    --tertiary-200: #ddd6fe;
    --tertiary-300: #c4b5fd;
    --tertiary-400: #a78bfa;
    --tertiary-500: #8b5cf6;
    --tertiary-600: #7c3aed;
    --tertiary-700: #6d28d9;
    --tertiary-800: #5b21b6;
    --tertiary-900: #4c1d95;
    --tertiary-950: #2e1065;

    /* Neutral palette */
    --black: #000000;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    /* Status palette */
    --success: var(--secondary-600);
    --success-dark: var(--secondary-700);
    --success-light: var(--secondary-100);
    --success-bg: var(--secondary-50);
    --success-bg-strong: var(--secondary-100);
    --warning: #d97706;
    --warning-dark: #b45309;
    --warning-light: #fef3c7;
    --warning-bg: #fffbeb;
    --warning-bg-strong: var(--warning-light);
    --danger: #b91c1c;
    --danger-dark: #991b1b;
    --danger-light: #fee2e2;
    --danger-bg: #fef2f2;
    --danger-bg-strong: var(--danger-light);
    --info: #0891b2;
    --info-light: #cffafe;
    --info-bg: #ecfeff;
    --info-bg-strong: var(--info-light);

    /* Brand aliases */
    --primary: var(--primary-700);
    --primary-dark: var(--primary-800);
    --primary-deep: var(--primary-950);
    --primary-light: var(--primary-100);
    --primary-soft: var(--primary-50);
    --primary-bg: var(--primary-50);
    --primary-bg-strong: var(--primary-100);
    --secondary: var(--secondary-500);
    --secondary-dark: var(--secondary-600);
    --secondary-light: var(--secondary-100);
    --tertiary: var(--tertiary-500);
    --tertiary-dark: var(--tertiary-700);
    --tertiary-light: var(--tertiary-100);
    --tertiary-soft: var(--tertiary-50);
    --accent: var(--tertiary);

    /* Surfaces and text */
    --white-90: color-mix(in srgb, var(--white) 90%, transparent);
    --white-80: color-mix(in srgb, var(--white) 80%, transparent);
    --dark: var(--gray-900);
    --light: var(--gray-50);
    --bg: var(--gray-50);
    --bg-color: var(--gray-50);
    --bg-light: var(--gray-50);
    --bg-secondary: var(--gray-100);
    --bg-tertiary: var(--gray-200);
    --bg-card: var(--white);
    --card-bg: var(--white);
    --header-bg: var(--primary);
    --card-border: var(--gray-200);
    --border: var(--gray-200);
    --border-color: var(--gray-200);
    --border-strong: var(--gray-300);
    --border-focus: var(--primary);
    --text: var(--gray-800);
    --text-light: var(--gray-500);
    --text-lighter: var(--gray-400);
    --text-inverse: var(--white);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-500);
    --text-muted: var(--gray-500);

    /* Brand intent */
    --brand-nav-bg: var(--primary-800);
    --brand-cta-bg: var(--primary-700);
    --brand-cta-hover: var(--primary-800);
    --brand-accent-bg: var(--tertiary-600);
    --brand-accent-hover: var(--tertiary-700);
    --brand-secondary-bg: var(--secondary-600);
    --brand-secondary-hover: var(--secondary-700);
    --buy-color: var(--success);
    --sell-color: var(--danger);
    --primary-gradient: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);
    --surface-page: var(--light);
    --surface-card: var(--white);
    --surface-raised: var(--white);
    --surface-muted: var(--gray-50);
    --surface-primary-soft: color-mix(in srgb, var(--primary) 12%, transparent);
    --surface-success-soft: color-mix(in srgb, var(--success) 12%, transparent);
    --surface-warning-soft: color-mix(in srgb, var(--warning) 12%, transparent);
    --surface-danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
    --surface-info-soft: color-mix(in srgb, var(--info) 12%, transparent);
    --surface-border-soft: color-mix(in srgb, var(--gray-400) 18%, transparent);
    --border-color-strong: var(--gray-300);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary-dark) 12%, transparent);

    /* Legacy compatibility aliases */
    --accent-color: var(--brand-cta-bg);
    --primary-color: var(--brand-cta-bg);
    --primary-hover: var(--brand-cta-hover);
    --secondary-color: var(--secondary);
    --success-color: var(--success);
    --warning-color: var(--warning);
    --danger-color: var(--danger);
    --info-color: var(--info);
    --danger-soft: var(--danger-bg);
    --success-soft: var(--success-bg);
    --warning-soft: var(--warning-bg);

    /* Layout */
    --border-radius: 0.75rem;
    --border-radius-sm: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-pill: 999px;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --card-border-radius: var(--radius-2xl);
    --input-border-radius: var(--radius-lg);
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    --space-6xl: 10rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --auth-panel-max-width: 34rem;
    --auth-icon-size-md: 4.375rem;
    --auth-icon-size-lg: 5rem;

    /* Effects */
    --shadow-sm: 0 1px 3px color-mix(in srgb, var(--black) 7%, transparent);
    --shadow: 0 4px 6px -1px color-mix(in srgb, var(--black) 8%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--black) 5%, transparent);
    --shadow-md: 0 10px 15px -3px color-mix(in srgb, var(--black) 8%, transparent), 0 4px 6px -2px color-mix(in srgb, var(--black) 4%, transparent);
    --shadow-lg: 0 20px 25px -5px color-mix(in srgb, var(--black) 8%, transparent), 0 10px 10px -5px color-mix(in srgb, var(--black) 3%, transparent);
    --shadow-xl: 0 25px 30px -8px color-mix(in srgb, var(--black) 10%, transparent);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
    --shadow-primary: 0 12px 30px color-mix(in srgb, var(--primary) 18%, transparent);
    --card-shadow: var(--shadow-md);
    --card-hover-shadow: var(--shadow-lg);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* 
		Bootstrap palette override: make:
		bg-*
		text-*
		border-*
		alert-*
		utility
		classes render our brand palette instead of Bootstrap's defaults.
	*/
    --bs-primary: var(--primary);
    --bs-primary-rgb: 3, 105, 161;
    --bs-secondary: var(--gray-600);
    --bs-secondary-rgb: 71, 85, 105;
    --bs-success: var(--success);
    --bs-success-rgb: 5, 150, 105;
    --bs-danger: var(--danger);
    --bs-danger-rgb: 185, 28, 28;
    --bs-warning: var(--warning);
    --bs-warning-rgb: 217, 119, 6;
    --bs-info: var(--info);
    --bs-info-rgb: 8, 145, 178;

    --bs-primary-text-emphasis: var(--primary-dark);
    --bs-secondary-text-emphasis: var(--gray-700);
    --bs-success-text-emphasis: var(--success-dark);
    --bs-danger-text-emphasis: var(--danger-dark);
    --bs-warning-text-emphasis: var(--warning-dark);
    --bs-info-text-emphasis: var(--info);

    --bs-primary-bg-subtle: var(--primary-bg);
    --bs-secondary-bg-subtle: var(--gray-100);
    --bs-success-bg-subtle: var(--success-bg);
    --bs-danger-bg-subtle: var(--danger-bg);
    --bs-warning-bg-subtle: var(--warning-bg);
    --bs-info-bg-subtle: var(--info-bg);

    --bs-primary-border-subtle: var(--primary-light);
    --bs-secondary-border-subtle: var(--gray-300);
    --bs-success-border-subtle: var(--success-light);
    --bs-danger-border-subtle: var(--danger-light);
    --bs-warning-border-subtle: var(--warning-light);
    --bs-info-border-subtle: var(--info-light);
}

/* Bootstrap's .btn-* classes hardcode their own colors locally per rule
   and don't read the root --bs-* variables above, so they need their own
   overrides to match the brand palette. */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-secondary {
    --bs-btn-bg: var(--gray-600);
    --bs-btn-border-color: var(--gray-600);
    --bs-btn-hover-bg: var(--gray-700);
    --bs-btn-hover-border-color: var(--gray-700);
    --bs-btn-active-bg: var(--gray-700);
    --bs-btn-active-border-color: var(--gray-700);
    --bs-btn-disabled-bg: var(--gray-600);
    --bs-btn-disabled-border-color: var(--gray-600);
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: var(--success-dark);
    --bs-btn-hover-border-color: var(--success-dark);
    --bs-btn-active-bg: var(--success-dark);
    --bs-btn-active-border-color: var(--success-dark);
    --bs-btn-disabled-bg: var(--success);
    --bs-btn-disabled-border-color: var(--success);
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-dark);
    --bs-btn-hover-border-color: var(--danger-dark);
    --bs-btn-active-bg: var(--danger-dark);
    --bs-btn-active-border-color: var(--danger-dark);
    --bs-btn-disabled-bg: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
}

.btn-warning {
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-color: var(--white);
    --bs-btn-hover-bg: var(--warning-dark);
    --bs-btn-hover-border-color: var(--warning-dark);
    --bs-btn-hover-color: var(--white);
    --bs-btn-active-bg: var(--warning-dark);
    --bs-btn-active-border-color: var(--warning-dark);
    --bs-btn-active-color: var(--white);
    --bs-btn-disabled-bg: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
    --bs-btn-disabled-color: var(--white);
}

.btn-info {
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-color: var(--white);
    --bs-btn-hover-bg: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-hover-color: var(--white);
    --bs-btn-active-bg: var(--info);
    --bs-btn-active-border-color: var(--info);
    --bs-btn-active-color: var(--white);
    --bs-btn-disabled-bg: var(--info);
    --bs-btn-disabled-border-color: var(--info);
    --bs-btn-disabled-color: var(--white);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--gray-600);
    --bs-btn-border-color: var(--gray-600);
    --bs-btn-hover-bg: var(--gray-600);
    --bs-btn-hover-border-color: var(--gray-600);
    --bs-btn-active-bg: var(--gray-600);
    --bs-btn-active-border-color: var(--gray-600);
    --bs-btn-disabled-color: var(--gray-600);
    --bs-btn-disabled-border-color: var(--gray-600);
}

.btn-outline-success {
    --bs-btn-color: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
    --bs-btn-disabled-color: var(--success);
    --bs-btn-disabled-border-color: var(--success);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-disabled-color: var(--danger);
    --bs-btn-disabled-border-color: var(--danger);
}

.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-disabled-color: var(--warning);
    --bs-btn-disabled-border-color: var(--warning);
}

.btn-outline-info {
    --bs-btn-color: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-bg: var(--info);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-active-bg: var(--info);
    --bs-btn-active-border-color: var(--info);
    --bs-btn-disabled-color: var(--info);
    --bs-btn-disabled-border-color: var(--info);
}