:root
{
    /* Per general typography standards: */
    --targetParagraphWidth: 70ch;

    /* General font sizes: */

    /* General color palette: */
    --backgroundColor: #000000FF;
    --disabledColor: #FFFFFF60;
    --accentColorShade1: #AEE665FF;
    --accentColorShade2: #95C755FF;
    --accentColorShade3: #7CA844FF;
    --accentColorShade4: #648934FF;
    --accentColorShade5: #4B6923FF;
    --accentColorShade6: #324A13FF;
    --accentColorShade7: #192B02FF;

    /* Header and panel sizes (desktop layout) */
    --desktopHeaderWidth: 420px;
    --desktopPanelMargin: 30px;
    --desktopPanelCollapsedWidth: 550px;
    --desktopPanelCollapsedHeight: 400px;
    --desktopPanelCollapsedThumbnailWidth: 550px;
    --desktopPanelExpandedThumbnailWidth: 300px;
    /* Calculated layout variables (desktop layout) */
    --desktopPanelCollapsedThumbnailHeight: calc((9 / 16) * var(--desktopPanelCollapsedWidth));
    --desktopPanelExpandedWidth: calc(100vw - var(--desktopHeaderWidth) - var(--desktopPanelMargin) - var(--desktopPanelMargin));
    --desktopPanelExpandedHeight: calc(100vh - var(--desktopPanelMargin) - var(--desktopPanelMargin));
    --desktopPanelExpandedThumbnailHeight: calc((9 / 16) * var(--desktopPanelExpandedThumbnailWidth));
}