/* Account theme variables - SCOPED to .account-layout only
   This prevents these variables from affecting the Shop-Header, Footer, etc.
   Uses shop design tokens (--ameyze-*) as base values */

.account-body .account-layout {
    --primary-color: var(--ameyze-primary);
    --primary-dark: #5a3640;
    --secondary-color: var(--ameyze-secondary);
    --secondary-dark: #c2929e;
    --background-color: var(--ameyze-bg-white);
    --background-light: var(--ameyze-bg-light);
    --text-color: var(--ameyze-text-dark);
    --light-text: #84606b;
    --muted-text: #a27d87;
    --border-color: rgba(47, 27, 37, 0.12);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(127, 77, 90, 0.12);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}

@supports (color: color-mix(in srgb, black, white)) {
    .account-body .account-layout {
        --primary-dark: color-mix(in srgb, var(--primary-color) 85%, black);
        --secondary-dark: color-mix(in srgb, var(--secondary-color) 80%, black);
        --light-text: color-mix(in srgb, var(--text-color) 65%, white);
        --muted-text: color-mix(in srgb, var(--text-color) 35%, white);
    }
}