: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, #3D3D3D 0%, #2C2C2C 100%);
    overflow: hidden;
    font-family: var(--font-primary);
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    position: relative; /* For positioning the SVG pattern */
}

/* Full-screen SVG material pattern background */
.material-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; /* Behind all content */
    pointer-events: none; /* Don't interfere with interactions */
    opacity: 0.8; /* Subtle overlay effect */
}

.material-pattern svg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover entire screen */
}

.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;
}

.button-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);
    z-index: 1;
}

/* 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;
    }
}