:root {
    --brand-color: #7c2d12;
    --rail-background: #f1eae7;
    --rail-border: #e2d0ca;
    --background: #fcfafa;
    --foreground: #371408;
    --card: #fdfcfc;
    --card-foreground: #371408;
    --popover: #fdfcfc;
    --popover-foreground: #371408;
    --primary: #7c2d12;
    --primary-foreground: #fbf8f7;
    --secondary: #efe5e2;
    --secondary-foreground: #441809;
    --muted: #f5f0ee;
    --muted-foreground: #935e4b;
    --accent: #ebdfdb;
    --accent-foreground: #441809;
    --mono: #371408;
    --mono-foreground: #fbf8f7;
    --border: #decac3;
    --input: #e7d9d4;
    --ring: #b68b7c;
}

.dark {
    --brand-color: #a97664;
    --rail-background: #0e0502;
    --rail-border: #1f0b04;
    --background: #090301;
    --foreground: #f4eeec;
    --card: #120602;
    --card-foreground: #f4eeec;
    --popover: #120602;
    --popover-foreground: #f4eeec;
    --primary: #a97664;
    --primary-foreground: #120602;
    --secondary: #1b0903;
    --secondary-foreground: #efe5e2;
    --muted: #110602;
    --muted-foreground: #c4a094;
    --accent: #220c05;
    --accent-foreground: #efe5e2;
    --mono: #efe5e2;
    --mono-foreground: #120602;
    --border: #250d05;
    --input: #1d0a04;
    --ring: #965741;
}

#app-rail,
#header-logo {
    background-color: var(--rail-background);
}

#app-rail {
    border-color: var(--rail-border);
}