:root {
    /* Element sizes */
    --topbar-height: 64px;
    --button-size: 32px;
    --title-card-width: 192px;
    --continue-watching-card-width: 360px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    /* Font sizes */
    --font-size-sm: 0.75rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2.0rem;
    --font-size-xxl: 2.5rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Extra stuff */
    --transition-fast: 0.1s;
    --transition-medium: 0.2s;
    --transition-slow: 0.4s;

    /* Colors */
    --color-accent: #4156c5; /* My favorite color that appears on the DVD decryption key flag */
    --color-video-progress: #4156c5; /* Same as accent color */
    --color-error: #f91109;
    --color-background: #0f0f17;
    --color-topbar: rgba(7, 7, 11, 0.75);
    --color-text-primary-light: rgba(223, 223, 223, 1.0);
    --color-text-secondary-light: rgba(143, 143, 143, 1.0);
    --color-text-primary-dark: rgba(15, 15, 15, 1.0);
    --color-text-secondary-dark: rgba(63, 63, 63, 1.0);
    --color-button-light: rgba(223, 223, 223, 0.20);
    --color-button-light-hover: rgba(223, 223, 223, 0.25);
    --color-button-light-active: rgba(223, 223, 223, 0.30);
    --color-button-light-focus: rgba(223, 223, 223, 1.0);
    --color-button-light-focus-active: rgba(191, 191, 191, 1.0);
    --color-button-dark: rgba(15, 15, 15, 0.20);
    --color-button-dark-hover: rgba(15, 15, 15, 0.25);
    --color-button-dark-active: rgba(15, 15, 15, 0.30);
    --color-button-dark-focus: rgba(15, 15, 15, 1.0);
    --color-button-dark-focus-active: rgba(31, 31, 31, 1.0);
    --color-dark-overlay: rgba(15, 15, 15, 0.75);
    --color-subtitle-bg: rgba(15, 15, 15, 0.5);
    --color-bar-normal: #09f911;
    --color-bar-warning: #ffbf0f;
    --color-bar-critical: #f91109;

    /* Material */
    --glass-blur: blur(8px);
    --glass-saturate: saturate(1.5);
}

body.mobile {
    --topbar-height: 88px;
    --title-card-width: 144px;
    --continue-watching-card-width: 304px;
    --button-size: 32px;
    --font-size-sm: calc(2/3 * 1rem); /* 0.67rem */
    --font-size-md: 0.75rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2.0rem;
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 16px;
}