/**
 * CCAB Accessibility Styles
 * Supports reduced motion, high contrast, and focus visibility
 */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Stop morphing organic shapes */
    .organic-shape {
        animation: none !important;
        transform: none !important;
    }

    /* Disable hover transforms */
    .gallery-card:hover,
    .demo-card:hover,
    .back-link:hover,
    .organic-back-link:hover {
        transform: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --sage: #2d5016;
        --moss: #1a3d0c;
        --earth: #a85d00;
        --cream: #ffffff;
        --terracotta: #8b4513;
        --dark-moss: #0a1f05;
    }

    .organic-shape {
        display: none !important;
    }

    .gallery-card,
    .demo-card {
        border: 3px solid currentColor !important;
        background: var(--cream) !important;
    }

    a {
        text-decoration: underline !important;
    }
}

/* Focus Visibility for Keyboard Navigation */
:focus-visible {
    outline: 3px solid var(--terracotta, #BC6C25) !important;
    outline-offset: 2px !important;
}

.gallery-card:focus-visible,
.demo-card:focus-visible {
    outline: 4px solid var(--terracotta, #BC6C25) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 8px rgba(188, 108, 37, 0.2) !important;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--moss, #606C38);
    color: white;
    padding: 8px 16px;
    z-index: 10001;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Screen reader only content */
.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;
}

/* Pause button for animations */
.pause-animations-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: var(--moss, #606C38);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.2s, transform 0.2s;
}

.pause-animations-btn:hover {
    background: var(--dark-moss, #3d4423);
    transform: scale(1.05);
}

.pause-animations-btn:focus-visible {
    outline: 3px solid var(--earth, #DDA15E);
    outline-offset: 2px;
}

/* When animations are paused */
body.animations-paused * {
    animation-play-state: paused !important;
}

body.animations-paused .organic-shape {
    animation: none !important;
}

/* Color-blind friendly palettes */
/* Deuteranopia (green-blind) and Protanopia (red-blind) safe palette */
.colorblind-mode {
    --sage: #0072B2 !important;        /* Blue instead of green */
    --moss: #005792 !important;        /* Dark blue instead of moss */
    --earth: #E69F00 !important;       /* Orange-yellow (unchanged) */
    --cream: #FFFFFF !important;       /* White */
    --terracotta: #D55E00 !important;  /* Vermillion (red-orange) */
    --dark-moss: #003653 !important;   /* Very dark blue */
}

/* Tritanopia (blue-blind) safe palette */
.colorblind-mode.tritanopia {
    --sage: #CC79A7 !important;        /* Pink */
    --moss: #882255 !important;        /* Magenta */
    --earth: #DDCC77 !important;       /* Sand */
    --cream: #FFFFFF !important;       /* White */
    --terracotta: #AA4499 !important;  /* Purple */
    --dark-moss: #661100 !important;   /* Dark red */
}

/* Monochromacy/Achromatopsia safe palette */
.colorblind-mode.monochrome {
    --sage: #666666 !important;        /* Medium gray */
    --moss: #333333 !important;        /* Dark gray */
    --earth: #999999 !important;       /* Light gray */
    --cream: #FFFFFF !important;       /* White */
    --terracotta: #444444 !important;  /* Charcoal */
    --dark-moss: #1a1a1a !important;   /* Near black */
}

/* IBM's color-blind safe palette (universal) */
body[data-palette="ibm-colorblind"] {
    --sage: #648FFF !important;        /* Blue */
    --moss: #785EF0 !important;        /* Violet */
    --earth: #FFB000 !important;       /* Gold */
    --cream: #FEFEFE !important;       /* Near white */
    --terracotta: #FE6100 !important;  /* Orange */
    --dark-moss: #4B0082 !important;   /* Indigo */
}