/**
 * RoeschStudio Widgets - CSS Layer Architecture 2026
 * 
 * Modern CSS using @layer for cascade control, oklch colors,
 * Container Queries for component-level responsiveness, and :has() selectors.
 *
 * @package RoeschStudio_Widgets
 * @since 1.0.1
 */

/* ==========================================================================
   LAYER ORDER DECLARATION
   
   Layers are applied in order (lowest to highest specificity):
   1. reset     - Normalize browser defaults
   2. tokens    - Design tokens (CSS custom properties)
   3. base      - Base element styles
   4. components - Reusable component patterns
   5. widgets   - Widget-specific styles
   6. utilities - Utility classes (highest priority)
   ========================================================================== */

@layer reset, tokens, base, components, widgets, utilities;

/* ==========================================================================
   RESET LAYER
   ========================================================================== */

@layer reset {
    .rsw-widget,
    .rsw-widget *,
    .rsw-widget *::before,
    .rsw-widget *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    .rsw-widget img,
    .rsw-widget video {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    .rsw-widget button {
        font: inherit;
        color: inherit;
        background: none;
        border: none;
        cursor: pointer;
    }
    
    .rsw-widget a {
        color: inherit;
        text-decoration: none;
    }
}

/* ==========================================================================
   DESIGN TOKENS LAYER - oklch Color Space
   ========================================================================== */

@layer tokens {
    :root {
        /* ===== COLOR TOKENS (oklch for perceptual uniformity) ===== */
        
        /* Primary palette */
        --rsw-primary: oklch(54% 0.2 264);
        --rsw-primary-hover: oklch(48% 0.22 264);
        --rsw-primary-active: oklch(42% 0.23 264);
        --rsw-primary-light: oklch(95% 0.03 264);
        
        /* Neutral palette */
        --rsw-gray-50: oklch(98% 0.005 264);
        --rsw-gray-100: oklch(96% 0.005 264);
        --rsw-gray-200: oklch(92% 0.005 264);
        --rsw-gray-300: oklch(87% 0.005 264);
        --rsw-gray-400: oklch(70% 0.01 264);
        --rsw-gray-500: oklch(55% 0.01 264);
        --rsw-gray-600: oklch(45% 0.01 264);
        --rsw-gray-700: oklch(35% 0.01 264);
        --rsw-gray-800: oklch(25% 0.01 264);
        --rsw-gray-900: oklch(15% 0.01 264);
        
        /* Semantic colors */
        --rsw-success: oklch(65% 0.2 145);
        --rsw-warning: oklch(75% 0.18 85);
        --rsw-error: oklch(55% 0.25 27);
        --rsw-info: oklch(60% 0.18 230);
        
        /* Sale & Featured */
        --rsw-sale: oklch(55% 0.25 27);
        --rsw-featured: oklch(72% 0.18 85);
        --rsw-sale-bg: oklch(95% 0.05 27);
        
        /* Surface colors */
        --rsw-surface: oklch(100% 0 0);
        --rsw-surface-elevated: oklch(100% 0 0);
        --rsw-surface-overlay: oklch(0% 0 0 / 0.5);
        
        /* Text colors */
        --rsw-text: oklch(20% 0.01 264);
        --rsw-text-muted: oklch(50% 0.01 264);
        --rsw-text-inverted: oklch(100% 0 0);
        
        /* Border colors */
        --rsw-border: oklch(90% 0.005 264);
        --rsw-border-hover: oklch(80% 0.01 264);
        
        /* ===== SPACING TOKENS ===== */
        --rsw-space-1: 0.25rem;    /* 4px */
        --rsw-space-2: 0.5rem;     /* 8px */
        --rsw-space-3: 0.75rem;    /* 12px */
        --rsw-space-4: 1rem;       /* 16px */
        --rsw-space-5: 1.25rem;    /* 20px */
        --rsw-space-6: 1.5rem;     /* 24px */
        --rsw-space-8: 2rem;       /* 32px */
        --rsw-space-10: 2.5rem;    /* 40px */
        --rsw-space-12: 3rem;      /* 48px */
        --rsw-space-16: 4rem;      /* 64px */
        
        /* ===== TYPOGRAPHY TOKENS ===== */
        --rsw-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
        --rsw-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
        
        --rsw-text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
        --rsw-text-sm: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
        --rsw-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
        --rsw-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
        --rsw-text-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.25rem);
        --rsw-text-2xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.5rem);
        
        --rsw-leading-tight: 1.25;
        --rsw-leading-normal: 1.5;
        --rsw-leading-relaxed: 1.75;
        
        --rsw-weight-normal: 400;
        --rsw-weight-medium: 500;
        --rsw-weight-semibold: 600;
        --rsw-weight-bold: 700;
        
        /* ===== BORDER RADIUS ===== */
        --rsw-radius-sm: 0.25rem;   /* 4px */
        --rsw-radius-md: 0.5rem;    /* 8px */
        --rsw-radius-lg: 0.75rem;   /* 12px */
        --rsw-radius-xl: 1rem;      /* 16px */
        --rsw-radius-2xl: 1.5rem;   /* 24px */
        --rsw-radius-full: 9999px;
        
        /* ===== SHADOWS (oklch-based) ===== */
        --rsw-shadow-sm: 
            0 1px 2px oklch(0% 0 0 / 0.04),
            0 1px 1px oklch(0% 0 0 / 0.06);
        --rsw-shadow-md: 
            0 4px 6px oklch(0% 0 0 / 0.05),
            0 2px 4px oklch(0% 0 0 / 0.08);
        --rsw-shadow-lg: 
            0 10px 15px oklch(0% 0 0 / 0.08),
            0 4px 6px oklch(0% 0 0 / 0.05);
        --rsw-shadow-xl: 
            0 20px 25px oklch(0% 0 0 / 0.1),
            0 8px 10px oklch(0% 0 0 / 0.06);
        
        /* ===== TRANSITIONS ===== */
        --rsw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --rsw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
        
        --rsw-duration-fast: 150ms;
        --rsw-duration-normal: 250ms;
        --rsw-duration-slow: 400ms;
        
        /* ===== Z-INDEX SCALE ===== */
        --rsw-z-dropdown: 10;
        --rsw-z-sticky: 20;
        --rsw-z-overlay: 30;
        --rsw-z-modal: 40;
        --rsw-z-toast: 50;
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        :root {
            --rsw-surface: oklch(15% 0.01 264);
            --rsw-surface-elevated: oklch(20% 0.01 264);
            --rsw-text: oklch(95% 0.005 264);
            --rsw-text-muted: oklch(65% 0.01 264);
            --rsw-border: oklch(30% 0.01 264);
            --rsw-border-hover: oklch(40% 0.01 264);
        }
    }
}

/* ==========================================================================
   BASE LAYER
   ========================================================================== */

@layer base {
    .rsw-widget {
        font-family: var(--rsw-font-sans);
        font-size: var(--rsw-text-base);
        line-height: var(--rsw-leading-normal);
        color: var(--rsw-text);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Focus visible for accessibility */
    .rsw-widget :focus-visible {
        outline: 2px solid var(--rsw-primary);
        outline-offset: 2px;
    }
    
    .rsw-widget :focus:not(:focus-visible) {
        outline: none;
    }
}

/* ==========================================================================
   COMPONENTS LAYER - Reusable patterns
   ========================================================================== */

@layer components {
    /* ----- BUTTON COMPONENT ----- */
    .rsw-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--rsw-space-2);
        padding: var(--rsw-space-2) var(--rsw-space-4);
        font-size: var(--rsw-text-sm);
        font-weight: var(--rsw-weight-medium);
        line-height: 1;
        text-decoration: none;
        border-radius: var(--rsw-radius-md);
        transition: 
            background-color var(--rsw-duration-fast) var(--rsw-ease-out),
            box-shadow var(--rsw-duration-fast) var(--rsw-ease-out),
            transform var(--rsw-duration-fast) var(--rsw-ease-out);
    }
    
    .rsw-btn--primary {
        background: var(--rsw-primary);
        color: var(--rsw-text-inverted);
    }
    
    .rsw-btn--primary:hover {
        background: var(--rsw-primary-hover);
        box-shadow: var(--rsw-shadow-md);
    }
    
    .rsw-btn--primary:active {
        background: var(--rsw-primary-active);
        transform: scale(0.98);
    }
    
    .rsw-btn--secondary {
        background: transparent;
        color: var(--rsw-text);
        border: 1px solid var(--rsw-border);
    }
    
    .rsw-btn--secondary:hover {
        background: var(--rsw-gray-100);
        border-color: var(--rsw-border-hover);
    }
    
    .rsw-btn--ghost {
        background: transparent;
        color: var(--rsw-text);
    }
    
    .rsw-btn--ghost:hover {
        background: var(--rsw-gray-100);
    }
    
    /* ----- BADGE COMPONENT ----- */
    .rsw-badge {
        display: inline-flex;
        align-items: center;
        padding: var(--rsw-space-1) var(--rsw-space-2);
        font-size: var(--rsw-text-xs);
        font-weight: var(--rsw-weight-semibold);
        line-height: 1;
        border-radius: var(--rsw-radius-sm);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    
    .rsw-badge--sale {
        background: var(--rsw-sale);
        color: var(--rsw-text-inverted);
    }
    
    .rsw-badge--featured {
        background: var(--rsw-featured);
        color: var(--rsw-gray-900);
    }
    
    .rsw-badge--new {
        background: var(--rsw-success);
        color: var(--rsw-text-inverted);
    }
    
    /* ----- LOADING STATE ----- */
    .rsw-loading {
        position: relative;
        pointer-events: none;
    }
    
    .rsw-loading::after {
        content: '';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: oklch(100% 0 0 / 0.7);
        border-radius: inherit;
    }
    
    @keyframes rsw-spin {
        to { transform: rotate(360deg); }
    }
    
    .rsw-loading::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 1.5rem;
        height: 1.5rem;
        margin: -0.75rem 0 0 -0.75rem;
        border: 2px solid var(--rsw-border);
        border-top-color: var(--rsw-primary);
        border-radius: 50%;
        animation: rsw-spin 0.8s linear infinite;
    }
}

/* ==========================================================================
   UTILITIES LAYER
   ========================================================================== */

@layer utilities {
    /* Screen reader only */
    .rsw-sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    
    /* Text utilities */
    .rsw-text-center { text-align: center; }
    .rsw-text-left { text-align: left; }
    .rsw-text-right { text-align: right; }
    
    /* Flex utilities */
    .rsw-flex { display: flex; }
    .rsw-flex-col { flex-direction: column; }
    .rsw-items-center { align-items: center; }
    .rsw-justify-center { justify-content: center; }
    .rsw-justify-between { justify-content: space-between; }
    
    /* Gap utilities */
    .rsw-gap-1 { gap: var(--rsw-space-1); }
    .rsw-gap-2 { gap: var(--rsw-space-2); }
    .rsw-gap-3 { gap: var(--rsw-space-3); }
    .rsw-gap-4 { gap: var(--rsw-space-4); }
}