:root{
    --accent:#6f7bf7;
    --accent-hover:#7d88ff;
}

/* =========================
   SOMBRE
   ========================= */

html[data-velion-theme="dark"]{
    color-scheme:dark;

    --bg:#0b0d10;
    --panel:#111318;
    --panel2:#171a20;
    --line:#262a32;

    --text:#f3f4f6;
    --muted:#9298a5;

    --accent:#6f7bf7;
    --accent2:#6f7bf7;

    --green:#4fd39a;
    --red:#ef6b78;
}

html[data-velion-theme="dark"] body{
    background:#0b0d10 !important;
    background-image:none !important;
    color:var(--text) !important;
}

html[data-velion-theme="dark"] header{
    background:#0e1014 !important;
    border-color:var(--line) !important;
}

html[data-velion-theme="dark"] .card,
html[data-velion-theme="dark"] .composer{
    background:#111318 !important;
    border-color:var(--line) !important;
    box-shadow:
        0 18px 50px rgba(0,0,0,.22) !important;
}

html[data-velion-theme="dark"] input,
html[data-velion-theme="dark"] textarea,
html[data-velion-theme="dark"] select{
    background:#0d0f13 !important;
    color:#f3f4f6 !important;
    border-color:#2b3039 !important;
}

html[data-velion-theme="dark"] input:focus,
html[data-velion-theme="dark"] textarea:focus,
html[data-velion-theme="dark"] select:focus{
    border-color:#6975e8 !important;
    box-shadow:0 0 0 3px rgba(111,123,247,.12) !important;
}

html[data-velion-theme="dark"] pre{
    background:#08090c !important;
    border-color:#242830 !important;
}

html[data-velion-theme="dark"] .user .bubble{
    background:#1a1d24 !important;
    border-color:#292e38 !important;
}


/* =========================
   CLAIR
   ========================= */

html[data-velion-theme="light"]{
    color-scheme:light;

    --bg:#f5f6f8;
    --panel:#ffffff;
    --panel2:#f0f2f5;
    --line:#dde1e7;

    --text:#17191d;
    --muted:#68707d;

    --accent:#5967e8;
    --accent2:#5967e8;

    --green:#17895e;
    --red:#d54e5c;
}

html[data-velion-theme="light"] body{
    background:#f5f6f8 !important;
    background-image:none !important;
    color:#17191d !important;
}

html[data-velion-theme="light"] header{
    background:rgba(255,255,255,.96) !important;
    border-color:#e1e4e9 !important;
    box-shadow:0 1px 0 rgba(0,0,0,.03) !important;
}

html[data-velion-theme="light"] .card,
html[data-velion-theme="light"] .composer{
    background:#ffffff !important;
    border-color:#dde1e7 !important;
    box-shadow:
        0 14px 45px rgba(25,30,40,.07) !important;
}

html[data-velion-theme="light"] input,
html[data-velion-theme="light"] textarea,
html[data-velion-theme="light"] select{
    background:#f8f9fb !important;
    color:#17191d !important;
    border-color:#d8dde5 !important;
}

html[data-velion-theme="light"] input:focus,
html[data-velion-theme="light"] textarea:focus,
html[data-velion-theme="light"] select:focus{
    border-color:#6673e6 !important;
    box-shadow:0 0 0 3px rgba(89,103,232,.10) !important;
}

html[data-velion-theme="light"] pre{
    background:#f1f3f6 !important;
    color:#17191d !important;
    border-color:#dde1e7 !important;
}

html[data-velion-theme="light"] .user .bubble{
    background:#eceff4 !important;
    color:#17191d !important;
    border-color:#dfe3e9 !important;
}


/* =========================
   BOUTONS
   ========================= */

#submit,
.send,
.generate{
    background:#6673ea !important;
    background-image:none !important;

    color:white !important;

    border:0 !important;

    transition:
        background .15s ease,
        transform .15s ease !important;
}

#submit:hover,
.send:hover,
.generate:hover{
    background:#7580f2 !important;
}

#submit:active,
.send:active,
.generate:active{
    transform:translateY(1px);
}


/* boutons secondaires */

.version,
#vs-settings-button,
#vs-close,
.vs-reset{
    background:var(--panel) !important;
    color:var(--text) !important;
    border:1px solid var(--line) !important;
}

.version.active{
    background:var(--panel2) !important;
    border-color:#6874df !important;
    color:var(--text) !important;
}


/* =========================
   PARAMETRES
   ========================= */

#vs-overlay{
    background:rgba(0,0,0,.46) !important;
    backdrop-filter:blur(4px);
}

#vs-panel{
    background:var(--panel) !important;
    border-color:var(--line) !important;
}

html[data-velion-theme="light"] #vs-panel{
    box-shadow:
        -20px 0 60px rgba(20,30,45,.10) !important;
}

html[data-velion-theme="dark"] #vs-panel{
    box-shadow:
        -20px 0 60px rgba(0,0,0,.35) !important;
}


/* =========================
   TEXTE / LIENS
   ========================= */

a{
    color:var(--accent) !important;
}

h1,
h2,
h3,
h4{
    color:var(--text) !important;
}

.subtitle,
.sub,
.hints,
.status,
.login{
    color:var(--muted) !important;
}


/* =========================
   SUPPRESSION DES ANCIENS
   DEGRADES
   ========================= */

body,
main,
.app,
.hero,
.composer-wrap{
    background-image:none !important;
}

.logo span{
    background:#6673ea !important;
    background-image:none !important;
}