:root { /* background for */ --base-color: #0d0113; /* background for regular widgets */ --background-color: #1b0b22; /* background for widgets embedded in other widgets, like the compose box */ --background-lighter-color: #2e1837; /* text on background-color */ --text-color: #eaddf4; /* less important text on background-color and base-color */ --text-faint-color: #84778e; /* color for buttons, links, etd */ --accent-color: #a017df; /* clicked/hovered elements in accent-color */ --accent-highlight-color: #c356f4; /* text on accent-color */ --accent-text-color: #e0d1e1; /* text on accent-highlight-color */ --accent-highlight-text-color: var(--accent-text-color); --success-color: #23b548; --warning-color: #d78318; --error-color: #f21736; /* border radius for smaller components like buttons */ --border-radius: 8px; /* border radius for larger components like modals */ --border-radius-large: 16px; --font-family: "Source Sans 3", sans-serif; /* small animations, like color fades or button squishes */ --anim-duration-short: 60ms; } html, body { margin: 0; padding: 0; height: 100vh; } body { background-color: var(--base-color); color: var(--text-color); font-family: "Source Sans 3", sans-serif; font-size: 1rem; font-weight: normal; }