/* ====================================================================
   IO BASE - Static Variables, Animations, Global Styles
   These never change across themes
   ==================================================================== */

:root {
     /* ================================================================
       TYPOGRAPHY - Theme fonts
       ================================================================ */
    --io-font-primary: monospace;
    --io-font-mono: "MKR";
    --io-font-display: "MKR";
    /* ================================================================
       FONT SIZES - Typography scale
       ================================================================ */
    --io-text-xs: 0.75rem;      /* 12px */
    --io-text-sm: 0.875rem;     /* 14px */
    --io-text-base: 1rem;       /* 16px */
    --io-text-lg: 1.125rem;     /* 18px */
    --io-text-xl: 1.25rem;      /* 20px */
    --io-text-2xl: 1.5rem;      /* 24px */
    --io-text-3xl: 1.875rem;    /* 30px */

    /* ================================================================
       SPACING - Layout constraints
       ================================================================ */
    --io-space-xs: 4px;
    --io-space-sm: 8px;
    --io-space-md: 16px;
    --io-space-lg: 24px;
    --io-space-xl: 32px;
    --io-space-2xl: 48px;

    /* ================================================================
       RADIUS - Corner rounding
       ================================================================ */
    --io-radius-sm: 4px;
    --io-radius-md: 8px;
    --io-radius-lg: 12px;
    --io-radius-full: 9999px;

    /* ================================================================
       COMPONENT SIZES - Consistent heights/widths
       ================================================================ */
    --io-input-height: 40px;
    --io-button-height: 36px;
    --io-button-height-sm: 28px;
    --io-button-height-lg: 44px;
    --io-header-height: 60px;
    --io-sidebar-width: 240px;
    --io-icon-sm: 14px;
    --io-icon-md: 16px;
    --io-icon-lg: 24px;

    /* ================================================================
       TRANSITIONS - Animation timing
       ================================================================ */
    --io-transition-fast: 100ms ease;
    --io-transition-base: 200ms ease;
    --io-transition-slow: 300ms ease;
    --io-transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ================================================================
       Z-INDEX - Stacking layers
       ================================================================ */
    --io-z-base: 0;
    --io-z-dropdown: 100;
    --io-z-sticky: 200;
    --io-z-overlay: 400;
    --io-z-modal: 500;
    --io-z-tooltip: 700;

    /* ================================================================
       BACKDROP - Modal/overlay backgrounds
       ================================================================ */
    --io-backdrop: rgba(0, 0, 0, 0.7);
    --io-backdrop-light: rgba(0, 0, 0, 0.4);
    --io-backdrop-heavy: rgba(0, 0, 0, 0.85);

    /* ================================================================
       BLUR - Glassmorphism effects
       ================================================================ */
    --io-blur-sm: blur(4px);
    --io-blur-md: blur(8px);
    --io-blur-lg: blur(16px);

    /* ================================================================
       INTERACTIVE STATES
       ================================================================ */
    --io-disabled-opacity: 0.5;
    --io-overlay-light: rgba(255, 255, 255, 0.1);
    --io-overlay-dark: rgba(0, 0, 0, 0.3);

    /* ================================================================
       SHADOWS - Static shadow definitions
       ================================================================ */
    --io-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --io-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --io-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);

    /* ================================================================
       DERIVED VARIABLES - Computed from theme colors
       These reference theme variables, auto-update on theme swap
       ================================================================ */
    --io-border-accent: var(--io-accent);
    --io-border-focus: var(--io-accent-bright);
    
    --io-gradient-accent: linear-gradient(135deg, 
        var(--io-accent), 
        var(--io-accent-dim));
    
    --io-gradient-surface: linear-gradient(180deg, 
        var(--io-surface-base), 
        var(--io-surface-raised));
    
    --io-gradient-fade: linear-gradient(90deg, 
        transparent 0%, 
        var(--io-accent-subtle) 50%, 
        transparent 100%);
    
    --io-glow-sm: 0 0 8px var(--io-accent-glow);
    --io-glow-md: 0 0 12px var(--io-accent-glow);
    --io-glow-lg: 0 0 24px var(--io-accent-glow);
    
    --io-shadow-focus: 0 0 0 2px var(--io-accent-subtle),
                       0 0 8px var(--io-accent-glow);
}

/* ====================================================================
   GLOBAL STYLES - Selection, Scrollbar
   ==================================================================== */

::selection {
    background: var(--io-accent);
    color: var(--io-on-accent);
}

::-moz-selection {
    background: var(--io-accent);
    color: var(--io-on-accent);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--io-surface-sunken);
}

::-webkit-scrollbar-thumb {
    background: var(--io-accent-subtle);
    border-radius: var(--io-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--io-accent);
}

/* ====================================================================
   ANIMATIONS - Keyframe definitions
   ==================================================================== */

@keyframes io-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes io-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes io-slide-up {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes io-slide-down {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes io-slide-left {
    from {
        transform: translateX(10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes io-slide-right {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes io-scale-in {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes io-scale-out {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.95);
        opacity: 0;
    }
}

@keyframes io-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes io-glow-pulse {
    0%, 100% {
        box-shadow: var(--io-glow-sm);
    }
    50% {
        box-shadow: var(--io-glow-lg);
    }
}

@keyframes io-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes io-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes io-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* ====================================================================
   UTILITY CLASSES - Quick animation applications
   ==================================================================== */

.io-animate-fade-in {
    animation: io-fade-in var(--io-transition-base);
}

.io-animate-fade-out {
    animation: io-fade-out var(--io-transition-base);
}

.io-animate-slide-up {
    animation: io-slide-up var(--io-transition-base);
}

.io-animate-slide-down {
    animation: io-slide-down var(--io-transition-base);
}

.io-animate-slide-left {
    animation: io-slide-left var(--io-transition-base);
}

.io-animate-slide-right {
    animation: io-slide-right var(--io-transition-base);
}

.io-animate-scale-in {
    animation: io-scale-in var(--io-transition-bounce);
}

.io-animate-scale-out {
    animation: io-scale-out var(--io-transition-base);
}

.io-animate-pulse {
    animation: io-pulse 2s ease-in-out infinite;
}

.io-animate-glow-pulse {
    animation: io-glow-pulse 2s ease-in-out infinite;
}

.io-animate-spin {
    animation: io-spin 1s linear infinite;
}

.io-animate-bounce {
    animation: io-bounce 1s ease-in-out infinite;
}

.io-animate-shake {
    animation: io-shake 0.5s ease-in-out;
}

/* ====================================================================
   BORDER FADE UTILITIES - Theme-agnostic incomplete border system
   Add this to iobase.css
   ==================================================================== */

/* ====================================================================
   DERIVED GRADIENT VARIABLES - Auto-generated from theme RGB values
   These use the --io-border-fade-base RGB values from theme files
   ==================================================================== */

:root {
    /* Standard border fades (using --io-border-fade-base from theme) */
    --io-border-fade-h: linear-gradient(
        to right,
        transparent 0%,
        rgba(var(--io-border-fade-base), 0.3) 15%,
        rgba(var(--io-border-fade-base), 0.8) 50%,
        rgba(var(--io-border-fade-base), 0.3) 85%,
        transparent 100%
    );
    
    --io-border-fade-v: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(var(--io-border-fade-base), 0.3) 15%,
        rgba(var(--io-border-fade-base), 0.8) 50%,
        rgba(var(--io-border-fade-base), 0.3) 85%,
        transparent 100%
    );
    
    /* Accent border fades (using --io-border-accent-fade-base from theme) */
    --io-border-fade-accent-h: linear-gradient(
        to right,
        transparent 0%,
        rgba(var(--io-border-accent-fade-base), 0.2) 15%,
        rgba(var(--io-border-accent-fade-base), 0.6) 50%,
        rgba(var(--io-border-accent-fade-base), 0.2) 85%,
        transparent 100%
    );
    
    --io-border-fade-accent-v: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(var(--io-border-accent-fade-base), 0.2) 15%,
        rgba(var(--io-border-accent-fade-base), 0.6) 50%,
        rgba(var(--io-border-accent-fade-base), 0.2) 85%,
        transparent 100%
    );
    
    /* Subtle gradient backgrounds */
    --io-bg-accent-gradient: linear-gradient(
        135deg,
        rgba(var(--io-border-accent-fade-base), 0.03) 0%,
        rgba(var(--io-border-accent-fade-base), 0.08) 50%,
        rgba(var(--io-border-accent-fade-base), 0.03) 100%
    );
    
    --io-bg-accent-glow: linear-gradient(
        135deg,
        rgba(var(--io-border-accent-fade-base), 0.06) 0%,
        rgba(var(--io-border-accent-fade-base), 0.12) 50%,
        rgba(var(--io-border-accent-fade-base), 0.06) 100%
    );
}

/* ====================================================================
   BORDER FADE UTILITY CLASSES
   Usage: Add class to element, uses ::before or ::after pseudo-element
   ==================================================================== */

/* ----------------------------------------------------------------
   HORIZONTAL BORDERS (top/bottom)
   ---------------------------------------------------------------- */

/* Top border - incomplete fade */
.io-border-fade-top {
    position: relative;
}

.io-border-fade-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--io-border-fade-h);
    pointer-events: none;
}

/* Top border - accent version */
.io-border-fade-top-accent {
    position: relative;
}

.io-border-fade-top-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--io-border-fade-accent-h);
    pointer-events: none;
}

/* Bottom border - incomplete fade */
.io-border-fade-bottom {
    position: relative;
}

.io-border-fade-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--io-border-fade-h);
    pointer-events: none;
}

/* Bottom border - accent version */
.io-border-fade-bottom-accent {
    position: relative;
}

.io-border-fade-bottom-accent::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--io-border-fade-accent-h);
    pointer-events: none;
}

/* ----------------------------------------------------------------
   VERTICAL BORDERS (left/right)
   ---------------------------------------------------------------- */

/* Left border - incomplete fade */
.io-border-fade-left {
    position: relative;
}

.io-border-fade-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--io-border-fade-v);
    pointer-events: none;
}

/* Left border - accent version */
.io-border-fade-left-accent {
    position: relative;
}

.io-border-fade-left-accent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--io-border-fade-accent-v);
    pointer-events: none;
}

/* Right border - incomplete fade */
.io-border-fade-right {
    position: relative;
}

.io-border-fade-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--io-border-fade-v);
    pointer-events: none;
}

/* Right border - accent version */
.io-border-fade-right-accent {
    position: relative;
}

.io-border-fade-right-accent::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--io-border-fade-accent-v);
    pointer-events: none;
}

/* ----------------------------------------------------------------
   VERTICAL BORDERS - INCOMPLETE (70% height, centered)
   For that extra-subtle sidebar effect
   ---------------------------------------------------------------- */

.io-border-fade-left-incomplete {
    position: relative;
}

.io-border-fade-left-incomplete::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--io-border-fade-v);
    pointer-events: none;
}

.io-border-fade-right-incomplete {
    position: relative;
}

.io-border-fade-right-incomplete::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--io-border-fade-v);
    pointer-events: none;
}

/* ----------------------------------------------------------------
   HORIZONTAL BORDERS - INCOMPLETE (70% width, left-aligned)
   For header/footer separators
   ---------------------------------------------------------------- */

.io-border-fade-bottom-incomplete {
    position: relative;
}

.io-border-fade-bottom-incomplete::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 15%;
    height: 1px;
    background: var(--io-border-fade-h);
    pointer-events: none;
}

.io-border-fade-top-incomplete {
    position: relative;
}

.io-border-fade-top-incomplete::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 15%;
    height: 1px;
    background: var(--io-border-fade-h);
    pointer-events: none;
}

/* ====================================================================
   BACKGROUND GRADIENT UTILITIES
   Subtle accent gradients for hover states and active elements
   ==================================================================== */

.io-bg-accent-subtle {
    background: var(--io-bg-accent-gradient);
}

.io-bg-accent-glow {
    background: var(--io-bg-accent-glow);
}

/* ====================================================================
   COMBINED UTILITIES - Common patterns
   ==================================================================== */

/* Sidebar with right incomplete border */
.io-sidebar-fade {
    position: relative;
}

.io-sidebar-fade::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--io-border-fade-v);
    pointer-events: none;
}

/* Content area with left incomplete border */
.io-content-fade {
    position: relative;
}

.io-content-fade::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--io-border-fade-v);
    pointer-events: none;
}

/* Header with bottom incomplete border */
.io-header-fade {
    position: relative;
}

.io-header-fade::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 15%;
    height: 1px;
    background: var(--io-border-fade-h);
    pointer-events: none;
}