:root {
    --accent: #9B1B30;
    --bg: #ECEAE4;
    --fg: #2b2a28;
    --fg-80: rgbs(43,42,40,.8);
    --fg-60: rgba(43,42,40,.6);
    --fg-50: rgba(43,42,40,.5);
    --fg-45: rgba(43,42,40,.45);
    --fg-30: rgba(43,42,40,.30);
    --fg-18: rgba(43,42,40,.18);
    --fg-16: rgba(43,42,40,.16);
    --fg-14: rgba(43,42,40,.14);
    --fg-12: rgba(43,42,40,.12);
    --card-bg: rgba(255,255,255,.45);
    --input-bg: rgba(255,255,255,.4);
    --vis-stripes: repeating-linear-gradient(45deg,rgba(43,42,40,.055) 0 7px,rgba(43,42,40,.015) 7px 14px);
    --vis-border: rgba(43,42,40,.2);
    --vis-label: rgba(43,42,40,.42);
    --btn-ghost-color: rgba(43,42,40,.7);
    --btn-ghost-border: rgba(43,42,40,.3);
    --btn-ghost-hover-color: #ECEAE4;
    --dot-off: rgba(43,42,40,.18);
    --accent-text: #fff;
}

@media (prefers-color-scheme: dark) {
    :root {
    --bg: #1A1A1A;
    --fg: #ECEAE4;
    --fg-80: rgba(236,234,228,.8);
    --fg-60: rgba(236,234,228,.6);
    --fg-50: rgba(236,234,228,.5);
    --fg-45: rgba(236,234,228,.45);
    --fg-30: rgba(236,234,228,.30);
    --fg-18: rgba(236,234,228,.18);
    --fg-16: rgba(236,234,228,.16);
    --fg-14: rgba(236,234,228,.14);
    --fg-12: rgba(236,234,228,.12);
    --card-bg: rgba(255,255,255,.03);
    --card-bg-hover: rgba(255, 255, 255, .05);
    --input-bg: rgba(255,255,255,.03);
    --vis-stripes: repeating-linear-gradient(45deg,rgba(236,234,228,.07) 0 7px,rgba(236,234,228,.02) 7px 14px);
    --vis-border: rgba(236,234,228,.22);
    --vis-label: rgba(236,234,228,.5);
    --btn-ghost-color: rgba(236,234,228,.8);
    --btn-ghost-border: rgba(236,234,228,.3);
    --btn-ghost-hover-color: #ECEAE4;
    --dot-off: rgba(236,234,228,.2);
    --accent-text: #15140f;
    }
}

html[data-theme="light"] {
    --bg: #ECEAE4;
    --fg: #2b2a28;
    --fg-80: rgbs(43,42,40,.8);
    --fg-60: rgba(43,42,40,.6);
    --fg-50: rgba(43,42,40,.5);
    --fg-45: rgba(43,42,40,.45);
    --fg-30: rgba(43,42,40,.30);
    --fg-18: rgba(43,42,40,.18);
    --fg-16: rgba(43,42,40,.16);
    --fg-14: rgba(43,42,40,.14);
    --fg-12: rgba(43,42,40,.12);
    --card-bg: rgba(255,255,255,.45);
    --input-bg: rgba(255,255,255,.4);
    --vis-stripes: repeating-linear-gradient(45deg,rgba(43,42,40,.055) 0 7px,rgba(43,42,40,.015) 7px 14px);
    --vis-border: rgba(43,42,40,.2);
    --vis-label: rgba(43,42,40,.42);
    --btn-ghost-color: rgba(43,42,40,.7);
    --btn-ghost-border: rgba(43,42,40,.3);
    --btn-ghost-hover-color: #ECEAE4;
    --dot-off: rgba(43,42,40,.18);
    --accent-text: #fff;
}

html[data-theme="dark"] {
    --bg: #1A1A1A;
    --fg: #ECEAE4;
    --fg-80: rgba(236,234,228,.8);
    --fg-60: rgba(236,234,228,.6);
    --fg-50: rgba(236,234,228,.5);
    --fg-45: rgba(236,234,228,.45);
    --fg-30: rgba(236,234,228,.30);
    --fg-18: rgba(236,234,228,.18);
    --fg-16: rgba(236,234,228,.16);
    --fg-14: rgba(236,234,228,.14);
    --fg-12: rgba(236,234,228,.12);
    --card-bg: rgba(255,255,255,.03);
    --input-bg: rgba(255,255,255,.03);
    --vis-stripes: repeating-linear-gradient(45deg,rgba(236,234,228,.07) 0 7px,rgba(236,234,228,.02) 7px 14px);
    --vis-border: rgba(236,234,228,.22);
    --vis-label: rgba(236,234,228,.5);
    --btn-ghost-color: rgba(236,234,228,.8);
    --btn-ghost-border: rgba(236,234,228,.3);
    --btn-ghost-hover-color: #ECEAE4;
    --dot-off: rgba(236,234,228,.2);
    --accent-text: #15140f;
}