:root {
    /* Font Variables */
    --font-primary: 'Inter', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 16px;
    --font-size-md: 40px;
    --font-size-lg: 56px;
    --font-weight-bold: 700;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --line-height-normal: normal;
    --line-height-medium: 1.5;

    /* Color Variables */
    --color-primary: #ffffff;
    --color-secondary: #8E8E93;
    --color-background-start: #34373F;
    --color-background-end: #1D2026;
    --color-glass-border: rgba(255, 255, 255, 0.10);
    --color-glass-background: rgba(255, 255, 255, 0.10);
    --color-glass-background-end: rgba(255, 255, 255, 0.00);
    
    
    /* Additional color palette (for future use) */
    --color-accent: #007AFF;
    --color-success: #34C759;
    --color-warning: #FF9500;
    --color-error: #FF3B30;
    --color-secondary: #8E8E93;
    
    /* Spacing Variables */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 56px;
    
    /* Border Radius Variables */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;

    .font-sm {
        color: var(--color-secondary);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-regular);
        line-height: normal;
    }

    .font-lg {
        color: var(--color-primary);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        line-height: normal;
    }

    @media (max-width: 480px) {
        .font-sm {
            color: var(--color-secondary);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-regular);
            line-height: normal;
        }
    
        .font-lg {
            color: var(--color-primary);
            font-size: var(--font-size-md);
            font-weight: var(--font-weight-bold);
            line-height: normal;
        }
    }

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    display: flex;
    height: 100vh;
    background: linear-gradient(180deg, var(--color-background-start) 0%, var(--color-background-end) 100%);
    overflow: hidden;
    font-family: var(--font-primary);
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    
}

.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 90vw;
}

.container {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 0px var(--spacing-xl) 0px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-glass-border);
    background: linear-gradient(181deg, var(--color-glass-background) 1.15%, var(--color-glass-background-end) 98.91%);
}

.dial-wrapper {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}



#riveCanvas {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 500px;
    display: block;
    border-radius: var(--radius-md);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
 
    
    .dial-wrapper {
        width: 100%;
        max-width: 80vw;
        max-height: 80vh;
    }
}

@media (max-width: 480px) {
  

    .dial-wrapper {
        width: 100%;
        max-width: 80vw;
        max-height: 80vh;
    }
}