body.theme-aile {
    /* Primary Colors - Limited to 3 main choices */
    --primary-500: #CD853F;
    /* Main brand color - Peru */
    --brand-primary: #CD853F;
    /* Main brand color - Peru */
    --primary-600: #A0522D;
    /* Darker shade for hover/active */
    --brand-secondary: #A0522D;
    /* Darker shade for hover/active */
    --primary-400: #DEB887;
    /* Lighter shade for backgrounds */

    /* Neutral Colors - 5 strategic steps */
    --neutral-100: #FFFFFF;
    /* Pure white */
    --neutral-200: #F5F5F5;
    /* Background */
    --neutral-300: #E0E0E0;
    /* Borders */
    --neutral-400: #757575;
    /* Secondary text */
    --neutral-500: #212121;
    /* Primary text */

    /* Semantic Colors - Only essential feedback colors */
    --success: #2E7D32;
    /* Clear green */
    --error: #C62828;
    /* Clear red */
    --warning: #F9A825;
    /* Clear yellow */

    /* Theme Tokens - Light */
    --light-surface: var(--neutral-100);
    --light-background: var(--neutral-200);
    --light-text: var(--neutral-500);
    --light-text-secondary: var(--neutral-400);
    --light-border: var(--neutral-300);

    /* Theme Tokens - Dark */
    --dark-surface: #2D2016;
    --dark-background: #1A1310;
    --dark-text: #E0E0E0;
    --dark-text-secondary: #BDBDBD;
    --dark-border: #3D3D3D;

    /* Single Gradient */
    --brand-gradient: linear-gradient(135deg, var(--primary-500), var(--primary-600));

    --back-icon-color: var(--primary-500);
}

body.theme-aile {
    /* Primary Colors - Limited to 3 main choices */
    --primary-500: #CD853F;
    /* Main brand color - Peru */
    --brand-primary: #CD853F;
    /* Main brand color - Peru */
    --primary-600: #A0522D;
    /* Darker shade for hover/active */
    --brand-secondary: #A0522D;
    /* Darker shade for hover/active */
    --primary-400: #DEB887;
    /* Lighter shade for backgrounds */

    /* Neutral Colors - 5 strategic steps */
    --neutral-100: #FFFFFF;
    /* Pure white */
    --neutral-200: #F5F5F5;
    /* Background */
    --neutral-300: #E0E0E0;
    /* Borders */
    --neutral-400: #757575;
    /* Secondary text */
    --neutral-500: #212121;
    /* Primary text */

    /* Semantic Colors - Only essential feedback colors */
    --success: #2E7D32;
    /* Clear green */
    --error: #C62828;
    /* Clear red */
    --warning: #F9A825;
    /* Clear yellow */

    /* Theme Tokens - Light */
    --light-surface: var(--neutral-100);
    --light-background: var(--neutral-200);
    --light-text: var(--neutral-500);
    --light-text-secondary: var(--neutral-400);
    --light-border: var(--neutral-300);

    /* Theme Tokens - Dark */
    --dark-surface: #2D2016;
    --dark-background: #1A1310;
    --dark-text: #E0E0E0;
    --dark-text-secondary: #BDBDBD;
    --dark-border: #3D3D3D;

    /* Single Gradient */
    --brand-gradient: linear-gradient(135deg, var(--primary-500), var(--primary-600));

    --back-icon-color: var(--primary-500);
}

body.theme-dark {
    --primary-500: #1C1C1C;
    --brand-primary: #1C1C1C;
    /* Antrasit */
    --primary-600: #0F0F0F;
    --brand-secondary: #0F0F0F;
    /* Daha koyu */
    --primary-400: #2D2D2D;
    /* Daha açık */

    --neutral-100: #121212;
    --neutral-200: #1E1E1E;
    --neutral-300: #333333;
    --neutral-400: #888888;
    --neutral-500: #E0E0E0;

    --success: #4CAF50;
    --error: #FF5252;
    --warning: #FFC107;

    --light-surface: var(--neutral-100);
    --light-background: var(--neutral-200);
    --light-text: var(--neutral-500);
    --light-text-secondary: var(--neutral-400);
    --light-border: var(--neutral-300);

    --brand-gradient: linear-gradient(135deg, #1C1C1C, #0F0F0F);

    --button-bg: #1C1C1C;
    --button-bg-hover: #0F0F0F;
    --button-bg-active: #2D2D2D;
    --button-text: #FFFFFF;
    --button-text-hover: #FFFFFF;
    --button-text-active: #FFFFFF;
    --button-border: #1C1C1C;
    --button-border-hover: #0F0F0F;
    --button-border-active: #2D2D2D;
    --button-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    --back-icon-color: var(--primary-500);
}


body.theme-rose {
    --primary-500: #E91E63;
    --brand-primary: #E91E63;

    /* Pembe - Fuşya */
    --primary-600: #AD1457;
    --brand-secondary: #AD1457;
    /* Daha koyu ton */
    --primary-400: #F48FB1;
    /* Açık ton */

    --neutral-100: #FFF0F5;
    --neutral-200: #FCE4EC;
    --neutral-300: #F8BBD0;
    --neutral-400: #8C4351;
    --neutral-500: #4A0E23;

    --success: #66BB6A;
    --error: #D32F2F;
    --warning: #FBC02D;

    --light-surface: var(--neutral-100);
    --light-background: var(--neutral-200);
    --light-text: var(--neutral-500);
    --light-text-secondary: var(--neutral-400);
    --light-border: var(--neutral-300);

    --brand-gradient: linear-gradient(135deg, #E91E63, #AD1457);

    --button-bg: #E91E63;
    --button-bg-hover: #AD1457;
    --button-bg-active: #F48FB1;
    --button-text: #FFFFFF;
    --button-text-hover: #FFFFFF;
    --button-text-active: #FFFFFF;
    --button-border: #E91E63;
    --button-border-hover: #AD1457;
    --button-border-active: #F48FB1;
    --button-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    --back-icon-color: var(--primary-500);

}

body.theme-mint {
    --primary-500: #3EB489;
    --brand-primary: #3EB489;
    /* Mint Yeşili */
    --primary-600: #2C8C6B;
    --brand-secondary: #2C8C6B;

    /* Daha koyu mint */
    --primary-400: #A8E6CF;
    /* Açık mint */

    --neutral-100: #F0FFFA;
    --neutral-200: #E0F7F1;
    --neutral-300: #C1EDEA;
    --neutral-400: #5E9381;
    --neutral-500: #2F4F4F;

    --success: #43A047;
    --error: #D84315;
    --warning: #FFB300;

    --light-surface: var(--neutral-100);
    --light-background: var(--neutral-200);
    --light-text: var(--neutral-500);
    --light-text-secondary: var(--neutral-400);
    --light-border: var(--neutral-300);

    --brand-gradient: linear-gradient(135deg, #3EB489, #2C8C6B);

    --button-bg: #3EB489;
    --button-bg-hover: #2C8C6B;
    --button-bg-active: #A8E6CF;
    --button-text: #FFFFFF;
    --button-text-hover: #FFFFFF;
    --button-text-active: #FFFFFF;
    --button-border: #3EB489;
    --button-border-hover: #2C8C6B;
    --button-border-active: #A8E6CF;
    --button-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    --back-icon-color: var(--primary-500);
    
}