/* Combined CSS - Themes + Syntax + Main + Gallery */

/* 1. Site Themes */
/* =========================================
   1. CSS VARIABLES & THEMING SYSTEM
   ========================================= */

:root {
    --transition-speed: 0.3s;
    /* --- Global Defaults (Fallbacks) --- */
    --heading-color: var(--text-color);
    --link-color: var(--primary-color);
    --tertiary-color: var(--border-color);
    /* Container Defaults */
    --primary-container-bg: var(--card-bg);
    --on-primary-container-color: var(--text-color);
    --secondary-container-bg: var(--card-bg);
    --on-secondary-container-color: var(--text-color);
}

/* Material Design Colors */

/* Material Pink Dark mode */
html[data-theme-set="material-pink"][data-mode="dark"] {
    --bg-color: #880E4F; /* Pink 900 */
    --text-color: #FCE4EC; /* Pink 50 */
    --link-color: #FF80AB; /* Pink A100 */
    --heading-color: #F8BBD0; /* Pink 100 */
    --tertiary-color: #AD1457; /* Pink 800 */
    --card-bg: #AD1457; /* Pink 800 */
    --search-bg: #880E4F; /* Pink 900 */
    --border-color: #C2185B; /* Pink 700 */
    --primary-color: #F06292; /* Pink 300 */
    --primary-container-bg: #AD1457;
    --on-primary-container-color: #FCE4EC;
    --secondary-container-bg: #C2185B;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #AD1457;
    --sh-text: #FCE4EC;
    --sh-border: #C2185B;
    --sh-keyword: #FF80AB;
    --sh-string: #F8BBD0;
    --sh-function: #F06292;
    --sh-variable: #F48FB1;
    --sh-comment: #C51162;
    --sh-punctuation: #FCE4EC;
}
/* Material Pink Light mode */
html[data-theme-set="material-pink"][data-mode="light"] {
    --bg-color: #FCE4EC; /* Pink 50 */
    --text-color: #880E4F; /* Pink 900 */
    --link-color: #C2185B; /* Pink 700 */
    --heading-color: #AD1457; /* Pink 800 */
    --tertiary-color: #F48FB1; /* Pink 200 */
    --card-bg: #ffffff;
    --search-bg: #FCE4EC;
    --border-color: #F8BBD0; /* Pink 100 */
    --primary-color: #E91E63; /* Pink 500 */
    --primary-container-bg: #F8BBD0;
    --on-primary-container-color: #880E4F;
    --secondary-container-bg: #F48FB1;
    --on-secondary-container-color: #880E4F;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #880E4F;
    --sh-border: #F8BBD0;
    --sh-keyword: #D81B60;
    --sh-string: #AD1457;
    --sh-function: #E91E63;
    --sh-variable: #C2185B;
    --sh-comment: #9e9e9e; /* Neutral grey for readability */
    --sh-punctuation: #880E4F;
}

/* Material Purple Dark mode */
html[data-theme-set="material-purple"][data-mode="dark"] {
    --bg-color: #4A148C; /* Purple 900 */
    --text-color: #F3E5F5; /* Purple 50 */
    --link-color: #EA80FC; /* Purple A100 */
    --heading-color: #E1BEE7; /* Purple 100 */
    --tertiary-color: #6A1B9A; /* Purple 800 */
    --card-bg: #6A1B9A; /* Purple 800 */
    --search-bg: #4A148C;
    --border-color: #7B1FA2; /* Purple 700 */
    --primary-color: #BA68C8; /* Purple 300 */
    --primary-container-bg: #6A1B9A;
    --on-primary-container-color: #F3E5F5;
    --secondary-container-bg: #7B1FA2;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #6A1B9A;
    --sh-text: #F3E5F5;
    --sh-border: #7B1FA2;
    --sh-keyword: #EA80FC;
    --sh-string: #E1BEE7;
    --sh-function: #CE93D8;
    --sh-variable: #BA68C8;
    --sh-comment: #AA00FF; /* A700 */
    --sh-punctuation: #F3E5F5;
}

/* Material Purple Light mode */
html[data-theme-set="material-purple"][data-mode="light"] {
    --bg-color: #F3E5F5; /* Purple 50 */
    --text-color: #4A148C; /* Purple 900 */
    --link-color: #7B1FA2; /* Purple 700 */
    --heading-color: #6A1B9A; /* Purple 800 */
    --tertiary-color: #CE93D8; /* Purple 200 */
    --card-bg: #ffffff;
    --search-bg: #F3E5F5;
    --border-color: #E1BEE7; /* Purple 100 */
    --primary-color: #9C27B0; /* Purple 500 */
    --primary-container-bg: #E1BEE7;
    --on-primary-container-color: #4A148C;
    --secondary-container-bg: #CE93D8;
    --on-secondary-container-color: #4A148C;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #4A148C;
    --sh-border: #E1BEE7;
    --sh-keyword: #8E24AA;
    --sh-string: #6A1B9A;
    --sh-function: #9C27B0;
    --sh-variable: #7B1FA2;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #4A148C;
}

/* Material Deep Purple Dark mode */
html[data-theme-set="material-deep-purple"][data-mode="dark"] {
    --bg-color: #311B92; /* Deep Purple 900 */
    --text-color: #EDE7F6; /* Deep Purple 50 */
    --link-color: #B388FF; /* Deep Purple A100 */
    --heading-color: #D1C4E9; /* Deep Purple 100 */
    --tertiary-color: #4527A0; /* Deep Purple 800 */
    --card-bg: #4527A0;
    --search-bg: #311B92;
    --border-color: #512DA8; /* Deep Purple 700 */
    --primary-color: #9575CD; /* Deep Purple 300 */
    --primary-container-bg: #4527A0;
    --on-primary-container-color: #EDE7F6;
    --secondary-container-bg: #512DA8;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #4527A0;
    --sh-text: #EDE7F6;
    --sh-border: #512DA8;
    --sh-keyword: #B388FF;
    --sh-string: #D1C4E9;
    --sh-function: #7E57C2;
    --sh-variable: #9575CD;
    --sh-comment: #6200EA; /* Deep Purple A700 */
    --sh-punctuation: #EDE7F6;
}
/* Material Deep Purple Light mode */
html[data-theme-set="material-deep-purple"][data-mode="light"] {
    --bg-color: #EDE7F6; /* Deep Purple 50 */
    --text-color: #311B92; /* Deep Purple 900 */
    --link-color: #512DA8; /* Deep Purple 700 */
    --heading-color: #4527A0; /* Deep Purple 800 */
    --tertiary-color: #B39DDB; /* Deep Purple 200 */
    --card-bg: #ffffff;
    --search-bg: #EDE7F6;
    --border-color: #D1C4E9; /* Deep Purple 100 */
    --primary-color: #673AB7; /* Deep Purple 500 */
    --primary-container-bg: #D1C4E9;
    --on-primary-container-color: #311B92;
    --secondary-container-bg: #B39DDB;
    --on-secondary-container-color: #311B92;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #311B92;
    --sh-border: #D1C4E9;
    --sh-keyword: #5E35B1;
    --sh-string: #4527A0;
    --sh-function: #673AB7;
    --sh-variable: #512DA8;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #311B92;
}
/* Material Indigo Dark mode */
html[data-theme-set="material-indigo"][data-mode="dark"] {
    --bg-color: #1A237E; /* Indigo 900 */
    --text-color: #E8EAF6; /* Indigo 50 */
    --link-color: #8C9EFF; /* Indigo A100 */
    --heading-color: #C5CAE9; /* Indigo 100 */
    --tertiary-color: #283593; /* Indigo 800 */
    --card-bg: #283593;
    --search-bg: #1A237E;
    --border-color: #303F9F; /* Indigo 700 */
    --primary-color: #7986CB; /* Indigo 300 */
    --primary-container-bg: #283593;
    --on-primary-container-color: #E8EAF6;
    --secondary-container-bg: #303F9F;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #283593;
    --sh-text: #E8EAF6;
    --sh-border: #303F9F;
    --sh-keyword: #8C9EFF;
    --sh-string: #C5CAE9;
    --sh-function: #5C6BC0;
    --sh-variable: #7986CB;
    --sh-comment: #304FFE; /* Indigo A700 */
    --sh-punctuation: #E8EAF6;
}
/* Material Indigo Light mode */
html[data-theme-set="material-indigo"][data-mode="light"] {
    --bg-color: #E8EAF6; /* Indigo 50 */
    --text-color: #1A237E; /* Indigo 900 */
    --link-color: #303F9F; /* Indigo 700 */
    --heading-color: #283593; /* Indigo 800 */
    --tertiary-color: #9FA8DA; /* Indigo 200 */
    --card-bg: #ffffff;
    --search-bg: #E8EAF6;
    --border-color: #C5CAE9; /* Indigo 100 */
    --primary-color: #3F51B5; /* Indigo 500 */
    --primary-container-bg: #C5CAE9;
    --on-primary-container-color: #1A237E;
    --secondary-container-bg: #9FA8DA;
    --on-secondary-container-color: #1A237E;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #1A237E;
    --sh-border: #C5CAE9;
    --sh-keyword: #3949AB;
    --sh-string: #283593;
    --sh-function: #3F51B5;
    --sh-variable: #303F9F;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #1A237E;
}
/* Material Blue Dark mode */
html[data-theme-set="material-blue"][data-mode="dark"] {
    --bg-color: #0D47A1; /* Blue 900 */
    --text-color: #E3F2FD; /* Blue 50 */
    --link-color: #82B1FF; /* Blue A100 */
    --heading-color: #BBDEFB; /* Blue 100 */
    --tertiary-color: #1565C0; /* Blue 800 */
    --card-bg: #1565C0;
    --search-bg: #0D47A1;
    --border-color: #1976D2; /* Blue 700 */
    --primary-color: #64B5F6; /* Blue 300 */
    --primary-container-bg: #1565C0;
    --on-primary-container-color: #E3F2FD;
    --secondary-container-bg: #1976D2;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #1565C0;
    --sh-text: #E3F2FD;
    --sh-border: #1976D2;
    --sh-keyword: #82B1FF;
    --sh-string: #BBDEFB;
    --sh-function: #42A5F5;
    --sh-variable: #64B5F6;
    --sh-comment: #2962FF; /* Blue A700 */
    --sh-punctuation: #E3F2FD;
}
/* Material Blue Light mode */
html[data-theme-set="material-blue"][data-mode="light"] {
    --bg-color: #E3F2FD; /* Blue 50 */
    --text-color: #0D47A1; /* Blue 900 */
    --link-color: #1976D2; /* Blue 700 */
    --heading-color: #1565C0; /* Blue 800 */
    --tertiary-color: #90CAF9; /* Blue 200 */
    --card-bg: #ffffff;
    --search-bg: #E3F2FD;
    --border-color: #BBDEFB; /* Blue 100 */
    --primary-color: #2196F3; /* Blue 500 */
    --primary-container-bg: #BBDEFB;
    --on-primary-container-color: #0D47A1;
    --secondary-container-bg: #90CAF9;
    --on-secondary-container-color: #0D47A1;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #0D47A1;
    --sh-border: #BBDEFB;
    --sh-keyword: #1E88E5;
    --sh-string: #1565C0;
    --sh-function: #2196F3;
    --sh-variable: #1976D2;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #0D47A1;
}
/* Material Light Blue Dark mode */
html[data-theme-set="material-light-blue"][data-mode="dark"] {
    --bg-color: #01579B; /* Light Blue 900 */
    --text-color: #E1F5FE; /* Light Blue 50 */
    --link-color: #80D8FF; /* Light Blue A100 */
    --heading-color: #B3E5FC; /* Light Blue 100 */
    --tertiary-color: #0277BD; /* Light Blue 800 */
    --card-bg: #0277BD;
    --search-bg: #01579B;
    --border-color: #0288D1; /* Light Blue 700 */
    --primary-color: #4FC3F7; /* Light Blue 300 */
    --primary-container-bg: #0277BD;
    --on-primary-container-color: #E1F5FE;
    --secondary-container-bg: #0288D1;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #0277BD;
    --sh-text: #E1F5FE;
    --sh-border: #0288D1;
    --sh-keyword: #80D8FF;
    --sh-string: #B3E5FC;
    --sh-function: #03A9F4;
    --sh-variable: #4FC3F7;
    --sh-comment: #0091EA; /* Light Blue A700 */
    --sh-punctuation: #E1F5FE;
}
/* Material Light Blue Light mode */
html[data-theme-set="material-light-blue"][data-mode="light"] {
    --bg-color: #E1F5FE; /* Light Blue 50 */
    --text-color: #01579B; /* Light Blue 900 */
    --link-color: #0288D1; /* Light Blue 700 */
    --heading-color: #0277BD; /* Light Blue 800 */
    --tertiary-color: #81D4FA; /* Light Blue 200 */
    --card-bg: #ffffff;
    --search-bg: #E1F5FE;
    --border-color: #B3E5FC; /* Light Blue 100 */
    --primary-color: #03A9F4; /* Light Blue 500 */
    --primary-container-bg: #B3E5FC;
    --on-primary-container-color: #01579B;
    --secondary-container-bg: #81D4FA;
    --on-secondary-container-color: #01579B;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #01579B;
    --sh-border: #B3E5FC;
    --sh-keyword: #039BE5;
    --sh-string: #0277BD;
    --sh-function: #03A9F4;
    --sh-variable: #0288D1;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #01579B;
}
/* Material Cyan Dark mode */
html[data-theme-set="material-cyan"][data-mode="dark"] {
    --bg-color: #006064; /* Cyan 900 */
    --text-color: #E0F7FA; /* Cyan 50 */
    --link-color: #84FFFF; /* Cyan A100 */
    --heading-color: #B2EBF2; /* Cyan 100 */
    --tertiary-color: #00838F; /* Cyan 800 */
    --card-bg: #00838F;
    --search-bg: #006064;
    --border-color: #0097A7; /* Cyan 700 */
    --primary-color: #4DD0E1; /* Cyan 300 */
    --primary-container-bg: #00838F;
    --on-primary-container-color: #E0F7FA;
    --secondary-container-bg: #0097A7;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #00838F;
    --sh-text: #E0F7FA;
    --sh-border: #0097A7;
    --sh-keyword: #84FFFF;
    --sh-string: #B2EBF2;
    --sh-function: #00BCD4;
    --sh-variable: #4DD0E1;
    --sh-comment: #00B8D4; /* Cyan A700 */
    --sh-punctuation: #E0F7FA;
}
/* Material Cyan Light mode */
html[data-theme-set="material-cyan"][data-mode="light"] {
    --bg-color: #E0F7FA; /* Cyan 50 */
    --text-color: #006064; /* Cyan 900 */
    --link-color: #0097A7; /* Cyan 700 */
    --heading-color: #00838F; /* Cyan 800 */
    --tertiary-color: #80DEEA; /* Cyan 200 */
    --card-bg: #ffffff;
    --search-bg: #E0F7FA;
    --border-color: #B2EBF2; /* Cyan 100 */
    --primary-color: #00BCD4; /* Cyan 500 */
    --primary-container-bg: #B2EBF2;
    --on-primary-container-color: #006064;
    --secondary-container-bg: #80DEEA;
    --on-secondary-container-color: #006064;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #006064;
    --sh-border: #B2EBF2;
    --sh-keyword: #00ACC1;
    --sh-string: #00838F;
    --sh-function: #00BCD4;
    --sh-variable: #0097A7;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #006064;
}
/* Material Teal Dark mode */
html[data-theme-set="material-teal"][data-mode="dark"] {
    --bg-color: #004D40; /* Teal 900 */
    --text-color: #E0F2F1; /* Teal 50 */
    --link-color: #A7FFEB; /* Teal A100 */
    --heading-color: #B2DFDB; /* Teal 100 */
    --tertiary-color: #00695C; /* Teal 800 */
    --card-bg: #00695C;
    --search-bg: #004D40;
    --border-color: #00796B; /* Teal 700 */
    --primary-color: #4DB6AC; /* Teal 300 */
    --primary-container-bg: #00695C;
    --on-primary-container-color: #E0F2F1;
    --secondary-container-bg: #00796B;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #00695C;
    --sh-text: #E0F2F1;
    --sh-border: #00796B;
    --sh-keyword: #A7FFEB;
    --sh-string: #B2DFDB;
    --sh-function: #009688;
    --sh-variable: #4DB6AC;
    --sh-comment: #00BFA5; /* Teal A700 */
    --sh-punctuation: #E0F2F1;
}
/* Material Teal Light mode */
html[data-theme-set="material-teal"][data-mode="light"] {
    --bg-color: #E0F2F1; /* Teal 50 */
    --text-color: #004D40; /* Teal 900 */
    --link-color: #00796B; /* Teal 700 */
    --heading-color: #00695C; /* Teal 800 */
    --tertiary-color: #80CBC4; /* Teal 200 */
    --card-bg: #ffffff;
    --search-bg: #E0F2F1;
    --border-color: #B2DFDB; /* Teal 100 */
    --primary-color: #009688; /* Teal 500 */
    --primary-container-bg: #B2DFDB;
    --on-primary-container-color: #004D40;
    --secondary-container-bg: #80CBC4;
    --on-secondary-container-color: #004D40;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #004D40;
    --sh-border: #B2DFDB;
    --sh-keyword: #00897B;
    --sh-string: #00695C;
    --sh-function: #009688;
    --sh-variable: #00796B;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #004D40;
}
/* Material Brown Dark mode */
html[data-theme-set="material-brown"][data-mode="dark"] {
    --bg-color: #3E2723; /* Brown 900 */
    --text-color: #EFEBE9; /* Brown 50 */
    --link-color: #BCAAA4; /* Brown 200 used for visibility */
    --heading-color: #D7CCC8; /* Brown 100 */
    --tertiary-color: #4E342E; /* Brown 800 */
    --card-bg: #4E342E;
    --search-bg: #3E2723;
    --border-color: #5D4037; /* Brown 700 */
    --primary-color: #A1887F; /* Brown 300 */
    --primary-container-bg: #4E342E;
    --on-primary-container-color: #EFEBE9;
    --secondary-container-bg: #5D4037;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #4E342E;
    --sh-text: #EFEBE9;
    --sh-border: #5D4037;
    --sh-keyword: #D7CCC8;
    --sh-string: #BCAAA4;
    --sh-function: #A1887F;
    --sh-variable: #8D6E63; /* Brown 400 */
    --sh-comment: #795548; /* Brown 500 */
    --sh-punctuation: #EFEBE9;
}
/* Material Brown Light mode */ 
html[data-theme-set="material-brown"][data-mode="light"] {
    --bg-color: #EFEBE9; /* Brown 50 */
    --text-color: #3E2723; /* Brown 900 */
    --link-color: #5D4037; /* Brown 700 */
    --heading-color: #4E342E; /* Brown 800 */
    --tertiary-color: #BCAAA4; /* Brown 200 */
    --card-bg: #ffffff;
    --search-bg: #EFEBE9;
    --border-color: #D7CCC8; /* Brown 100 */
    --primary-color: #795548; /* Brown 500 */
    --primary-container-bg: #D7CCC8;
    --on-primary-container-color: #3E2723;
    --secondary-container-bg: #BCAAA4;
    --on-secondary-container-color: #3E2723;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #3E2723;
    --sh-border: #D7CCC8;
    --sh-keyword: #6D4C41; /* Brown 600 */
    --sh-string: #4E342E;
    --sh-function: #795548;
    --sh-variable: #5D4037;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #3E2723;
}
/* Material Gray Dark mode */
html[data-theme-set="material-gray"][data-mode="dark"] {
    --bg-color: #212121; /* Gray 900 */
    --text-color: #FAFAFA; /* Gray 50 */
    --link-color: #EEEEEE; /* Gray 200 */
    --heading-color: #F5F5F5; /* Gray 100 */
    --tertiary-color: #424242; /* Gray 800 */
    --card-bg: #424242;
    --search-bg: #212121;
    --border-color: #616161; /* Gray 700 */
    --primary-color: #E0E0E0; /* Gray 300 */
    --primary-container-bg: #424242;
    --on-primary-container-color: #FAFAFA;
    --secondary-container-bg: #616161;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #424242;
    --sh-text: #FAFAFA;
    --sh-border: #616161;
    --sh-keyword: #F5F5F5;
    --sh-string: #EEEEEE;
    --sh-function: #E0E0E0;
    --sh-variable: #BDBDBD; /* Gray 400 */
    --sh-comment: #9E9E9E; /* Gray 500 */
    --sh-punctuation: #FAFAFA;
}
/* Material Gray Light mode */
html[data-theme-set="material-gray"][data-mode="light"] {
    --bg-color: #FAFAFA; /* Gray 50 */
    --text-color: #212121; /* Gray 900 */
    --link-color: #616161; /* Gray 700 */
    --heading-color: #424242; /* Gray 800 */
    --tertiary-color: #EEEEEE; /* Gray 200 */
    --card-bg: #ffffff;
    --search-bg: #FAFAFA;
    --border-color: #F5F5F5; /* Gray 100 */
    --primary-color: #9E9E9E; /* Gray 500 */
    --primary-container-bg: #F5F5F5;
    --on-primary-container-color: #212121;
    --secondary-container-bg: #EEEEEE;
    --on-secondary-container-color: #212121;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #212121;
    --sh-border: #F5F5F5;
    --sh-keyword: #757575; /* Gray 600 */
    --sh-string: #424242;
    --sh-function: #9E9E9E;
    --sh-variable: #616161;
    --sh-comment: #BDBDBD; /* Gray 400 */
    --sh-punctuation: #212121;
}

/* Material Blue Gray Dark mode */
html[data-theme-set="material-blue-gray"][data-mode="dark"] {
    --bg-color: #263238; /* Blue Gray 900 */
    --text-color: #ECEFF1; /* Blue Gray 50 */
    --link-color: #B0BEC5; /* Blue Gray 200 */
    --heading-color: #CFD8DC; /* Blue Gray 100 */
    --tertiary-color: #37474F; /* Blue Gray 800 */
    --card-bg: #37474F;
    --search-bg: #263238;
    --border-color: #455A64; /* Blue Gray 700 */
    --primary-color: #90A4AE; /* Blue Gray 300 */
    --primary-container-bg: #37474F;
    --on-primary-container-color: #ECEFF1;
    --secondary-container-bg: #455A64;
    --on-secondary-container-color: #ffffff;
    /* Syntax Highlighting */
    --sh-bg: #37474F;
    --sh-text: #ECEFF1;
    --sh-border: #455A64;
    --sh-keyword: #CFD8DC;
    --sh-string: #B0BEC5;
    --sh-function: #90A4AE;
    --sh-variable: #78909C; /* Blue Gray 400 */
    --sh-comment: #607D8B; /* Blue Gray 500 */
    --sh-punctuation: #ECEFF1;
}
/* Material Blue Gray Light mode */
html[data-theme-set="material-blue-gray"][data-mode="light"] {
    --bg-color: #ECEFF1; /* Blue Gray 50 */
    --text-color: #263238; /* Blue Gray 900 */
    --link-color: #455A64; /* Blue Gray 700 */
    --heading-color: #37474F; /* Blue Gray 800 */
    --tertiary-color: #B0BEC5; /* Blue Gray 200 */
    --card-bg: #ffffff;
    --search-bg: #ECEFF1;
    --border-color: #CFD8DC; /* Blue Gray 100 */
    --primary-color: #607D8B; /* Blue Gray 500 */
    --primary-container-bg: #CFD8DC;
    --on-primary-container-color: #263238;
    --secondary-container-bg: #B0BEC5;
    --on-secondary-container-color: #263238;
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #263238;
    --sh-border: #CFD8DC;
    --sh-keyword: #546E7A; /* Blue Gray 600 */
    --sh-string: #37474F;
    --sh-function: #607D8B;
    --sh-variable: #455A64;
    --sh-comment: #9e9e9e;
    --sh-punctuation: #263238;
}

/* Matrix Dark mode: 'The Matrix' (Black/Green) */
html[data-theme-set="matrix-green"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #00ff41;
    --link-color: #00ff41;
    --heading-color: #ffffff; /* White Heading Rule */
    --tertiary-color: #003b00;
    --card-bg: #0d0d0d;
    --search-bg: #000000;
    --border-color: #008f11;
    --primary-color: #00ff41;
    --primary-container-bg: #0d0d0d;
    --on-primary-container-color: #00ff41;
    --secondary-container-bg: #003b00;
    --on-secondary-container-color: #ffffff; /* Consistent with other Matrix sets */
    --sh-bg: #0d0d0d;
    --sh-text: #00ff41;
    --sh-border: #008f11;
    --sh-keyword: #ffffff; /* White Keyword Rule */
    --sh-string: #008f11;
    --sh-function: #00ff41;
    --sh-variable: #00ff41;
    --sh-comment: #003b00;
    --sh-punctuation: #00ff41;
}

html[data-theme-set="matrix-green"][data-mode="light"] {
    --bg-color: #f0fff4; /* Pale Ghost Green */
    --text-color: #003300;
    --link-color: #008000;
    --heading-color: #001a00;
    --tertiary-color: #ccffcc;
    --card-bg: #ffffff;
    --search-bg: #f0fff4;
    --border-color: #b3ffc1;
    --primary-color: #008000;
    --primary-container-bg: #e6ffec;
    --on-primary-container-color: #003300;
    --secondary-container-bg: #ccffcc;
    --on-secondary-container-color: #002200;
    --sh-bg: #ffffff;
    --sh-text: #003300;
    --sh-border: #b3ffc1;
    --sh-keyword: #008000;
    --sh-string: #008000;
    --sh-function: #006600;
    --sh-variable: #00ff41;
    --sh-comment: #a1a1a1;
    --sh-punctuation: #003300;
}

html[data-theme-set="matrix-red"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #ff0000;
    --link-color: #ff5555;
    --heading-color: #ffffff;
    --tertiary-color: #4a0000;
    --card-bg: #0d0000;
    --search-bg: #000000;
    --border-color: #8b0000;
    --primary-color: #ff0000;
    --primary-container-bg: #1a0000;
    --on-primary-container-color: #ff0000;
    --secondary-container-bg: #4a0000;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #0d0000;
    --sh-text: #ff0000;
    --sh-border: #8b0000;
    --sh-keyword: #ffffff;
    --sh-string: #ff5555;
    --sh-function: #ff0000;
    --sh-variable: #ff3333;
    --sh-comment: #4a0000;
    --sh-punctuation: #ff0000;
}
html[data-theme-set="matrix-red"][data-mode="light"] {
    --bg-color: #fff5f5;
    --text-color: #800000;
    --link-color: #d00000;
    --heading-color: #000000;
    --tertiary-color: #ffc1c1;
    --card-bg: #ffffff;
    --search-bg: #fff5f5;
    --border-color: #ffb3b3;
    --primary-color: #d00000;
    --primary-container-bg: #ffebeb;
    --on-primary-container-color: #800000;
    --secondary-container-bg: #ffc1c1;
    --on-secondary-container-color: #4a0000;
    --sh-bg: #ffffff;
    --sh-text: #800000;
    --sh-border: #ffb3b3;
    --sh-keyword: #d00000;
    --sh-string: #d00000;
    --sh-function: #a00000;
    --sh-variable: #ff4444;
    --sh-comment: #b0b0b0;
    --sh-punctuation: #800000;
}

html[data-theme-set="matrix-orange"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #ffae00;
    --link-color: #ffcc00;
    --heading-color: #ffffff;
    --tertiary-color: #4a3300;
    --card-bg: #0d0900;
    --search-bg: #000000;
    --border-color: #cc8b00;
    --primary-color: #ffae00;
    --primary-container-bg: #1a1100;
    --on-primary-container-color: #ffae00;
    --secondary-container-bg: #4a3300;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #0d0900;
    --sh-text: #ffae00;
    --sh-border: #cc8b00;
    --sh-keyword: #ffffff;
    --sh-string: #ffcc00;
    --sh-function: #ffae00;
    --sh-variable: #ffd27f;
    --sh-comment: #4a3300;
    --sh-punctuation: #ffae00;
}
html[data-theme-set="matrix-orange"][data-mode="light"] {
    --bg-color: #fffaf0;
    --text-color: #664400;
    --link-color: #b37700;
    --heading-color: #332200;
    --tertiary-color: #ffe4b3;
    --card-bg: #ffffff;
    --search-bg: #fffaf0;
    --border-color: #ffd27f;
    --primary-color: #b37700;
    --primary-container-bg: #fff3d6;
    --on-primary-container-color: #664400;
    --secondary-container-bg: #ffe4b3;
    --on-secondary-container-color: #332200;
    --sh-bg: #ffffff;
    --sh-text: #664400;
    --sh-border: #ffd27f;
    --sh-keyword: #b37700;
    --sh-string: #b37700;
    --sh-function: #e69900;
    --sh-variable: #ffae00;
    --sh-comment: #a1a1a1;
    --sh-punctuation: #664400;
}

html[data-theme-set="matrix-yellow"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #ffff00;
    --link-color: #e6e600;
    --heading-color: #ffffff;
    --tertiary-color: #333300;
    --card-bg: #0a0a00;
    --search-bg: #000000;
    --border-color: #b3b300;
    --primary-color: #ffff00;
    --primary-container-bg: #1a1a00;
    --on-primary-container-color: #ffff00;
    --secondary-container-bg: #333300;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #0a0a00;
    --sh-text: #ffff00;
    --sh-border: #b3b300;
    --sh-keyword: #ffffff;
    --sh-string: #e6e600;
    --sh-function: #ffff00;
    --sh-variable: #ffff80;
    --sh-comment: #333300;
    --sh-punctuation: #ffff00;
}
html[data-theme-set="matrix-yellow"][data-mode="light"] {
    --bg-color: #ffffed;
    --text-color: #555500;
    --link-color: #888800;
    --heading-color: #222200;
    --tertiary-color: #ffffb3;
    --card-bg: #ffffff;
    --search-bg: #ffffed;
    --border-color: #e6e600;
    --primary-color: #888800;
    --primary-container-bg: #ffffd1;
    --on-primary-container-color: #555500;
    --secondary-container-bg: #ffffb3;
    --on-secondary-container-color: #222200;
    --sh-bg: #ffffff;
    --sh-text: #555500;
    --sh-border: #e6e600;
    --sh-keyword: #888800;
    --sh-string: #888800;
    --sh-function: #aaaa00;
    --sh-variable: #ffff00;
    --sh-comment: #999999;
    --sh-punctuation: #555500;
}

html[data-theme-set="matrix-blue"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #00aaff;
    --link-color: #55ccff;
    --heading-color: #ffffff;
    --tertiary-color: #00334d;
    --card-bg: #000d14;
    --search-bg: #000000;
    --border-color: #006699;
    --primary-color: #00aaff;
    --primary-container-bg: #001a2b;
    --on-primary-container-color: #00aaff;
    --secondary-container-bg: #00334d;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #000d14;
    --sh-text: #00aaff;
    --sh-border: #006699;
    --sh-keyword: #ffffff;
    --sh-string: #55ccff;
    --sh-function: #00aaff;
    --sh-variable: #80d5ff;
    --sh-comment: #00334d;
    --sh-punctuation: #00aaff;
}
html[data-theme-set="matrix-blue"][data-mode="light"] {
    --bg-color: #f0faff;
    --text-color: #004466;
    --link-color: #0077b3;
    --heading-color: #001a2b;
    --tertiary-color: #b3e5ff;
    --card-bg: #ffffff;
    --search-bg: #f0faff;
    --border-color: #80d5ff;
    --primary-color: #0077b3;
    --primary-container-bg: #d6f2ff;
    --on-primary-container-color: #004466;
    --secondary-container-bg: #b3e5ff;
    --on-secondary-container-color: #001a2b;
    --sh-bg: #ffffff;
    --sh-text: #004466;
    --sh-border: #80d5ff;
    --sh-keyword: #0077b3;
    --sh-string: #0077b3;
    --sh-function: #0099e6;
    --sh-variable: #00aaff;
    --sh-comment: #949494;
    --sh-punctuation: #004466;
}

html[data-theme-set="matrix-indigo"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #4b0082;
    --link-color: #8a2be2;
    --heading-color: #ffffff;
    --tertiary-color: #1a002b;
    --card-bg: #05000a;
    --search-bg: #000000;
    --border-color: #310055;
    --primary-color: #4b0082;
    --primary-container-bg: #10001a;
    --on-primary-container-color: #4b0082;
    --secondary-container-bg: #1a002b;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #05000a;
    --sh-text: #4b0082;
    --sh-border: #310055;
    --sh-keyword: #ffffff;
    --sh-string: #8a2be2;
    --sh-function: #4b0082;
    --sh-variable: #9370db;
    --sh-comment: #1a002b;
    --sh-punctuation: #4b0082;
}
html[data-theme-set="matrix-indigo"][data-mode="light"] {
    --bg-color: #f7f0ff;
    --text-color: #2a004d;
    --link-color: #4b0082;
    --heading-color: #10001a;
    --tertiary-color: #dcc1ff;
    --card-bg: #ffffff;
    --search-bg: #f7f0ff;
    --border-color: #c080ff;
    --primary-color: #4b0082;
    --primary-container-bg: #efe0ff;
    --on-primary-container-color: #2a004d;
    --secondary-container-bg: #dcc1ff;
    --on-secondary-container-color: #10001a;
    --sh-bg: #ffffff;
    --sh-text: #2a004d;
    --sh-border: #c080ff;
    --sh-keyword: #4b0082;
    --sh-string: #4b0082;
    --sh-function: #6a0dad;
    --sh-variable: #8a2be2;
    --sh-comment: #a5a5a5;
    --sh-punctuation: #2a004d;
}

html[data-theme-set="matrix-violet"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #ee82ee;
    --link-color: #ff00ff;
    --heading-color: #ffffff;
    --tertiary-color: #4d004d;
    --card-bg: #0a000a;
    --search-bg: #000000;
    --border-color: #9400d3;
    --primary-color: #ee82ee;
    --primary-container-bg: #1a001a;
    --on-primary-container-color: #ee82ee;
    --secondary-container-bg: #4d004d;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #0a000a;
    --sh-text: #ee82ee;
    --sh-border: #9400d3;
    --sh-keyword: #ffffff;
    --sh-string: #ff00ff;
    --sh-function: #ee82ee;
    --sh-variable: #f0a0f0;
    --sh-comment: #4d004d;
    --sh-punctuation: #ee82ee;
}
html[data-theme-set="matrix-violet"][data-mode="light"] {
    --bg-color: #fff0ff;
    --text-color: #660066;
    --link-color: #9400d3;
    --heading-color: #2b002b;
    --tertiary-color: #ffccff;
    --card-bg: #ffffff;
    --search-bg: #fff0ff;
    --border-color: #ee82ee;
    --primary-color: #9400d3;
    --primary-container-bg: #ffe0ff;
    --on-primary-container-color: #660066;
    --secondary-container-bg: #ffccff;
    --on-secondary-container-color: #2b002b;
    --sh-bg: #ffffff;
    --sh-text: #660066;
    --sh-border: #ee82ee;
    --sh-keyword: #9400d3;
    --sh-string: #9400d3;
    --sh-function: #c71585;
    --sh-variable: #ee82ee;
    --sh-comment: #a8a8a8;
    --sh-punctuation: #660066;
}


html[data-theme-set="amethyst"][data-mode="dark"] {
    --bg-color: #0f0a1a;
    --text-color: #e0d7f2;
    --link-color: #ffd700;
    --heading-color: #bf80ff;
    --tertiary-color: #2d1a4d;
    --card-bg: #1a1129;
    --search-bg: #0f0a1a;
    --border-color: #3b2566;
    --primary-color: #bf80ff;
    --primary-container-bg: #1a1129;
    --on-primary-container-color: #ffd700;
    --secondary-container-bg: #2d1a4d;
    --on-secondary-container-color: #e0d7f2;
    --sh-bg: #1a1129;
    --sh-text: #e0d7f2;
    --sh-border: #3b2566;
    --sh-keyword: #bf80ff;
    --sh-string: #ffd700;
    --sh-function: #d187ff;
    --sh-variable: #a78bfa;
    --sh-comment: #6d588b;
    --sh-punctuation: #bf80ff;
}

html[data-theme-set="amethyst"][data-mode="light"] {
    --bg-color: #f7f5fb;
    --text-color: #1a1129;
    --link-color: #6a0dad;
    --heading-color: #4b0082;
    --tertiary-color: #d8bfd8;
    --card-bg: #ffffff;
    --search-bg: #f7f5fb;
    --border-color: #e6e0f0;
    --primary-color: #6a0dad;
    --primary-container-bg: #efe9f5;
    --on-primary-container-color: #4b0082;
    --secondary-container-bg: #d8bfd8;
    --on-secondary-container-color: #1a1129;
    --sh-bg: #ffffff;
    --sh-text: #1a1129;
    --sh-border: #e6e0f0;
    --sh-keyword: #6a0dad;
    --sh-string: #b8860b;
    --sh-function: #4b0082;
    --sh-variable: #7c3aed;
    --sh-comment: #a1a1a1;
    --sh-punctuation: #1a1129;
}

html[data-theme-set="abyssal"][data-mode="dark"] {
    --bg-color: #000814;
    --text-color: #bce7fd;
    --link-color: #00f5d4;
    --heading-color: #9b5de5;
    --tertiary-color: #003566;
    --card-bg: #001d3d;
    --search-bg: #000814;
    --border-color: #003566;
    --primary-color: #00f5d4;
    --primary-container-bg: #001d3d;
    --on-primary-container-color: #00f5d4;
    --secondary-container-bg: #003566;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #001d3d;
    --sh-text: #bce7fd;
    --sh-border: #003566;
    --sh-keyword: #f15bb5;
    --sh-string: #00f5d4;
    --sh-function: #9b5de5;
    --sh-variable: #fee440;
    --sh-comment: #4361ee;
    --sh-punctuation: #bce7fd;
}

html[data-theme-set="abyssal"][data-mode="light"] {
    --bg-color: #f0faff;
    --text-color: #001d3d;
    --link-color: #0077b6;
    --heading-color: #6a0dad;
    --tertiary-color: #ade8f4;
    --card-bg: #ffffff;
    --search-bg: #f0faff;
    --border-color: #caf0f8;
    --primary-color: #0077b6;
    --primary-container-bg: #e0f2fe;
    --on-primary-container-color: #001d3d;
    --secondary-container-bg: #ade8f4;
    --on-secondary-container-color: #003566;
    --sh-bg: #ffffff;
    --sh-text: #001d3d;
    --sh-border: #caf0f8;
    --sh-keyword: #d946ef;
    --sh-string: #0891b2;
    --sh-function: #7c3aed;
    --sh-variable: #ca8a04;
    --sh-comment: #64748b;
    --sh-punctuation: #001d3d;
}

html[data-theme-set="glacial"][data-mode="dark"] {
    --bg-color: #0b1217;
    --text-color: #d1e1e9;
    --link-color: #00d2ff;
    --heading-color: #ffffff;
    --tertiary-color: #1c2a35;
    --card-bg: #152028;
    --search-bg: #0b1217;
    --border-color: #2a3f4d;
    --primary-color: #00d2ff;
    --primary-container-bg: #1c2a35;
    --on-primary-container-color: #00d2ff;
    --secondary-container-bg: #2a3f4d;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #152028;
    --sh-text: #d1e1e9;
    --sh-border: #2a3f4d;
    --sh-keyword: #00d2ff;
    --sh-string: #9cebff;
    --sh-function: #33ccff;
    --sh-variable: #b0e0e6;
    --sh-comment: #4a6375;
    --sh-punctuation: #d1e1e9;
}

html[data-theme-set="glacial"][data-mode="light"] {
    --bg-color: #f0f7f9;
    --text-color: #152028;
    --link-color: #007ba7;
    --heading-color: #00334e;
    --tertiary-color: #d0e1e9;
    --card-bg: #ffffff;
    --search-bg: #f0f7f9;
    --border-color: #b8ccd6;
    --primary-color: #007ba7;
    --primary-container-bg: #e1edf2;
    --on-primary-container-color: #00334e;
    --secondary-container-bg: #d0e1e9;
    --on-secondary-container-color: #152028;
    --sh-bg: #ffffff;
    --sh-text: #152028;
    --sh-border: #b8ccd6;
    --sh-keyword: #005f82;
    --sh-string: #007ba7;
    --sh-function: #004d6b;
    --sh-variable: #2f4f4f;
    --sh-comment: #7d8e96;
    --sh-punctuation: #152028;
}

html[data-theme-set="chroma-red"][data-mode="dark"] {
    --bg-color: #350000;
    --text-color: #ffcccc;
    --link-color: #ff4d4d;
    --heading-color: #ffffff;
    --tertiary-color: #5c0000;
    --card-bg: #4a0000;
    --search-bg: #350000;
    --border-color: #8b0000;
    --primary-color: #ff3333;
    --primary-container-bg: #4a0000;
    --on-primary-container-color: #ffcccc;
    --secondary-container-bg: #5c0000;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #4a0000;
    --sh-text: #ffcccc;
    --sh-border: #8b0000;
    --sh-keyword: #ffffff;
    --sh-string: #ff8080;
    --sh-function: #ff4d4d;
    --sh-variable: #ffb3b3;
    --sh-comment: #7a0000;
    --sh-punctuation: #ffcccc;
}
html[data-theme-set="chroma-red"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #4a0000;
    --link-color: #cc0000;
    --heading-color: #800000;
    --tertiary-color: #ffe6e6;
    --card-bg: #fffafa;
    --search-bg: #ffffff;
    --border-color: #ffcccc;
    --primary-color: #d90000;
    --primary-container-bg: #fff0f0;
    --on-primary-container-color: #4a0000;
    --secondary-container-bg: #ffe6e6;
    --on-secondary-container-color: #800000;
    --sh-bg: #fffafa;
    --sh-text: #4a0000;
    --sh-border: #ffcccc;
    --sh-keyword: #cc0000;
    --sh-string: #800000;
    --sh-function: #a30000;
    --sh-variable: #ff4d4d;
    --sh-comment: #b3b3b3;
    --sh-punctuation: #4a0000;
}

html[data-theme-set="chroma-orange"][data-mode="dark"] {
    --bg-color: #3d1a00;
    --text-color: #ffe0cc;
    --link-color: #ff9933;
    --heading-color: #ffffff;
    --tertiary-color: #662c00;
    --card-bg: #4d2100;
    --search-bg: #3d1a00;
    --border-color: #8a3d00;
    --primary-color: #ff8000;
    --primary-container-bg: #4d2100;
    --on-primary-container-color: #ffe0cc;
    --secondary-container-bg: #662c00;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #4d2100;
    --sh-text: #ffe0cc;
    --sh-border: #8a3d00;
    --sh-keyword: #ffffff;
    --sh-string: #ffb380;
    --sh-function: #ff9933;
    --sh-variable: #ffd9bf;
    --sh-comment: #804000;
    --sh-punctuation: #ffe0cc;
}
html[data-theme-set="chroma-orange"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #4d2100;
    --link-color: #cc6600;
    --heading-color: #804000;
    --tertiary-color: #fff2e6;
    --card-bg: #fffaf5;
    --search-bg: #ffffff;
    --border-color: #ffd9bf;
    --primary-color: #cc6600;
    --primary-container-bg: #fff9f2;
    --on-primary-container-color: #4d2100;
    --secondary-container-bg: #fff2e6;
    --on-secondary-container-color: #804000;
    --sh-bg: #fffaf5;
    --sh-text: #4d2100;
    --sh-border: #ffd9bf;
    --sh-keyword: #cc6600;
    --sh-string: #804000;
    --sh-function: #b35900;
    --sh-variable: #ff8000;
    --sh-comment: #a1a1a1;
    --sh-punctuation: #4d2100;
}

html[data-theme-set="chroma-yellow"][data-mode="dark"] {
    --bg-color: #2b2b00;
    --text-color: #ffffcc;
    --link-color: #e6e600;
    --heading-color: #ffffff;
    --tertiary-color: #4d4d00;
    --card-bg: #333300;
    --search-bg: #2b2b00;
    --border-color: #808000;
    --primary-color: #ffff33;
    --primary-container-bg: #333300;
    --on-primary-container-color: #ffffcc;
    --secondary-container-bg: #4d4d00;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #333300;
    --sh-text: #ffffcc;
    --sh-border: #808000;
    --sh-keyword: #ffffff;
    --sh-string: #ffff80;
    --sh-function: #e6e600;
    --sh-variable: #ffffb3;
    --sh-comment: #666600;
    --sh-punctuation: #ffffcc;
}
html[data-theme-set="chroma-yellow"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #333300;
    --link-color: #888800;
    --heading-color: #555500;
    --tertiary-color: #ffffcc;
    --card-bg: #fffff5;
    --search-bg: #ffffff;
    --border-color: #e6e600;
    --primary-color: #888800;
    --primary-container-bg: #ffffed;
    --on-primary-container-color: #333300;
    --secondary-container-bg: #ffffcc;
    --on-secondary-container-color: #555500;
    --sh-bg: #fffff5;
    --sh-text: #333300;
    --sh-border: #e6e600;
    --sh-keyword: #888800;
    --sh-string: #555500;
    --sh-function: #666600;
    --sh-variable: #888800;
    --sh-comment: #999999;
    --sh-punctuation: #333300;
}

html[data-theme-set="chroma-green"][data-mode="dark"] {
    --bg-color: #002200;
    --text-color: #ccffcc;
    --link-color: #33ff33;
    --heading-color: #ffffff;
    --tertiary-color: #004d00;
    --card-bg: #003300;
    --search-bg: #002200;
    --border-color: #008000;
    --primary-color: #33ff33;
    --primary-container-bg: #003300;
    --on-primary-container-color: #ccffcc;
    --secondary-container-bg: #004d00;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #003300;
    --sh-text: #ccffcc;
    --sh-border: #008000;
    --sh-keyword: #ffffff;
    --sh-string: #80ff80;
    --sh-function: #33ff33;
    --sh-variable: #b3ffb3;
    --sh-comment: #006600;
    --sh-punctuation: #ccffcc;
}
html[data-theme-set="chroma-green"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #003300;
    --link-color: #008000;
    --heading-color: #004d00;
    --tertiary-color: #e6ffec;
    --card-bg: #f5fff7;
    --search-bg: #ffffff;
    --border-color: #b3ffc1;
    --primary-color: #008000;
    --primary-container-bg: #f0fff4;
    --on-primary-container-color: #003300;
    --secondary-container-bg: #e6ffec;
    --on-secondary-container-color: #004d00;
    --sh-bg: #f5fff7;
    --sh-text: #003300;
    --sh-border: #b3ffc1;
    --sh-keyword: #008000;
    --sh-string: #004d00;
    --sh-function: #006600;
    --sh-variable: #008000;
    --sh-comment: #a1a1a1;
    --sh-punctuation: #003300;
}

html[data-theme-set="chroma-blue"][data-mode="dark"] {
    --bg-color: #001a33;
    --text-color: #cce6ff;
    --link-color: #3399ff;
    --heading-color: #ffffff;
    --tertiary-color: #003366;
    --card-bg: #00264d;
    --search-bg: #001a33;
    --border-color: #004d99;
    --primary-color: #3399ff;
    --primary-container-bg: #00264d;
    --on-primary-container-color: #cce6ff;
    --secondary-container-bg: #003366;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #00264d;
    --sh-text: #cce6ff;
    --sh-border: #004d99;
    --sh-keyword: #ffffff;
    --sh-string: #80bfff;
    --sh-function: #3399ff;
    --sh-variable: #b3d9ff;
    --sh-comment: #0059b3;
    --sh-punctuation: #cce6ff;
}
html[data-theme-set="chroma-blue"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #00264d;
    --link-color: #0066cc;
    --heading-color: #003366;
    --tertiary-color: #e6f2ff;
    --card-bg: #f5faff;
    --search-bg: #ffffff;
    --border-color: #b3d9ff;
    --primary-color: #0066cc;
    --primary-container-bg: #f0f7ff;
    --on-primary-container-color: #00264d;
    --secondary-container-bg: #e6f2ff;
    --on-secondary-container-color: #003366;
    --sh-bg: #f5faff;
    --sh-text: #00264d;
    --sh-border: #b3d9ff;
    --sh-keyword: #0066cc;
    --sh-string: #003366;
    --sh-function: #004d99;
    --sh-variable: #0066cc;
    --sh-comment: #a1a1a1;
    --sh-punctuation: #00264d;
}

html[data-theme-set="chroma-indigo"][data-mode="dark"] {
    --bg-color: #1a0033;
    --text-color: #e6ccff;
    --link-color: #9933ff;
    --heading-color: #ffffff;
    --tertiary-color: #330066;
    --card-bg: #26004d;
    --search-bg: #1a0033;
    --border-color: #4d0099;
    --primary-color: #9933ff;
    --primary-container-bg: #26004d;
    --on-primary-container-color: #e6ccff;
    --secondary-container-bg: #330066;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #26004d;
    --sh-text: #e6ccff;
    --sh-border: #4d0099;
    --sh-keyword: #ffffff;
    --sh-string: #bf80ff;
    --sh-function: #9933ff;
    --sh-variable: #d9b3ff;
    --sh-comment: #5900b3;
    --sh-punctuation: #e6ccff;
}
html[data-theme-set="chroma-indigo"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #26004d;
    --link-color: #6600cc;
    --heading-color: #330066;
    --tertiary-color: #f2e6ff;
    --card-bg: #faf5ff;
    --search-bg: #ffffff;
    --border-color: #d9b3ff;
    --primary-color: #6600cc;
    --primary-container-bg: #f7f0ff;
    --on-primary-container-color: #26004d;
    --secondary-container-bg: #f2e6ff;
    --on-secondary-container-color: #330066;
    --sh-bg: #faf5ff;
    --sh-text: #26004d;
    --sh-border: #d9b3ff;
    --sh-keyword: #6600cc;
    --sh-string: #330066;
    --sh-function: #4d0099;
    --sh-variable: #6600cc;
    --sh-comment: #a1a1a1;
    --sh-punctuation: #26004d;
}

html[data-theme-set="chroma-violet"][data-mode="dark"] {
    --bg-color: #220022;
    --text-color: #ffccff;
    --link-color: #ff33ff;
    --heading-color: #ffffff;
    --tertiary-color: #4d004d;
    --card-bg: #330033;
    --search-bg: #220022;
    --border-color: #800080;
    --primary-color: #ff33ff;
    --primary-container-bg: #330033;
    --on-primary-container-color: #ffccff;
    --secondary-container-bg: #4d004d;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #330033;
    --sh-text: #ffccff;
    --sh-border: #800080;
    --sh-keyword: #ffffff;
    --sh-string: #ff80ff;
    --sh-function: #ff33ff;
    --sh-variable: #ffb3ff;
    --sh-comment: #660066;
    --sh-punctuation: #ffccff;
}
html[data-theme-set="chroma-violet"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #330033;
    --link-color: #800080;
    --heading-color: #4d004d;
    --tertiary-color: #ffebff;
    --card-bg: #fff5ff;
    --search-bg: #ffffff;
    --border-color: #ffb3ff;
    --primary-color: #800080;
    --primary-container-bg: #fff0ff;
    --on-primary-container-color: #330033;
    --secondary-container-bg: #ffebff;
    --on-secondary-container-color: #4d004d;
    --sh-bg: #fff5ff;
    --sh-text: #330033;
    --sh-border: #ffb3ff;
    --sh-keyword: #800080;
    --sh-string: #4d004d;
    --sh-function: #660066;
    --sh-variable: #800080;
    --sh-comment: #a1a1a1;
    --sh-punctuation: #330033;
}

/* =========================================
   2. BUILT-IN THEMES
   ========================================= */
/* --- Berry --- */
html[data-theme-set="berry"][data-mode="dark"] {
    --bg-color: #150024;
    --text-color: #ff4da6;
    --link-color: #6a5acd;
    --heading-color: #d187ff;
    --tertiary-color: #9932cc;
    --card-bg: #24003d;
    --search-bg: #150024;
    --border-color: #4b0082;
    --primary-color: #ff4da6;
    --primary-container-bg: #24003d;
    --on-primary-container-color: #ff4da6;
    --secondary-container-bg: #4b0082;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #24003d;
    --sh-text: #ff4da6;
    --sh-border: #4b0082;
    --sh-keyword: #ff4da6;
    --sh-string: #6a5acd;
    --sh-function: #d187ff;
    --sh-variable: #9932cc;
    --sh-comment: #9932cc;
    --sh-punctuation: #ff4da6;
}
html[data-theme-set="berry"][data-mode="light"] {
    --bg-color: #fff0f5;
    --text-color: #800040;
    --link-color: #663399;
    --heading-color: #c71585;
    --tertiary-color: #ba55d3;
    --card-bg: #ffffff;
    --search-bg: #fff0f5;
    --border-color: #ffb6c1;
    --primary-color: #663399;
    --primary-container-bg: #ffe6f2;
    --on-primary-container-color: #800040;
    --secondary-container-bg: #e6e6fa;
    --on-secondary-container-color: #4b0082;
    --sh-bg: #ffffff;
    --sh-text: #800040;
    --sh-border: #ffb6c1;
    --sh-keyword: #663399;
    --sh-string: #663399;
    --sh-function: #c71585;
    --sh-variable: #ba55d3;
    --sh-comment: #ba55d3;
    --sh-punctuation: #800040;
}

/* --- Blackout --- */
html[data-theme-set="blackout"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #ffffff;
    --link-color: #0091ea;
    --heading-color: #ffffff;
    --tertiary-color: #333333;
    --card-bg: #000000;
    --search-bg: #000000;
    --border-color: #333333;
    --primary-color: #0091ea;
    --primary-container-bg: #000000;
    --on-primary-container-color: #ffffff;
    --secondary-container-bg: #0a0a0a;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #000000;
    --sh-text: #ffffff;
    --sh-border: #666666;
    --sh-keyword: #0091ea;
    --sh-string: #0091ea;
    --sh-function: #ffffff;
    --sh-variable: #666666;
    --sh-comment: #666666;
    --sh-punctuation: #ffffff;
}
html[data-theme-set="blackout"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #000000;
    --link-color: #0091ea;
    --heading-color: #000000;
    --tertiary-color: #969696;
    --card-bg: #ffffff;
    --search-bg: #ffffff;
    --border-color: #969696;
    --primary-color: #0091ea;
    --primary-container-bg: #ffffff;
    --on-primary-container-color: #000000;
    --secondary-container-bg: #f8f8f8;
    --on-secondary-container-color: #000000;
    --sh-bg: #ffffff;
    --sh-text: #000000;
    --sh-border: #969696;
    --sh-keyword: #0091ea;
    --sh-string: #0091ea;
    --sh-function: #000000;
    --sh-variable: #969696;
    --sh-comment: #969696;
    --sh-punctuation: #000000;
}

/* --- Bluebonnet --- */
html[data-theme-set="bluebonnet"][data-mode="dark"] {
    --bg-color: #0b1026;
    --text-color: #f0f4f8;
    --link-color: #d946ef;
    --heading-color: #818cf8;
    --tertiary-color: #6b8c42;
    --card-bg: #161b3d;
    --search-bg: #0b1026;
    --border-color: #4338ca;
    --primary-color: #d946ef;
    --primary-container-bg: #161b3d;
    --on-primary-container-color: #f0f4f8;
    --secondary-container-bg: #312e81;
    --on-secondary-container-color: #e0e7ff;
    --sh-bg: #161b3d;
    --sh-text: #f0f4f8;
    --sh-border: #4338ca;
    --sh-keyword: #d946ef;
    --sh-string: #84cc16;
    --sh-function: #818cf8;
    --sh-variable: #a855f7;
    --sh-comment: #6366f1;
    --sh-punctuation: #f0f4f8;
}
html[data-theme-set="bluebonnet"][data-mode="light"] {
    --bg-color: #f8fafc;
    --text-color: #1e1b4b;
    --link-color: #2563eb;
    --heading-color: #312e81;
    --tertiary-color: #4d7c0f;
    --card-bg: #ffffff;
    --search-bg: #ffffff;
    --border-color: #bfdbfe;
    --primary-color: #2563eb;
    --primary-container-bg: #eff6ff;
    --on-primary-container-color: #1e3a8a;
    --secondary-container-bg: #dbeafe;
    --on-secondary-container-color: #172554;
    --sh-bg: #ffffff;
    --sh-text: #1e1b4b;
    --sh-border: #bfdbfe;
    --sh-keyword: #2563eb;
    --sh-string: #4d7c0f;
    --sh-function: #7c3aed;
    --sh-variable: #be185d;
    --sh-comment: #94a3b8;
    --sh-punctuation: #1e1b4b;
}

/* --- Corbs --- */
html[data-theme-set="corbs"][data-mode="dark"] {
    --bg-color: #14043a;
    --text-color: #f83a90;
    --link-color: #4493ef;
    --heading-color: #21daff;
    --tertiary-color: #ac3cf6;
    --card-bg: #190648;
    --search-bg: #14043a;
    --border-color: #4493ef;
    --primary-color: #4493ef;
    --primary-container-bg: #f61379;
    --on-primary-container-color: #16004f;
    --secondary-container-bg: #280873;
    --on-secondary-container-color: #e126c5;
    --sh-bg: #190648;
    --sh-text: #f83a90;
    --sh-border: #4493ef;
    --sh-comment: #6d5d9b;
    --sh-punctuation: #f83a90;
    --sh-keyword: #21daff;
    --sh-string: #4493ef;
    --sh-function: #ac3cf6;
    --sh-variable: #f61379;
    --sh-tag: #21daff;
}
html[data-theme-set="corbs"][data-mode="light"] {
    --bg-color: #f1ecff;
    --text-color: #3b0aa4;
    --link-color: #4493ef;
    --heading-color: #3389ed;
    --tertiary-color: #ac3cf6;
    --card-bg: #e9e2ff;
    --search-bg: #ffffff;
    --border-color: #3389ed;
    --primary-color: #3389ed;
    --primary-container-bg: #f61379;
    --on-primary-container-color: #16004f;
    --secondary-container-bg: #e9e2ff;
    --on-secondary-container-color: #280873;
    --sh-bg: #e9e2ff;
    --sh-text: #3b0aa4;
    --sh-border: #3389ed;
    --sh-comment: #897aa8;
    --sh-punctuation: #3b0aa4;
    --sh-keyword: #f61379;
    --sh-string: #3389ed;
    --sh-function: #ac3cf6;
    --sh-variable: #280873;
    --sh-tag: #f61379;
}

/* --- Cream --- */
html[data-theme-set="cream"][data-mode="dark"] {
    --bg-color: #f0f7f6;
    --text-color: #8b1852;
    --link-color: #ff016e;
    --heading-color: #da2f85;
    --tertiary-color: #d73364;
    --card-bg: #f2b6d4;
    --search-bg: #f0f7f6;
    --border-color: #da2f85;
    --primary-color: #ff016e;
    --primary-container-bg: #f2b6d4;
    --on-primary-container-color: #791547;
    --secondary-container-bg: #e5f1f0;
    --on-secondary-container-color: #da4572;
    --sh-bg: #f2b6d4;
    --sh-text: #8b1852;
    --sh-border: #da2f85;
    --sh-keyword: #ff016e;
    --sh-string: #ff016e;
    --sh-function: #da2f85;
    --sh-variable: #d73364;
    --sh-comment: #d73364;
    --sh-punctuation: #8b1852;
}
html[data-theme-set="cream"][data-mode="light"] {
    --bg-color: #f0f7f6;
    --text-color: #117e96;
    --link-color: #1abddf;
    --heading-color: #22c8e9;
    --tertiary-color: #1bdec7;
    --card-bg: #e5f1f0;
    --search-bg: #ffffff;
    --border-color: #22c8e9;
    --primary-color: #1abddf;
    --primary-container-bg: #b3f7ef;
    --on-primary-container-color: #0b5f6f;
    --secondary-container-bg: #e5f1f0;
    --on-secondary-container-color: #062f38;
    --sh-bg: #e5f1f0;
    --sh-text: #117e96;
    --sh-border: #22c8e9;
    --sh-keyword: #1abddf;
    --sh-string: #1abddf;
    --sh-function: #22c8e9;
    --sh-variable: #1bdec7;
    --sh-comment: #1bdec7;
    --sh-punctuation: #117e96;
}

/* --- Grayscale --- */
html[data-theme-set="grayscale"][data-mode="dark"] {
    --bg-color: #121212;
    --text-color: #d4d4d4;
    --link-color: #89CFF0;
    --heading-color: #ffffff;
    --tertiary-color: #808080;
    --card-bg: #1e1e1e;
    --search-bg: #121212;
    --border-color: #333333;
    --primary-color: #89CFF0;
    --primary-container-bg: #1e1e1e;
    --on-primary-container-color: #d4d4d4;
    --secondary-container-bg: #2d2d2d;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #1e1e1e;
    --sh-text: #d4d4d4;
    --sh-border: #333333;
    --sh-keyword: #89CFF0;
    --sh-string: #89CFF0;
    --sh-function: #ffffff;
    --sh-variable: #808080;
    --sh-comment: #808080;
    --sh-punctuation: #d4d4d4;
}
html[data-theme-set="grayscale"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #333333;
    --link-color: #4A90E2;
    --heading-color: #000000;
    --tertiary-color: #bbbbbb;
    --card-bg: #f8f9fa;
    --search-bg: #ffffff;
    --border-color: #e0e0e0;
    --primary-color: #4A90E2;
    --primary-container-bg: #f0f0f0;
    --on-primary-container-color: #000000;
    --secondary-container-bg: #eeeeee;
    --on-secondary-container-color: #000000;
    --sh-bg: #f8f9fa;
    --sh-text: #333333;
    --sh-border: #e0e0e0;
    --sh-keyword: #4A90E2;
    --sh-string: #4A90E2;
    --sh-function: #000000;
    --sh-variable: #bbbbbb;
    --sh-comment: #bbbbbb;
    --sh-punctuation: #333333;
}

/* --- Horizon --- */
html[data-theme-set="horizon"][data-mode="dark"] {
    --bg-color: #1C1E26;
    --text-color: #D5D8DA;
    --link-color: #25B0BC;
    --heading-color: #E95678;
    --tertiary-color: #FAB795;
    --card-bg: #232530;
    --search-bg: #16161C;
    --border-color: #2E303E;
    --primary-color: #E95678;
    --primary-container-bg: #232530;
    --on-primary-container-color: #D5D8DA;
    --secondary-container-bg: #2E303E;
    --on-secondary-container-color: #FAB795;
    --sh-bg: #232530;
    --sh-text: #D5D8DA;
    --sh-border: #2E303E;
    --sh-keyword: #E95678;
    --sh-string: #25B0BC;
    --sh-function: #FAB795;
    --sh-variable: #D5D8DA;
    --sh-comment: #2E303E;
    --sh-punctuation: #D5D8DA;
}
html[data-theme-set="horizon"][data-mode="light"] {
    --bg-color: #FDF0ED;
    --text-color: #1A1C23;
    --link-color: #1D8991;
    --heading-color: #DA103F;
    --tertiary-color: #F6661E;
    --card-bg: #FFFFFF;
    --search-bg: #FADAD1;
    --border-color: #F9CBBE;
    --primary-color: #DA103F;
    --primary-container-bg: #FADAD1;
    --on-primary-container-color: #1A1C23;
    --secondary-container-bg: #F9CBBE;
    --on-secondary-container-color: #DA103F;
    --sh-bg: #FFFFFF;
    --sh-text: #1A1C23;
    --sh-border: #F9CBBE;
    --sh-keyword: #DA103F;
    --sh-string: #1D8991;
    --sh-function: #F6661E;
    --sh-variable: #1A1C23;
    --sh-comment: #F9CBBE;
    --sh-punctuation: #1A1C23;
}

html[data-theme-set="matrix-neon"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #f61379;
    --link-color: #55ccff;
    --heading-color: #f61379;
    --tertiary-color: #D500F9;
    --card-bg: #000d14;
    --search-bg: #000000;
    --border-color: #006699;
    --primary-color: #00aaff;
    --primary-container-bg: #001a2b;
    --on-primary-container-color: #00aaff;
    --secondary-container-bg: #00334d;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #000d14;
    --sh-text: #00aaff;
    --sh-border: #006699;
    --sh-keyword: #ffffff;
    --sh-string: #55ccff;
    --sh-function: #00aaff;
    --sh-variable: #80d5ff;
    --sh-comment: #00334d;
    --sh-punctuation: #00aaff;
}
html[data-theme-set="matrix-neon"][data-mode="light"] {
    --bg-color: #f0faff;
    --text-color: #f61379;
    --link-color: #0077b3;
    --heading-color: #f61379;
    --tertiary-color: #D500F9;
    --card-bg: #ffffff;
    --search-bg: #f0faff;
    --border-color: #80d5ff;
    --primary-color: #0077b3;
    --primary-container-bg: #d6f2ff;
    --on-primary-container-color: #004466;
    --secondary-container-bg: #b3e5ff;
    --on-secondary-container-color: #001a2b;
    --sh-bg: #ffffff;
    --sh-text: #004466;
    --sh-border: #80d5ff;
    --sh-keyword: #0077b3;
    --sh-string: #0077b3;
    --sh-function: #0099e6;
    --sh-variable: #00aaff;
    --sh-comment: #949494;
    --sh-punctuation: #004466;
}

/* --- Mongo --- */
html[data-theme-set="mongo"][data-mode="dark"] {
    --bg-color: #001e2b;
    --text-color: #e8f1f2;
    --link-color: #00ed64;
    --heading-color: #ffffff;
    --tertiary-color: #00684a;
    --card-bg: #0b2d3e;
    --search-bg: #001e2b;
    --border-color: #1e3d4a;
    --primary-color: #00ed64;
    --primary-container-bg: #0b2d3e;
    --on-primary-container-color: #00ed64;
    --secondary-container-bg: #113647;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #06212e;
    --sh-text: #e8f1f2;
    --sh-border: #1e3d4a;
    --sh-keyword: #00ed64;
    --sh-string: #20ffb0;
    --sh-function: #ffffff;
    --sh-variable: #00ed64;
    --sh-comment: #5e7f8a;
    --sh-punctuation: #e8f1f2;
}
html[data-theme-set="mongo"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #001e2b;
    --link-color: #00684a;
    --heading-color: #001e2b;
    --tertiary-color: #00ed64;
    --card-bg: #f5f9fa;
    --search-bg: #ffffff;
    --border-color: #00ed64;
    --primary-color: #00684a;
    --primary-container-bg: #e3fcf7;
    --on-primary-container-color: #001e2b;
    --secondary-container-bg: #f0f5f5;
    --on-secondary-container-color: #00684a;
    --sh-bg: #f9fbfb;
    --sh-text: #001e2b;
    --sh-border: #cbece5;
    --sh-keyword: #00684a;
    --sh-string: #00ed64;
    --sh-function: #001e2b;
    --sh-variable: #014e3d;
    --sh-comment: #8faeb5;
    --sh-punctuation: #001e2b;
}

/* --- Newspaper --- */
html[data-theme-set="newspaper"][data-mode="dark"] {
    --bg-color: #141414;
    --text-color: #e0e0e0;
    --link-color: #f72685;
    --heading-color: #ffffff;
    --tertiary-color: #999999;
    --card-bg: #1a1a1a;
    --search-bg: #000000;
    --border-color: #5c5c5c;
    --primary-color: #f72685;
    --primary-container-bg: #1a1a1a;
    --on-primary-container-color: #e0e0e0;
    --secondary-container-bg: #252525;
    --on-secondary-container-color: #f72685;
    --sh-bg: #1a1a1a;
    --sh-text: #e0e0e0;
    --sh-border: #5c5c5c;
    --sh-keyword: #f72685;
    --sh-string: #f72685;
    --sh-function: #e0e0e0;
    --sh-variable: #5c5c5c;
    --sh-comment: #5c5c5c;
    --sh-punctuation: #e0e0e0;
}
html[data-theme-set="newspaper"][data-mode="light"] {
    --bg-color: #e0e0e0;
    --text-color: #0a0a0a;
    --link-color: #d60064;
    --heading-color: #000000;
    --tertiary-color: #5c5c5c;
    --card-bg: #f5f5f5;
    --search-bg: #ffffff;
    --border-color: #5c5c5c;
    --primary-color: #d60064;
    --primary-container-bg: #f5f5f5;
    --on-primary-container-color: #0a0a0a;
    --secondary-container-bg: #ffffff;
    --on-secondary-container-color: #d60064;
    --sh-bg: #f5f5f5;
    --sh-text: #0a0a0a;
    --sh-border: #5c5c5c;
    --sh-keyword: #f72685;
    --sh-string: #f72685;
    --sh-function: #0a0a0a;
    --sh-variable: #5c5c5c;
    --sh-comment: #5c5c5c;
    --sh-punctuation: #0a0a0a;
}

/* --- No Style --- */
html[data-theme-set="no-style"][data-mode="dark"] {
    --bg-color: #000000;
    --text-color: #ffffff;
    --link-color: #3391ff;
    --heading-color: #ffffff;
    --tertiary-color: #ffffff;
    --card-bg: #000000;
    --search-bg: #000000;
    --border-color: #ffffff;
    --primary-color: #3391ff;
    --primary-container-bg: #000000;
    --on-primary-container-color: #ffffff;
    --secondary-container-bg: #000000;
    --on-secondary-container-color: #ffffff;
    --sh-bg: #000000;
    --sh-text: #ffffff;
    --sh-border: #ffffff;
    --sh-keyword: #ffffff;
    --sh-string: #ffffff;
    --sh-function: #ffffff;
    --sh-variable: #ffffff;
    --sh-comment: #ffffff;
    --sh-punctuation: #ffffff;
}
html[data-theme-set="no-style"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #000000;
    --link-color: #0000EE;
    --heading-color: #000000;
    --tertiary-color: #000000;
    --card-bg: #ffffff;
    --search-bg: #ffffff;
    --border-color: #000000;
    --primary-color: #0000EE;
    --primary-container-bg: #ffffff;
    --on-primary-container-color: #000000;
    --secondary-container-bg: #ffffff;
    --on-secondary-container-color: #000000;
    --sh-bg: #ffffff;
    --sh-text: #000000;
    --sh-border: #000000;
    --sh-keyword: #000000;
    --sh-string: #000000;
    --sh-function: #000000;
    --sh-variable: #000000;
    --sh-comment: #000000;
    --sh-punctuation: #000000;
}

/* --- PORKY THEME (Neon Pig) --- */

/* DARK MODE: Deep Void Red background, Electric Cyan & Hot Pink Neon */
html[data-theme-set="porky"][data-mode="dark"] {
    --bg-color: #0f0204;                 /* The deep black/red void behind the sign */
    --text-color: #ffcce6;               /* Pale pink glow for readability */
    --link-color: #00f2ff;               /* Electric Cyan from the sunglasses rim */
    --heading-color: #ff0055;            /* Hot Neon Pink from the pig outline */
    --tertiary-color: #7a4dff;           /* Purple/Blue from the sunglasses lens */
    
    --card-bg: #1f050a;                  /* Slightly lighter dark red for cards */
    --search-bg: #0f0204;
    --border-color: #ff0055;             /* Neon Pink borders */
    
    --primary-color: #00f2ff;            /* Cyan action buttons */
    --primary-container-bg: #1f050a;     /* Sidebar background */
    --on-primary-container-color: #00f2ff; /* Cyan text on sidebar */
    
    --secondary-container-bg: #2d0814;   /* Blockquotes/Tags background */
    --on-secondary-container-color: #ffcce6;
    
    /* Syntax Highlighting */
    --sh-bg: #1f050a;
    --sh-text: #ffcce6;
    --sh-border: #ff0055;
    --sh-keyword: #00f2ff;               /* Cyan keywords */
    --sh-string: #ff80ab;                /* Pink strings */
    --sh-function: #ffffff;              /* White highlights */
    --sh-variable: #7a4dff;              /* Purple variables */
    --sh-comment: #9e9e9e;
    --sh-punctuation: #ff0055;
}

/* LIGHT MODE: Candy Shop Vibe - White/Pink background, Darker Pink/Teal text */
html[data-theme-set="porky"][data-mode="light"] {
    --bg-color: #fff0f5;                 /* Lavender Blush (Very pale pink) */
    --text-color: #4a0a18;               /* Dark Burgundy for high contrast text */
    --link-color: #008c9e;               /* Darker Teal for links (readable on white) */
    --heading-color: #d40045;            /* Deep Pink/Red headings */
    --tertiary-color: #5236a0;           /* Deep Purple accents */
    
    --card-bg: #ffffff;                  /* Clean white cards */
    --search-bg: #ffffff;
    --border-color: #ff80ab;             /* Soft pink borders */
    
    --primary-color: #008c9e;            /* Teal primary actions */
    --primary-container-bg: #ffffff;
    --on-primary-container-color: #d40045; /* Pink text on sidebar */
    
    --secondary-container-bg: #ffe0eb;   /* Light pink container for tags */
    --on-secondary-container-color: #4a0a18;
    
    /* Syntax Highlighting */
    --sh-bg: #ffffff;
    --sh-text: #4a0a18;
    --sh-border: #ff80ab;
    --sh-keyword: #008c9e;
    --sh-string: #d40045;
    --sh-function: #5236a0;
    --sh-variable: #d40045;
    --sh-comment: #999999;
    --sh-punctuation: #4a0a18;
}

/* --- Reef --- */
html[data-theme-set="reef"][data-mode="dark"] {
    --bg-color: #001e2b;
    --text-color: #00ffe5;
    --link-color: #ff5e7e;
    --heading-color: #00b8ff;
    --tertiary-color: #ffd900;
    --card-bg: #002b3d;
    --search-bg: #001e2b;
    --border-color: #004d6e;
    --primary-color: #00ffe5;
    --primary-container-bg: #002b3d;
    --on-primary-container-color: #00ffe5;
    --secondary-container-bg: #004d6e;
    --on-secondary-container-color: #ff5e7e;
    --sh-bg: #002b3d;
    --sh-text: #00ffe5;
    --sh-border: #004d6e;
    --sh-keyword: #00ffe5;
    --sh-string: #ff5e7e;
    --sh-function: #00b8ff;
    --sh-variable: #ffd900;
    --sh-comment: #ffd900;
    --sh-punctuation: #00ffe5;
}
html[data-theme-set="reef"][data-mode="light"] {
    --bg-color: #f0fbff;
    --text-color: #004d66;
    --link-color: #ff3366;
    --heading-color: #0099cc;
    --tertiary-color: #a28100;
    --card-bg: #ffffff;
    --search-bg: #f0fbff;
    --border-color: #b3e6ff;
    --primary-color: #ff3366;
    --primary-container-bg: #e0f7ff;
    --on-primary-container-color: #004d66;
    --secondary-container-bg: #b3e6ff;
    --on-secondary-container-color: #003344;
    --sh-bg: #ffffff;
    --sh-text: #004d66;
    --sh-border: #b3e6ff;
    --sh-keyword: #ff3366;
    --sh-string: #ff3366;
    --sh-function: #0099cc;
    --sh-variable: #a28100;
    --sh-comment: #a28100;
    --sh-punctuation: #004d66;
}

/* --- Reveal --- */
html[data-theme-set="reveal"][data-mode="dark"] {
    --bg-color: #091129;
    --text-color: #fefcfb;
    --link-color: #339ff4;
    --heading-color: #ec0a6f;
    --tertiary-color: #339ff4;
    --card-bg: #033c50;
    --search-bg: #091129;
    --border-color: #ec0a6f;
    --primary-color: #339ff4;
    --primary-container-bg: #033c50;
    --on-primary-container-color: #fefcfb;
    --secondary-container-bg: #061d33;
    --on-secondary-container-color: #ec0a6f;
    --sh-bg: #033c50;
    --sh-text: #fefcfb;
    --sh-border: #ec0a6f;
    --sh-keyword: #339ff4;
    --sh-string: #339ff4;
    --sh-function: #ec0a6f;
    --sh-variable: #ec0a6f;
    --sh-comment: #ec0a6f;
    --sh-punctuation: #fefcfb;
}
html[data-theme-set="reveal"][data-mode="light"] {
    --bg-color: #fefcfb;
    --text-color: #091129;
    --link-color: #0077cc;
    --heading-color: #f72685;
    --tertiary-color: #339ff4;
    --card-bg: #ebfaff;
    --search-bg: #ffffff;
    --border-color: #f72685;
    --primary-color: #0077cc;
    --primary-container-bg: #ebfaff;
    --on-primary-container-color: #091129;
    --secondary-container-bg: #ffffff;
    --on-secondary-container-color: #f72685;
    --sh-bg: #ebfaff;
    --sh-text: #091129;
    --sh-border: #f72685;
    --sh-keyword: #339ff4;
    --sh-string: #339ff4;
    --sh-function: #f72685;
    --sh-variable: #f72685;
    --sh-comment: #f72685;
    --sh-punctuation: #091129;
}

/* --- Snazzy --- */
html[data-theme-set="snazzy"][data-mode="dark"] {
    --bg-color: #282a36;
    --text-color: #eff0eb;
    --link-color: #ff6ac1;
    --heading-color: #9aedfe;
    --tertiary-color: #f3f99d;
    --card-bg: #34353e;
    --search-bg: #282a36;
    --border-color: #57c7ff;
    --primary-color: #ff6ac1;
    --primary-container-bg: #34353e;
    --on-primary-container-color: #eff0eb;
    --secondary-container-bg: #44454d;
    --on-secondary-container-color: #57c7ff;
    --sh-bg: #34353e;
    --sh-text: #eff0eb;
    --sh-border: #57c7ff;
    --sh-keyword: #ff6ac1;
    --sh-string: #ff6ac1;
    --sh-function: #9aedfe;
    --sh-variable: #f3f99d;
    --sh-comment: #f3f99d;
    --sh-punctuation: #eff0eb;
}
html[data-theme-set="snazzy"][data-mode="light"] {
    --bg-color: #fafafa;
    --text-color: #5e5e5e;
    --link-color: #ff5c57;
    --heading-color: #282a36;
    --tertiary-color: #9aedfe;
    --card-bg: #ffffff;
    --search-bg: #eff0eb;
    --border-color: #e5e5e6;
    --primary-color: #ff5c57;
    --primary-container-bg: #eff0eb;
    --on-primary-container-color: #5e5e5e;
    --secondary-container-bg: #e2e4e5;
    --on-secondary-container-color: #282a36;
    --sh-bg: #ffffff;
    --sh-text: #5e5e5e;
    --sh-border: #e5e5e6;
    --sh-keyword: #ff5c57;
    --sh-string: #ff5c57;
    --sh-function: #282a36;
    --sh-variable: #9aedfe;
    --sh-comment: #9aedfe;
    --sh-punctuation: #5e5e5e;
}

/* --- Sunset --- */
html[data-theme-set="sunset"][data-mode="dark"] {
    --bg-color: #2e001f;
    --text-color: #ffbd59;
    --link-color: #ff66c4;
    --heading-color: #ff5e00;
    --tertiary-color: #ff0055;
    --card-bg: #45002e;
    --search-bg: #2e001f;
    --border-color: #70004b;
    --primary-color: #ffbd59;
    --primary-container-bg: #45002e;
    --on-primary-container-color: #ffbd59;
    --secondary-container-bg: #70004b;
    --on-secondary-container-color: #ffe6c7;
    --sh-bg: #45002e;
    --sh-text: #ffbd59;
    --sh-border: #70004b;
    --sh-keyword: #ffbd59;
    --sh-string: #ff66c4;
    --sh-function: #ff5e00;
    --sh-variable: #ff0055;
    --sh-comment: #ff0055;
    --sh-punctuation: #ffbd59;
}
html[data-theme-set="sunset"][data-mode="light"] {
    --bg-color: #fff9e6;
    --text-color: #993300;
    --link-color: #cc0066;
    --heading-color: #e65c00;
    --tertiary-color: #ffcc00;
    --card-bg: #ffffff;
    --search-bg: #fff9e6;
    --border-color: #ffcc99;
    --primary-color: #cc0066;
    --primary-container-bg: #ffe6cc;
    --on-primary-container-color: #993300;
    --secondary-container-bg: #ffcc99;
    --on-secondary-container-color: #660033;
    --sh-bg: #ffffff;
    --sh-text: #993300;
    --sh-border: #ffcc99;
    --sh-keyword: #cc0066;
    --sh-string: #cc0066;
    --sh-function: #e65c00;
    --sh-variable: #ffcc00;
    --sh-comment: #ffcc00;
    --sh-punctuation: #993300;
}

/* --- Vice --- */
html[data-theme-set="vice"][data-mode="dark"] {
    --bg-color: #100b29;
    --text-color: #ff7df9;
    --link-color: #23d1fa;
    --heading-color: #f5ce42;
    --tertiary-color: #ff0055;
    --card-bg: #1b123d;
    --search-bg: #100b29;
    --border-color: #ff7df9;
    --primary-color: #23d1fa;
    --primary-container-bg: #1b123d;
    --on-primary-container-color: #23d1fa;
    --secondary-container-bg: #2b1d52;
    --on-secondary-container-color: #ff7df9;
    --sh-bg: #1b123d;
    --sh-text: #ff7df9;
    --sh-border: #ff7df9;
    --sh-keyword: #23d1fa;
    --sh-string: #23d1fa;
    --sh-function: #f5ce42;
    --sh-variable: #ff0055;
    --sh-comment: #ff0055;
    --sh-punctuation: #ff7df9;
}
html[data-theme-set="vice"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #8b006d;
    --link-color: #00a8cc;
    --heading-color: #ff007f;
    --tertiary-color: #ffd700;
    --card-bg: #fdf2f9;
    --search-bg: #ffffff;
    --border-color: #ff9ee3;
    --primary-color: #00a8cc;
    --primary-container-bg: #fdf2f9;
    --on-primary-container-color: #8b006d;
    --secondary-container-bg: #e0f7fa;
    --on-secondary-container-color: #0088a3;
    --sh-bg: #fdf2f9;
    --sh-text: #8b006d;
    --sh-border: #ff9ee3;
    --sh-keyword: #00a8cc;
    --sh-string: #00a8cc;
    --sh-function: #ff007f;
    --sh-variable: #ffd700;
    --sh-comment: #ffd700;
    --sh-punctuation: #8b006d;
}

/* --- Winter Is Coming --- */
html[data-theme-set="winter-is-coming"][data-mode="dark"] {
    --bg-color: #011627;
    --text-color: #a599e9;
    --link-color: #5f7e97;
    --heading-color: #7eebff;
    --tertiary-color: #d19a66;
    --card-bg: #0b2942;
    --search-bg: #011627;
    --border-color: #1d3b53;
    --primary-color: #7eebff;
    --primary-container-bg: #0b2942;
    --on-primary-container-color: #a599e9;
    --secondary-container-bg: #0d2538;
    --on-secondary-container-color: #99c794;
    --sh-bg: #0b2942;
    --sh-text: #a599e9;
    --sh-border: #1d3b53;
    --sh-keyword: #7eebff;
    --sh-string: #5f7e97;
    --sh-function: #7eebff;
    --sh-variable: #d19a66;
    --sh-comment: #5f7e97;
    --sh-punctuation: #a599e9;
}
html[data-theme-set="winter-is-coming"][data-mode="light"] {
    --bg-color: #ffffff;
    --text-color: #235e9a;
    --link-color: #005cc5;
    --heading-color: #0444ac;
    --tertiary-color: #a87e53;
    --card-bg: #f3f3f3;
    --search-bg: #ffffff;
    --border-color: #dcdcdc;
    --primary-color: #005cc5;
    --primary-container-bg: #f3f3f3;
    --on-primary-container-color: #235e9a;
    --secondary-container-bg: #e0e0e0;
    --on-secondary-container-color: #2f86d2;
    --sh-bg: #f3f3f3;
    --sh-text: #235e9a;
    --sh-border: #dcdcdc;
    --sh-keyword: #005cc5;
    --sh-string: #005cc5;
    --sh-function: #0444ac;
    --sh-variable: #a87e53;
    --sh-comment: #a87e53;
    --sh-punctuation: #235e9a;
}

/* --- Yolo --- */
html[data-theme-set="yolo"][data-mode="dark"] {
    --bg-color: #060823;
    --text-color: #cacef7;
    --link-color: #4ffa7b;
    --heading-color: #f9246c;
    --tertiary-color: #3b6afe;
    --card-bg: #251359;
    --search-bg: #060823;
    --border-color: #bf3efd;
    --primary-color: #4ffa7b;
    --primary-container-bg: #251359;
    --on-primary-container-color: #bf3efd;
    --secondary-container-bg: #251359;
    --on-secondary-container-color: #bf3efd;
    --sh-bg: #251359;
    --sh-text: #cacef7;
    --sh-border: #bf3efd;
    --sh-keyword: #4ffa7b;
    --sh-string: #4ffa7b;
    --sh-function: #f9246c;
    --sh-variable: #3b6afe;
    --sh-comment: #3b6afe;
    --sh-punctuation: #cacef7;
}
html[data-theme-set="yolo"][data-mode="light"] {
    --bg-color: #dee1f7;
    --text-color: #060823;
    --link-color: #00ce35;
    --heading-color: #1042ff;
    --tertiary-color: #f9246c;
    --card-bg: #ebefff;
    --search-bg: #ffffff;
    --border-color: #bf3efd;
    --primary-color: #00ce35;
    --primary-container-bg: #ebefff;
    --on-primary-container-color: #7e15ae;
    --secondary-container-bg: #ebefff;
    --on-secondary-container-color: #5d0983;
    --sh-bg: #ebefff;
    --sh-text: #060823;
    --sh-border: #bf3efd;
    --sh-keyword: #00ce35;
    --sh-string: #00ce35;
    --sh-function: #1042ff;
    --sh-variable: #f9246c;
    --sh-comment: #f9246c;
    --sh-punctuation: #060823;
}

/* 2. Syntax Highlighting */
/* ===========================================================
   MASTER SYNTAX TEMPLATE (Append to Theme Variables)
   =========================================================== */

/* 1. The Container */
pre {
  background: var(--sh-bg);
  color: var(--sh-text);
  font-family: var(--font-family-monospace);
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid var(--sh-border);
  line-height: 1.5;
  tab-size: 4;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 2. The Code Text */
code[class*="language-"],
pre code {
  color: inherit;
  background: transparent;
  font-family: inherit;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  hyphens: none;
}

/* 3. Tokens */

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { 
  color: var(--sh-comment); 
  font-style: italic;
  opacity: 0.8;
}

/* Punctuation */
.token.punctuation { 
  color: var(--sh-punctuation); 
  opacity: 0.8;
}

/* Namespace */
.token.namespace { 
  opacity: .7; 
}

/* Keywords & Tags */
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted,
.token.keyword { 
  color: var(--sh-keyword); 
}

/* Strings & URLs */
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.url,
.token.inserted { 
  color: var(--sh-string); 
}

/* Entities & Functions */
.token.entity,
.token.function,
.token.class-name { 
  color: var(--sh-function); 
}

/* Variables & Regex */
.token.atrule,
.token.attr-value,
.token.regex,
.token.important,
.token.variable { 
  color: var(--sh-variable); 
}

/* Utilities */
.token.important,
.token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* 3. Main Layout */
/* =========================================
   2. TYPOGRAPHY MAPPING
   ========================================= */

/* Primary Font (Space Mono) */
html,
body {
    font-family: var(--font-family-primary);
}

/* Secondary Font (Montserrat) */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
th,
ul,
ol,
.theme-select,
.theme-btn {
    font-family: var(--font-family-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-top: .5em;
    margin-bottom: 0.5em;
    color: var(--heading-color);
    /* Large scroll margin to clear Header + TOC on all devices */
    scroll-margin-top: 190px;
}

/* Monospace Font (Source Code Pro) */
code,
pre,
.logo,
#search-input {
    font-family: var(--font-family-monospace);
}

/* =========================================
   3. GLOBAL STYLES & VARIABLES
   ========================================= */
:root {
    --sidebar-width: 280px;
    --toc-width: 250px;
    --header-height: 73px;
    /* Desktop Header Height */
    --header-height-mobile: 130px;
    /* Fallback for mobile */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    overflow-x: hidden;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* --- Header Layout (STICKY) --- */
header {
    background-color: var(--bg-color);
    transition: border-color var(--transition-speed);
    position: sticky;
    top: 0;
    z-index: 1000;
    /* border-bottom: 1px solid var(--border-color); */
    width: 100%;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
}

/* =========================================
   LOGO & SEARCH
   ========================================= */

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.logo-link:hover {
    transform: scale(1.05);
}

.site-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--card-bg);
}

.search-container {
    flex-grow: 1;
    position: relative;
    max-width: 600px;
}

#search-input {
    width: 100%;
    background: var(--secondary-container-bg);
    border: 1px solid var(--secondary-container-bg);
    color: var(--text-color);
    padding: 8px 15px;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.2s, background-color var(--transition-speed);
}

#search-input:focus {
    outline: none;
}

/* FIX FOR SEARCH RESULTS LAYOUT */
/* Forces search results to take the first slot in Flex/Grid layouts, 
   ensuring it replaces content on the left instead of swapping with TOC */
#search-results-wrapper {
    order: -1;
    width: 100%;
}

/* Javascript Generated Search Styles (Refactored from Inline) */
.search-result-tags {
    margin-top: 0.5rem;
    font-size: 0.8em;
}

.search-result-tag {
    pointer-events: none;
}

.search-result-header h2 {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.3;
}

/* Theme Controls */
.theme-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Dropdown Styling */
.theme-select {
    background: var(--secondary-container-bg);
    color: var(--text-color);
    border: 1px solid var(--secondary-container-bg);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: right 12px center;
    padding: 8px 32px 8px 12px;
}

.theme-select:focus {
    outline: none;
    border-color: var(--secondary-container-bg);
}

.theme-btn {
    white-space: nowrap;
    padding: 8px 16px;
    cursor: pointer;
    background: var(--secondary-container-bg);
    border: 1px solid var(--secondary-container-bg);
    color: var(--on-secondary-container-color);
    border-radius: 6px;
}

.theme-btn:hover {
    background: var(--on-secondary-container-color);
    color: var(--secondary-container-bg);
    border: 1px solid var(--on-secondary-container-color);
}

/* =========================================
   MAIN CONTENT & LAYOUT DEFAULTS
   ========================================= */
main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
    min-height: 60vh;
}

/* .post-content {
    padding-top: .25rem;
} */

footer {
    padding: 20px;
    /* border-top: 1px solid var(--border-color); */
    text-align: center;
    margin-top: 40px;
    color: var(--tertiary-color);
}

/* =========================================
   COMPONENTS
   ========================================= */
/* Add to style.css */
.post-title {
    margin-bottom: 0.5rem; /* Space between title and date */
    line-height: 1.2;
}

.post-title-date {
    display: block;
    margin-bottom: .5rem; /* Space between date and body text */
    font-family: var(--font-family-monospace); /* Looks cool as monospace */
    color: var(--tertiary-color)
}

.post-list,
.simple-list {
    list-style: none;
    padding: 0;
}

.post-item,
.simple-item {
    background: var(--card-bg);
    border: 1px solid var(--card-bg);
    border-radius: 6px;
    margin-bottom: 20px;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-item:hover,
.simple-item:hover {
    background: var(--bg-color);
    border: 1px solid var(--bg-color);
}

.post-header,
.simple-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

/* UPDATED: Added font-size: 1.3rem to replace inline style */
.post-header h2,
.simple-header h2 {
    margin: 0;
    line-height: 1.3;
    font-size: 1.3rem;
}

.post-date,
.simple-date {
    font-size: 1rem;
    white-space: nowrap;
    margin-left: 1rem;
    color: var(--tertiary-color);
}

.post-item p,
.simple-item p {
    margin: 0;
    margin-bottom: 0.8rem;
}

/* Tag Components & Pills */
.tag-list {
    margin-bottom: 40px;
}

.tag-section {
    margin-bottom: 60px;
}

.tag-count {
    opacity: 0.8;
    font-size: 0.85em;
    margin-left: 4px;
}

.tag-list a,
.post-tags a,
.tag:not(.token) {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 50px;
    background-color: var(--heading-color);
    color: var(--bg-color);
    border: 1px solid var(--heading-color);
    font-family: var(--font-family-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    margin: 4px 6px 4px 0;
    transition: transform 0.2s ease, filter 0.2s;
}

.tag-list a:hover,
.post-tags a:hover,
.tag:not(.token):hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    text-decoration: none;
    cursor: pointer;
}

.tag-list a:visited,
.post-tags a:visited {
    color: var(--bg-color);
}

.pagination {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

hr {
    border: 0;
    border-bottom: 1px dashed var(--tertiary-color);
    margin: 2rem 0;
}

blockquote {
    border-left: 0.25rem solid var(--tertiary-color);
    background-color: var(--secondary-container-bg);
    color: var(--on-secondary-container-color);
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    font-style: italic;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

blockquote p {
    margin: 0;
}

blockquote h1,
blockquote h2,
blockquote h3 {
    color: var(--on-secondary-container-color);
}

:not(pre)>code {
    color: var(--heading-color);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 2rem 0;
    font-size: 1rem;
    text-align: left;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--heading-color);
}

.table-wrapper {
    overflow-x: auto;
}

thead tr {
    background-color: var(--heading-color);
}

th {
    background-color: var(--heading-color);
    color: var(--bg-color);
    font-family: var(--font-family-secondary);
    font-weight: 800;
    padding: 12px 15px;
    border-bottom: 1px solid var(--heading-color);
}

td {
    padding: 12px 15px;
    font-family: var(--font-family-monospace);
    color: var(--text-color);
    border-bottom: 1px solid var(--heading-color);
    border-right: 1px solid var(--heading-color);
}

td:last-child {
    border-right: none;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
    cursor: default;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Gallery Specifics */
.gallery-title {
    margin-bottom: 2rem;
}

.code-wrapper {
    margin: 2rem 0;
    border-radius: 8px;
    border: 1px solid var(--bg-color);
    background-color: var(--card-bg);
    overflow: hidden;
}

.code-wrapper pre {
    margin: 0;
    border: none;
    border-top: 1px solid var(--border-color);
    border-radius: 0;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-family: var(--font-family-secondary);
    font-size: 0.85rem;
}

.code-lang {
    font-weight: bold;
    color: var(--text-color);
    opacity: 0.8;
}

.code-actions {
    display: flex;
    gap: 8px;
}

.code-actions button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.6;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.code-actions button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.code-wrapper.collapsed {
    border-bottom: 1px solid var(--border-color);
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin: 2rem 0;
}

.image-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform 0.2s, filter 0.2s;
    border: 1px solid var(--bg-color);
    display: block;
}

.image-grid img:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
    border-color: var(--link-color);
}

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

#lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    cursor: zoom-out;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

#lightbox.active {
    display: flex;
    opacity: 1;
}

#lightbox.active img {
    transform: scale(1);
}

/* =========================================
   SIDEBAR & NAV (Mobile Base)
   ========================================= */
.nav-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

#menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 5px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

#menu-btn:hover {
    transform: scale(1.1);
    color: var(--link-color);
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background-color: var(--primary-container-bg);
    color: var(--on-primary-container-color);
    /* border-right: 1px solid var(--border-color); */
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
}

#sidebar.active {
    transform: translateX(0);
}

.sidebar-header {
    flex-shrink: 0;
    margin-bottom: 10px;
}

.logo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#close-sidebar {
    background: transparent;
    border: none;
    color: var(--on-primary-container-color);
    cursor: pointer;
}

.nav-link {
    display: block;
    padding: 8px 10px;
    color: var(--on-primary-container-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    font-family: var(--font-family-secondary);
    transition: color 0.2s;
    border-radius: 4px;
}

.nav-link:hover,
.nav-link.active {
    color: var(--link-color);
    background-color: rgba(255, 255, 255, 0.05);
}

/* .sidebar-separator {
    height: 1px;
    background-image: linear-gradient(to right, var(--on-primary-container-color) 40%, transparent 40%);
    background-size: 6px 1px; background-repeat: repeat-x; margin: 1rem 0; opacity: 0.3;
} */
.sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 10px;
}

#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* =========================================
   TOC STYLES (Inline & Side)
   ========================================= */
.toc-col {
    display: none;
}

.toc-sticky-wrapper {
    position: sticky;
    top: 100px;
    max-height: 80vh;
    overflow-y: auto;
    background-color: transparent;
    /* border-left: 1px solid var(--border-color); */
    padding-left: 1rem;
}

/* --- Sticky Inline TOC (The "Bar" Style) --- */
.inline-toc {
    position: sticky;
    top: 73px;
    z-index: 900;

    background-color: var(--bg-color);
    /* border-bottom: 1px solid var(--border-color); */
    border-radius: 0;
    /* border-top: none; border-left: none; border-right: none; */
    border: none;

    /* margin-bottom: 2rem; */
    width: auto;
}

/* Background flap to hide scrolling text behind header gap */
.inline-toc::before {
    content: "";
    display: block;
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: var(--bg-color);
    z-index: -1;
}

.inline-toc-summary {
    padding: 10px 15px;
    font-family: var(--font-family-secondary);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    background-color: var(--primary-container-bg);
    border-radius: 6px;
}

.inline-toc-summary::-webkit-details-marker {
    display: none;
}

.inline-toc-summary:hover {
    background-color: var(--link-color);
}

.chevron {
    transition: transform 0.3s;
}

.inline-toc[open] .chevron {
    transform: rotate(180deg);
}

#inline-toc-list {
    padding: 10px 15px;
    /* border-top: 1px solid var(--border-color); */
    background-color: var(--bg-color);
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    list-style: none;
}

#toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#inline-toc-list li,
#toc-list li {
    margin-bottom: 0.5rem;
}

#inline-toc-list a,
#toc-list a {
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s;
    display: block;
    line-height: 1.4;
}

#inline-toc-list a:hover,
#toc-list a:hover,
#toc-list a.active {
    opacity: 1;
    color: var(--link-color);
    font-weight: bold;
}

.toc-h3 a {
    padding-left: 15px;
    font-size: 0.85rem;
}

.toc-h4 a {
    padding-left: 30px;
    font-size: 0.8rem;
}

.toc-header {
    font-family: var(--font-family-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tertiary-color);
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: bold;
}

.video-container,
.slide-container {
    position: relative;
    width: 100%;
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

.video-container iframe,
.slide-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.gist-wrapper {
    margin: 2rem 0;
    width: 100%;
    overflow-x: auto;
}

body .gist-wrapper table {
    border-collapse: separate;
    background: transparent;
}

body .gist-wrapper .gist-data {
    background: #fff;
}


/* =========================================
   MEDIA QUERIES (BREAKPOINTS)
   ========================================= */

/* --- Mobile / Tablet (Default < 1024px) --- */
@media (max-width: 1023px) {
    .site-nav {
        flex-wrap: wrap;
        padding: 1rem;
        gap: 1rem;
    }

    .nav-left {
        order: 1;
    }

    .theme-controls {
        order: 2;
        margin-left: auto;
    }

    .search-container {
        order: 3;
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
        margin-top: 0.5rem;
    }

    main.layout-with-toc {
        display: block;
    }

    .inline-toc {
        display: block;
        /* Fallback for when JS is slow or disabled */
        top: 156px;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/* --- LG: Desktop Sidebar Mode (>= 1024px) --- */
@media (min-width: 1024px) {

    .sidebar {
        transform: translateX(0);
        box-shadow: none;
        z-index: 100;
        /* border-right: 1px solid var(--border-color); */
    }

    #close-sidebar {
        display: none;
    }

    #sidebar-overlay {
        display: none !important;
    }

    header {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
    }

    /* --- ADD THIS BLOCK TO ALIGN HEADER WITH CONTENT --- */
    .site-nav {
        /* Matches the 3rem horizontal padding of 'main' below */
        padding-left: 3rem;
        padding-right: 3rem;
    }

    /* -------------------------------------------------- */

    header .nav-left {
        display: none;
    }

    .search-container {
        margin-left: 0;
    }

    main {
        margin-left: var(--sidebar-width);
        margin-right: 0;
        width: auto;
        max-width: none;
        margin-top: 0;
        padding: 0 3rem 2rem 3rem;
    }

    footer {
        margin-left: var(--sidebar-width);
    }

    .toc-col {
        display: none;
    }

    .inline-toc {
        display: block;
        top: 73px;
        margin-left: -3rem;
        margin-right: -3rem;
        padding-left: 3rem;
        padding-right: 3rem;
        padding-bottom: 1.5rem;
    }
}

/* --- XL: Widescreen Mode (>= 1280px) --- */
@media (min-width: 1280px) {

    /* Allow main to be wider when we have a TOC */
    main.main-expanded {
        max-width: 1400px;
        padding: 1rem 3rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        scroll-margin-top: 100px;
    }

    /* Apply Grid to the Wrapper, not just Main */
    .layout-with-toc {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--toc-width);
        gap: 3rem;
        width: 100%;
    }

    .inline-toc {
        display: none;
    }

    .toc-col {
        display: block;
    }
}

/* 4. Gallery & Portfolio */
/* src/_includes/css/gallery.css */

.gallery-container {
  width: 100%;
  max-width: var(--max-width, 1200px); 
  margin: 0 auto;
  padding: 1rem;
}

/* --- MASONRY GRID (CSS Columns) --- */
.masonry-grid {
  column-count: 1; 
  column-gap: 1.5rem; 
  transition: all 0.3s ease;
}

@media (min-width: 600px) {
  .masonry-grid { column-count: 2; }
}

@media (min-width: 1000px) {
  .masonry-grid { column-count: 3; }
}

@media (min-width: 1400px) {
  .masonry-grid { column-count: 4; }
}

/* --- GALLERY ITEMS --- */
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  border: none; 
  border-radius: 8px; 
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: zoom-in; 
}

.gallery-item:hover {
  transform: translateY(-4px);
  /* box-shadow: 0 10px 20px rgba(0,0,0, 0.15); */
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto; 
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* --- CAPTION / OVERLAY (On Grid Item) --- */
.gallery-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  padding: 20px 10px 10px 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; 
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item .overlay span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: bold;
}

/* --- src/_includes/css/gallery.css (Replace the bottom section) --- */

/* --- src/_includes/css/gallery.css (Replace the bottom section) --- */

/* LIGHTBOX OVERLAY */
#lightbox {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* The Main Background: 90% Theme Color, 10% Transparent */
  background: color-mix(in srgb, var(--bg-color, black) 90%, transparent);
  
  display: none; 
  justify-content: center;
  align-items: center;
  
  opacity: 0;
  transition: opacity 0.3s ease;
}

#lightbox.active {
  display: flex;
  opacity: 1;
}

/* Content Wrapper */
.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  
  /* Flex column forces caption BELOW image and centers it */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 80vh; 
  border: none; 
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  object-fit: contain;
  
  /* NEW: Tells the user that clicking will close/shrink the image */
  cursor: zoom-out;
}

.lightbox-caption {
  /* Text Color: Adapts to theme */
  color: var(--heading-color, white); 
  
  margin-top: 1rem;
  font-family: var(--font-family-secondary);
  font-size: 1.1rem;
  
  /* UPDATED: Fully transparent so it blends perfectly with the overlay */
  background: transparent;
  
  padding: 0.5rem 1rem;
  text-align: center;
}

/* Navigation Buttons */
.lightbox-nav,
.lightbox-close {
  background: none;
  border: none;
  
  /* Button Color */
  color: var(--heading-color, white); 
  
  font-size: 3rem;
  cursor: pointer;
  position: absolute;
  padding: 0 20px;
  transition: color 0.2s;
  z-index: 10000;
  user-select: none;
}

/* Focus/Hover States */
.lightbox-nav:focus,
.lightbox-close:focus {
  outline: none;
  color: var(--primary-color, #007bff);
}

.lightbox-nav:hover,
.lightbox-close:hover {
  color: var(--primary-color, #007bff);
}

.lightbox-close {
  top: 20px;
  right: 30px;
  font-size: 4rem;
  line-height: 0.5;
}

.lightbox-nav.prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-nav.next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .lightbox-nav {
    font-size: 2rem;
    padding: 0 10px;
  }
  .lightbox-nav.prev { left: 5px; }
  .lightbox-nav.next { right: 5px; }
  .lightbox-image { max-height: 70vh; }
}