[data-theme="light"] {
    --canvas-color: #fafafa;
    --color: #09090b;
    --input-color: #09090b;
    --border-color: #f1f1f3;

    --foreground: 240 10% 3.9%;
    --primary-foreground: 0 0% 98%;
    --primary: 240 5.9% 10%;

    --input: 240 5.9% 96.5%;
    --border: 240 5.9% 90%;
    --sonner: 0 0% 100%;

    --muted-foreground: 240 3.8% 46.1%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 97%;
    --accent: 240 4.8% 90.9%;

    --hover: #e5e7eb;
    --navigation-color: #71717a;
    --navigation-selected-color: #09090b;

    --info-background-color: rgb(245 245 245);
    --info-color: rgb(82 82 91);

    --more-color: rgb(102, 106, 122);
    --more-border: rgb(233, 234, 237);
    --more-hover: #f2f2f2;

    --hover-light: #fafafa;
    --hover-dark: #f6f6f7;
    --hover-icon: #e7e7e9;

    --color-info: #09090b;
    --red: rgb(244, 63, 94);
    --btn: #fafafa;
    --check: #fff;
    --check-border: #09090b;

    --list-li: rgb(233, 234, 237);
    --complete-bw: #000;
    --list-li-selected: rgb(54, 57, 68);

    --loading-color: #c6c6ca;

    --no-btn-hover: #f3f3f4;
    --btn-hover: #2f2f31;
    --desc-color: #4b5563;
    --close-hover: #f6f6f7;
    --card: 0 0% 99.4%;
    --accent-foreground: 240 5.9% 10%;
    --muted: 0 0% 95.4%;

    --silhouette: #ebebeb;
    --silhouette-bright: rgba(255, 255, 255, 0.25);

    --controller-outer-circle: #8a8a8a;
    --controller-inner-circle: #b1b1b1;
    --controller-deviced-circle: #808080;
    --controller-direct: #6b6b6b;
    --controller-triangle: #4b4b4b;
    --controller-direct-pressed: #1b1c1b;
    --controller-triangle-pressed: #b20000;

    --dropdown-background-color: #f7f7f7;
    --dropdown-border: #e4e4e7;
    --dropdown-hover: #e7e7e9;

    --filtered: rgb(217 119 6);
    --info-background-color: rgb(245 245 245);
    --info-color: rgb(82 82 91);
    --info-border-color: #e4e4e7;
    --type-color: rgb(161 161 170);

    --ranking-background-color: #fff;
    --ranking-hover: #f2f2f3;
    --count-color: rgb(161 161 170);
}

[data-theme="dark"] {
    --canvas-color: #111111;
    --color: #fafafa;
    --input-color: #fafafa;
    --border-color: #1c1c1e;

    --foreground: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --primary: 0 0% 98%;

    --input: 0deg 0% 14.15%;
    --border: 240 3.7% 15.9%;
    --sonner: 0 0% 4%;

    --muted-foreground: 240 5% 64.9%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 8%;
    --accent: 240 3.7% 15.9%;

    --hover: #27272a;
    --navigation-color: #a1a1aa;
    --navigation-selected-color: #f1f1f3;

    --info-background-color: #0a0a0a;
    --info-color: #e4e4e7;

    --more-color: #a1a1aa;
    --more-border: #454546;
    --more-hover: #454546;

    --hover-light: #131313;
    --hover-dark: #1a1a1a;
    --hover-icon: #242426;

    --color-info: #a1a1aa;
    --red: #f43f5e;
    --btn: #fafafa;
    --check: #18181b;
    --check-border: #18181b;

    --list-li: #161618;
    --complete-bw: #fff;
    --list-li-selected: #454546;

    --loading-color: #333337;

    --no-btn-hover: #151515;
    --btn-hover: #e2e2e2;
    --desc-color: #a1a1a1;
    --close-hover: #19191b;
    --card: 0 0% 9.62%;
    --accent-foreground: 0 0% 98%;
    --muted: 0 0% 10.12%;

    --silhouette: #202020;
    --silhouette-bright: rgba(255, 255, 255, 0.03);
    
    --controller-outer-circle: #1b1b1b;
    --controller-inner-circle: #4f4f4f;
    --controller-deviced-circle: #282828;
    --controller-direct: #424242;
    --controller-triangle: #262626;
    --controller-direct-pressed: #1f1819;
    --controller-triangle-pressed: #b20000;

    --dropdown-background-color: #141414;
    --dropdown-border: #27272a;
    --dropdown-hover: #27272a;

    --filtered: rgb(251 191 36);
    --info-background-color: #0a0a0a;
    --info-color: #e4e4e7;
    --info-border-color: #27272a;
    --type-color: rgb(113 113 122);

    --ranking-background-color: #191919;
    --ranking-hover: #242424;
    --count-color: rgb(113 113 122);
}