/* src/Petventure.Web/wwwroot/css/theme.css */

:root {
    /* Color Palette - Light Theme (Default) */
    --pet-primary: #137d7a;
    --pet-primary-hover: #0f6a67;
    --pet-secondary: #e2e8f0;
    --pet-secondary-hover: #cbd5e1;
    --pet-ghost-hover: rgba(0, 0, 0, 0.05);
    
    --pet-bg: #f7fbff;
    --pet-surface: #ffffff;
    --pet-border: #e2e8f0;
    
    --pet-text: #1d3442;
    --pet-text-muted: #64748b;
    --pet-text-inverse: #ffffff;
    
    /* Semantic Colors */
    --pet-success: #26b050;
    --pet-danger: #ef4444;
    --pet-warning: #f59e0b;

    /* Spacing & Sizes */
    --pet-spacing-xs: 0.25rem;
    --pet-spacing-sm: 0.5rem;
    --pet-spacing-md: 1rem;
    --pet-spacing-lg: 1.5rem;
    --pet-spacing-xl: 2rem;
    
    /* Borders & Radius (Modern / Soft) */
    --pet-radius-sm: 8px;
    --pet-radius-md: 12px;
    --pet-radius-lg: 16px;
    --pet-radius-pill: 9999px;
    --pet-border-width: 2px;
    
    /* Shadows */
    --pet-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --pet-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    
    /* Transitions */
    --pet-transition-fast: 150ms ease-in-out;
}

[data-theme='dark'] {
    /* Color Palette - Dark Theme */
    --pet-primary: #2dd4bf; /* Lighter variant for dark mode contrast */
    --pet-primary-hover: #14b8a6;
    --pet-secondary: #334155;
    --pet-secondary-hover: #475569;
    --pet-ghost-hover: rgba(255, 255, 255, 0.1);
    
    --pet-bg: #0f172a;
    --pet-surface: #1e293b;
    --pet-border: #334155;
    
    --pet-text: #f8fafc;
    --pet-text-muted: #94a3b8;
    --pet-text-inverse: #0f172a;
    
    /* Shadows */
    --pet-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --pet-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Base resets relying on variables */
body {
    background-color: var(--pet-bg);
    color: var(--pet-text);
    transition: background-color var(--pet-transition-fast), color var(--pet-transition-fast);
}

/* Pixel Art Helper */
.pixel-art {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}