@import "tailwindcss";

/* ── OS preference defaults (explicit data-theme overrides via cascade) ────── */

@media (prefers-color-scheme: dark) {
    :root {
        --color-black:        #181819;
        --color-bg-dim:       #222327;
        --color-bg0:          #2c2e34;
        --color-bg1:          #33353f;
        --color-bg2:          #363944;
        --color-bg3:          #3b3e48;
        --color-bg4:          #414550;
        --color-bg-red:       #55393d;
        --color-bg-yellow:    #4e432f;
        --color-bg-green:     #394634;
        --color-bg-blue:      #354157;
        --color-bg-purple:    #434055;
        --color-filled-red:   #ff6077;
        --color-filled-green: #a7df78;
        --color-filled-blue:  #85d3f2;
        --color-fg:           #e2e2e3;
        --color-grey:         #7f8490;
        --color-grey-dim:     #595f6f;
        --color-red:          #fc5d7c;
        --color-orange:       #f39660;
        --color-yellow:       #e7c664;
        --color-green:        #9ed072;
        --color-mint:         #89d0c8;
        --color-teal:         #5bbac4;
        --color-cyan:         #7fd4e8;
        --color-blue:         #76cce0;
        --color-indigo:       #8490d4;
        --color-purple:       #b39df3;
        --color-pink:         #f07898;
        --color-brown:        #c49a70;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --color-black:        #c8c8c8;
        --color-bg-dim:       #f0f0f0;
        --color-bg0:          #f8f8f8;
        --color-bg1:          #ededed;
        --color-bg2:          #e6e6e6;
        --color-bg3:          #dedede;
        --color-bg4:          #d2d2d2;
        --color-bg-red:       #ffe0e5;
        --color-bg-yellow:    #fff5cc;
        --color-bg-green:     #dff5cc;
        --color-bg-blue:      #d0e8f5;
        --color-bg-purple:    #e8d5f5;
        --color-filled-red:   #ff3355;
        --color-filled-green: #55bb33;
        --color-filled-blue:  #2299cc;
        --color-fg:           #111111;
        --color-grey:         #777777;
        --color-grey-dim:     #aaaaaa;
        --color-red:          #ff0033;
        --color-orange:       #e05500;
        --color-yellow:       #cc9900;
        --color-green:        #339911;
        --color-mint:         #11aa88;
        --color-teal:         #1199bb;
        --color-cyan:         #11aacc;
        --color-blue:         #1177bb;
        --color-indigo:       #4455bb;
        --color-purple:       #6622aa;
        --color-pink:         #cc3377;
        --color-brown:        #885533;
    }
}

/* ── Palette variable names mirror the C++ palette struct ─────────────────── */

[data-theme="sonokai-default"] {
    --color-black:        #181819;
    --color-bg-dim:       #222327;
    --color-bg0:          #2c2e34;
    --color-bg1:          #33353f;
    --color-bg2:          #363944;
    --color-bg3:          #3b3e48;
    --color-bg4:          #414550;
    --color-bg-red:       #55393d;
    --color-bg-yellow:    #4e432f;
    --color-bg-green:     #394634;
    --color-bg-blue:      #354157;
    --color-bg-purple:    #434055;
    --color-filled-red:   #ff6077;
    --color-filled-green: #a7df78;
    --color-filled-blue:  #85d3f2;
    --color-fg:           #e2e2e3;
    --color-grey:         #7f8490;
    --color-grey-dim:     #595f6f;
    --color-red:          #fc5d7c;
    --color-orange:       #f39660;
    --color-yellow:       #e7c664;
    --color-green:        #9ed072;
    --color-mint:         #89d0c8;
    --color-teal:         #5bbac4;
    --color-cyan:         #7fd4e8;
    --color-blue:         #76cce0;
    --color-indigo:       #8490d4;
    --color-purple:       #b39df3;
    --color-pink:         #f07898;
    --color-brown:        #c49a70;
}

[data-theme="sonokai-shusia"] {
    --color-black:        #1a181a;
    --color-bg-dim:       #211f21;
    --color-bg0:          #2d2a2e;
    --color-bg1:          #37343a;
    --color-bg2:          #3b383e;
    --color-bg3:          #423f46;
    --color-bg4:          #49464e;
    --color-bg-red:       #55393d;
    --color-bg-yellow:    #4e432f;
    --color-bg-green:     #394634;
    --color-bg-blue:      #354157;
    --color-bg-purple:    #433d51;
    --color-filled-red:   #ff6188;
    --color-filled-green: #a9dc76;
    --color-filled-blue:  #78dce8;
    --color-fg:           #e3e1e4;
    --color-grey:         #848089;
    --color-grey-dim:     #605d68;
    --color-red:          #f85e84;
    --color-orange:       #ef9062;
    --color-yellow:       #e5c463;
    --color-green:        #9ecd6f;
    --color-mint:         #89d0c8;
    --color-teal:         #5bbac4;
    --color-cyan:         #78dce8;
    --color-blue:         #7accd7;
    --color-indigo:       #8490d4;
    --color-purple:       #ab9df2;
    --color-pink:         #f07898;
    --color-brown:        #c49a70;
}

[data-theme="sonokai-andromeda"] {
    --color-black:        #181a1c;
    --color-bg-dim:       #252630;
    --color-bg0:          #2b2d3a;
    --color-bg1:          #333648;
    --color-bg2:          #363a4e;
    --color-bg3:          #393e53;
    --color-bg4:          #3f445b;
    --color-bg-red:       #55393d;
    --color-bg-yellow:    #4e432f;
    --color-bg-green:     #394634;
    --color-bg-blue:      #354157;
    --color-bg-purple:    #423f59;
    --color-filled-red:   #ff6188;
    --color-filled-green: #a9dc76;
    --color-filled-blue:  #77d5f0;
    --color-fg:           #e1e3e4;
    --color-grey:         #7e8294;
    --color-grey-dim:     #5a5e7a;
    --color-red:          #fb617e;
    --color-orange:       #f89860;
    --color-yellow:       #edc763;
    --color-green:        #9ed06c;
    --color-mint:         #88d0c8;
    --color-teal:         #5ab8c4;
    --color-cyan:         #77d5f0;
    --color-blue:         #6dcae8;
    --color-indigo:       #8898d4;
    --color-purple:       #bb97ee;
    --color-pink:         #f076a0;
    --color-brown:        #c49870;
}

[data-theme="sonokai-atlantis"] {
    --color-black:        #181a1c;
    --color-bg-dim:       #24272e;
    --color-bg0:          #2a2f38;
    --color-bg1:          #333846;
    --color-bg2:          #373c4b;
    --color-bg3:          #3d4455;
    --color-bg4:          #424b5b;
    --color-bg-red:       #55393d;
    --color-bg-yellow:    #4e432f;
    --color-bg-green:     #394634;
    --color-bg-blue:      #354157;
    --color-bg-purple:    #434058;
    --color-filled-red:   #ff6d7e;
    --color-filled-green: #a5e179;
    --color-filled-blue:  #7ad5f1;
    --color-fg:           #e1e3e4;
    --color-grey:         #828a9a;
    --color-grey-dim:     #5a6477;
    --color-red:          #ff6578;
    --color-orange:       #f69c5e;
    --color-yellow:       #eacb64;
    --color-green:        #9dd274;
    --color-mint:         #88d0c8;
    --color-teal:         #5ab8c4;
    --color-cyan:         #7ad5f1;
    --color-blue:         #72cce8;
    --color-indigo:       #8898d4;
    --color-purple:       #ba9cf3;
    --color-pink:         #f076a0;
    --color-brown:        #c49a72;
}

[data-theme="sonokai-maia"] {
    --color-black:        #1c1e1f;
    --color-bg-dim:       #21282c;
    --color-bg0:          #273136;
    --color-bg1:          #313b42;
    --color-bg2:          #353f46;
    --color-bg3:          #3a444b;
    --color-bg4:          #414b53;
    --color-bg-red:       #55393d;
    --color-bg-yellow:    #4e432f;
    --color-bg-green:     #394634;
    --color-bg-blue:      #354157;
    --color-bg-purple:    #404256;
    --color-filled-red:   #ff6d7e;
    --color-filled-green: #a2e57b;
    --color-filled-blue:  #7cd5f1;
    --color-fg:           #e1e2e3;
    --color-grey:         #82878b;
    --color-grey-dim:     #55626d;
    --color-red:          #f76c7c;
    --color-orange:       #f3a96a;
    --color-yellow:       #e3d367;
    --color-green:        #9cd57b;
    --color-mint:         #88d4cc;
    --color-teal:         #5bbcc4;
    --color-cyan:         #7cd5f1;
    --color-blue:         #78cee9;
    --color-indigo:       #8898d4;
    --color-purple:       #baa0f8;
    --color-pink:         #f076a0;
    --color-brown:        #c49a72;
}

[data-theme="sonokai-espresso"] {
    --color-black:        #1f1e1c;
    --color-bg-dim:       #242120;
    --color-bg0:          #312c2b;
    --color-bg1:          #393230;
    --color-bg2:          #413937;
    --color-bg3:          #49403c;
    --color-bg4:          #4e433f;
    --color-bg-red:       #55393d;
    --color-bg-yellow:    #4e432f;
    --color-bg-green:     #394634;
    --color-bg-blue:      #354157;
    --color-bg-purple:    #463e4f;
    --color-filled-red:   #fd6883;
    --color-filled-green: #adda78;
    --color-filled-blue:  #85dad2;
    --color-fg:           #e4e3e1;
    --color-grey:         #90817b;
    --color-grey-dim:     #6a5e59;
    --color-red:          #f86882;
    --color-orange:       #f08d71;
    --color-yellow:       #f0c66f;
    --color-green:        #a6cd77;
    --color-mint:         #88c8c4;
    --color-teal:         #5ab0b8;
    --color-cyan:         #85dad2;
    --color-blue:         #81d0c9;
    --color-indigo:       #8890d4;
    --color-purple:       #9fa0e1;
    --color-pink:         #f07898;
    --color-brown:        #c49a70;
}

[data-theme="sonokai-default-darker"] {
    --color-black:        #0e0e0f;
    --color-bg-dim:       #17181c;
    --color-bg0:          #1f2026;
    --color-bg1:          #26282f;
    --color-bg2:          #292c34;
    --color-bg3:          #2d303a;
    --color-bg4:          #333743;
    --color-bg-red:       #55393d;
    --color-bg-yellow:    #4e432f;
    --color-bg-green:     #394634;
    --color-bg-blue:      #354157;
    --color-bg-purple:    #434055;
    --color-filled-red:   #ff6077;
    --color-filled-green: #a7df78;
    --color-filled-blue:  #85d3f2;
    --color-fg:           #e2e2e3;
    --color-grey:         #7f8490;
    --color-grey-dim:     #595f6f;
    --color-red:          #fc5d7c;
    --color-orange:       #f39660;
    --color-yellow:       #e7c664;
    --color-green:        #9ed072;
    --color-mint:         #89d0c8;
    --color-teal:         #5bbac4;
    --color-cyan:         #7fd4e8;
    --color-blue:         #76cce0;
    --color-indigo:       #8490d4;
    --color-purple:       #b39df3;
    --color-pink:         #f07898;
    --color-brown:        #c49a70;
}

[data-theme="axis-dark"] {
    --color-black:        #090909;
    --color-bg-dim:       #111111;
    --color-bg0:          #191919;
    --color-bg1:          #212121;
    --color-bg2:          #272727;
    --color-bg3:          #2e2e2e;
    --color-bg4:          #363636;
    --color-bg-red:       #3d0f18;
    --color-bg-yellow:    #3d2e00;
    --color-bg-green:     #1a3020;
    --color-bg-blue:      #152030;
    --color-bg-purple:    #251a33;
    --color-filled-red:   #ff4d66;
    --color-filled-green: #7acc55;
    --color-filled-blue:  #55aadd;
    --color-fg:           #f2f2f2;
    --color-grey:         #888888;
    --color-grey-dim:     #555555;
    --color-red:          #ff0033;
    --color-orange:       #ff6622;
    --color-yellow:       #ffcc33;
    --color-green:        #66cc44;
    --color-mint:         #55ccaa;
    --color-teal:         #33aabb;
    --color-cyan:         #44ccdd;
    --color-blue:         #44aacc;
    --color-indigo:       #6677cc;
    --color-purple:       #9966cc;
    --color-pink:         #ee5599;
    --color-brown:        #aa7744;
}

[data-theme="axis-light"] {
    --color-black:        #c8c8c8;
    --color-bg-dim:       #f0f0f0;
    --color-bg0:          #f8f8f8;
    --color-bg1:          #ededed;
    --color-bg2:          #e6e6e6;
    --color-bg3:          #dedede;
    --color-bg4:          #d2d2d2;
    --color-bg-red:       #ffe0e5;
    --color-bg-yellow:    #fff5cc;
    --color-bg-green:     #dff5cc;
    --color-bg-blue:      #d0e8f5;
    --color-bg-purple:    #e8d5f5;
    --color-filled-red:   #ff3355;
    --color-filled-green: #55bb33;
    --color-filled-blue:  #2299cc;
    --color-fg:           #111111;
    --color-grey:         #777777;
    --color-grey-dim:     #aaaaaa;
    --color-red:          #ff0033;
    --color-orange:       #e05500;
    --color-yellow:       #cc9900;
    --color-green:        #339911;
    --color-mint:         #11aa88;
    --color-teal:         #1199bb;
    --color-cyan:         #11aacc;
    --color-blue:         #1177bb;
    --color-indigo:       #4455bb;
    --color-purple:       #6622aa;
    --color-pink:         #cc3377;
    --color-brown:        #885533;
}

@keyframes fadeOut {
    0%   { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

body {
    background-color: var(--color-bg0);
    color: var(--color-fg);
    height: 100%;
}
