/* theme.css — project-wide theme variables and base styles
   This file centralizes colors, spacing, typography, and accessibility
   defaults used across all pages. Include this first in any new page.
*/

:root {
    --max-width: 1200px;
    --gutter: 20px;
    --rainbow-duration: 12s;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --fg: #111;
    --muted: #666;
    --accent-1: #ff6b6b;
}

/* sensible box-sizing and full-height baseline */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(135deg,
        #ff0000 0%, /* Red */
        #ff8c00 14.3%, /* Orange */
        #ffd700 28.6%, /* Yellow */
        #32cd32 42.9%, /* Green */
        #00bfff 57.2%, /* Blue */
        #4169e1 71.5%, /* Indigo */
        #8a2be2 85.8%, /* Violet */
        #ff0000 100% /* Back to Red */
    );
    background-size: 400% 400%;
    animation: rainbowShift var(--rainbow-duration) ease-in-out infinite;
    min-height: 100vh;
    overflow-x: hidden; /* avoid accidental horizontal scroll */
    color: var(--fg);
}

@keyframes rainbowShift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 100% 50%; }
    50%  { background-position: 200% 50%; }
    75%  { background-position: 300% 50%; }
    100% { background-position: 400% 50%; }
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    .floating-paw { animation: none; }
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--gutter);
    position: relative;
}

/* Helpful defaults for images and interactive elements */
img { max-width: 100%; height: auto; display: block; }

/* Click/pop animation for decorative paws (used by JS) */
.paw-pop {
    transform: scale(1.5) rotate(360deg);
    transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .paw-pop { transform: none; transition: none; }
}

/* Visible focus styles for keyboard users */
.cta-button:focus-visible,
.service-card:focus-visible {
    outline: 3px solid rgba(66, 153, 225, 0.6);
    outline-offset: 3px;
}