:root {
    --darkslate-50: #f7f7f7;
    --darkslate-100: #e3e3e3;
    --darkslate-200: #c9c9c9;
    --darkslate-300: #6b6b6b;
    --darkslate-400: #383838;
    --darkslate-500: #171717;
    --darkslate-600: #141414;
    --darkslate-700: #111111;
    --darkslate-800: #0e0e0e;
    --darkslate-900: #0b0b0b;

    --primary-100: #f9cdd3;
    --primary-200: #f3a3aa;
    --primary-300: #ec7981;
    --primary-400: #e64f59;
    --primary-500: #e63946;
    --primary-600: #cf2f3d;
    --primary-700: #b82534;
    --primary-800: #a01b2b;
    --primary-900: #891321;
}

.yellow-theme {
    --primary-100: #fff9c4;
    --primary-200: #fff59d;
    --primary-300: #fff176;
    --primary-400: #ffee58;
    --primary-500: #ffeb3b;
    --primary-600: #fdd835;
    --primary-700: #fbc02d;
    --primary-800: #f9a825;
    --primary-900: #f57f17;
}

.green-theme {
    --primary-100: #e8f5e9;
    --primary-200: #c8e6c9;
    --primary-300: #a5d6a7;
    --primary-400: #81c784;
    --primary-500: #66bb6a;
    --primary-600: #4caf50;
    --primary-700: #43a047;
    --primary-800: #388e3c;
    --primary-900: #2e7d32;
}

.blue-theme {
    --primary-100: #bbdefb;
    --primary-200: #90caf9;
    --primary-300: #64b5f6;
    --primary-400: #42a5f5;
    --primary-500: #2196f3;
    --primary-600: #1e88e5;
    --primary-700: #1976d2;
    --primary-800: #1565c0;
    --primary-900: #0d47a1;
}

.purple-theme {
    --primary-100: #e1bee7;
    --primary-200: #ce93d8;
    --primary-300: #ba68c8;
    --primary-400: #ab47bc;
    --primary-500: #9c27b0;
    --primary-600: #8e24aa;
    --primary-700: #7b1fa2;
    --primary-800: #6a1b9a;
    --primary-900: #4a148c;
}

html {
    transition: background-color 0.5s ease, color 0.5s ease;
}

body:before {
    --line-color: var(--primary-500);
    opacity: 0.4;
    --line-size: 80px;
    content: "";
    height: 100vh;
    width: 101vw;
    position: fixed;
    background: linear-gradient(90deg, var(--line-color) 1px, transparent 1px) 0 0 / var(--line-size) var(--line-size), linear-gradient(var(--line-color) 1px, transparent 1px) 0 0 / var(--line-size) var(--line-size);
    top: 0;
    z-index: -1;
    -webkit-mask: linear-gradient(-360deg, transparent 40%, white);
    mask: linear-gradient(-360deg, transparent 40%, white);
}