/* Shared CSS Variables - Design System */
:root {
    /* Animation System */
    --animation-duration: 0.5s;
    --animation-easing: ease-out;
    --animation-distance: 30px;

    /* Focus & Accessibility */
    --focus-ring: 0 0 0 0.2rem rgba(77, 176, 225, 0.25);
    --focus-ring-color: rgba(77, 176, 225, 0.25);
    --focus-width: 2px;
    --focus-offset: 2px;
    
    /* Color System */
    --animation-text-color: #1a1a1a;
    --prism-shadow-base: 0 2px 8px rgba(74, 176, 225, 0.3);
    
    /* Typography */
    --font-family-serif: 'Georgia', 'Times New Roman', serif;
    --font-weight-bold: 700;
    --letter-spacing-tight: 0.1px;
    --letter-spacing-normal: 0.5px;
    
    /* Spacing System */
    --spacing-xs: 0.2em;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Accessibility utilities */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}