/* assets/css/colors.css */

/* Light Theme - Default */
:root {
    /* Primary Colors */
    --primary: #9112ED;
    --on-primary: #F6ECFE;
    --primary-container: #E9D0FB;
    --on-primary-container: #1D042F;
    --inverse-primary: #D3A0F8;
    --inverse-on-primary: #3A075F;

    /* Secondary Colors */
    --secondary: #8659A6;
    --on-secondary: #F5F2F8;
    --secondary-container: #E7DEED;
    --on-secondary-container: #1B1221;
    --inverse-secondary: #CFBDDB;
    --inverse-on-secondary: #362442;

    /* Neutral - Surface Colors */
    --surface: #FDFCFD;
    --surface-muted: #E1DBE5;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #FAF9FB;
    --surface-container: #F5F3F6;
    --surface-container-high: #F0EDF2;
    --surface-container-highest: #EBE7EE;

    /* On Surface Colors */
    --on-surface: #1A151E;
    --on-surface-variant: #4E4059;
    --on-surface-disable: #C3B8CC;

    /* Outline Colors */
    --outline: #826B94;
    --outline-variant: #CDC4D4;

    /* State Colors */
    --disable: #E6E1EA;
    --on-disable: #B9ACC3;
    --enable: #6D5A7C;
    --on-enable: #F5F3F6;

    /* Inverse Colors */
    --inverse-surface: #030203;
    --inverse-on-surface: #FDFCFD;

    /* SVG renk filtresi */
    --primary-filter: invert(15%) sepia(92%) saturate(4323%) hue-rotate(275deg) brightness(94%) contrast(105%);
}

/* Dark Theme */
[data-theme="dark"] {
    /* Primary Colors */
    --primary: #D3A0F8;
    --on-primary: #3A075F;
    --primary-container: #570B8E;
    --on-primary-container: #EDD9FC;
    --inverse-primary: #9112ED;
    --inverse-on-primary: #F6ECFE;

    /* Secondary Colors */
    --secondary: #CFBDDB;
    --on-secondary: #362442;
    --secondary-container: #513663;
    --on-secondary-container: #ECE4F1;
    --inverse-secondary: #8659A6;
    --inverse-on-secondary: #F5F2F8;

    /* Neutral - Surface Colors */
    --surface: #0A090C;
    --surface-muted: #3F3347;
    --surface-container-lowest: #000000;
    --surface-container-low: #100D12;
    --surface-container: #151118;
    --surface-container-high: #1A151E;
    --surface-container-highest: #1F1A24;

    /* On Surface Colors */
    --on-surface: #E6E1EA;
    --on-surface-variant: #B4A6BF;
    --on-surface-disable: #3F3347;

    /* Outline Colors */
    --outline: #9B89A9;
    --outline-variant: #4E4059;

    /* State Colors */
    --disable: #151118;
    --on-disable: #493C53;
    --enable: #E1DBE5;
    --on-enable: #3F3347;

    /* Inverse Colors */
    --inverse-surface: #E6E1EA;
    --inverse-on-surface: #3F3347;

    /* SVG renk filtresi */
    --primary-filter: invert(79%) sepia(45%) saturate(592%) hue-rotate(219deg) brightness(103%) contrast(96%);
    
}

/* Utility Classes for Colors */
.bg-primary { background-color: var(--primary); }
.text-primary { color: var(--primary); }
.bg-primary-container { background-color: var(--primary-container); }
.text-on-primary { color: var(--on-primary); }
.text-on-primary-container { color: var(--on-primary-container); }

.bg-secondary { background-color: var(--secondary); }
.text-secondary { color: var(--secondary); }
.bg-secondary-container { background-color: var(--secondary-container); }
.text-on-secondary { color: var(--on-secondary); }
.text-on-secondary-container { color: var(--on-secondary-container); }

.bg-surface { background-color: var(--surface); }
.bg-surface-muted { background-color: var(--surface-muted); }
.bg-surface-container { background-color: var(--surface-container); }
.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }

.outline { border-color: var(--outline); }
.outline-variant { border-color: var(--outline-variant); }

.state-disable { background-color: var(--disable); color: var(--on-disable); }
.state-enable { background-color: var(--enable); color: var(--on-enable); }


/* Dark Theme */
[data-theme="dark"] {
    /* Modal Close Button Dark Theme Fix */
    .modal-header .btn-close {
        filter: invert(1);
    }
    .modal-text { 
        color: var(--on-surface);
    }
}