:root {
    /**
     * Appearance
     */
    --ligatures: none;
    --text-size: 14px;
    --font: "Open Sans";
    --codeblock-font: "Fira Code";
    --sidebar-active: var(--secondary-background);

    /**
     * Native
     */
    --titlebar-height: 29px;
    --titlebar-action-padding: 8px;
    --titlebar-logo-color: var(--secondary-foreground);

    /**
     * Layout
     */
    --app-height: 100vh;
    --border-radius: 6px;
    --border-radius-half: 0;

    --input-border-width: 2px;
    --textarea-padding: 16px;
    --textarea-line-height: 20px;
    --message-box-padding: 14px 14px 14px 0;

    --attachment-max-width: 480px;
    --attachment-max-height: 640px;
    --attachment-default-width: 400px;
    --attachment-max-text-width: 800px;

    --bottom-navigation-height: 50px;

    /**
     * Experimental
     */
    --background-rgb: (
        25,
        25,
        25
    ); //THIS IS SO THAT WE CAN HAVE CUSTOM BACKGROUNDS FOR THE CLIENT, CONVERTS THE HEX TO AN RGB VALUE FROM --background
    --background-rgba: rgba(
        var(--background-rgb),
        0.8
    ); //make the opacity also customizable
}