/* ====================================
   VELORA GROUNDING TOKENS
   Design System - Grounded Cosmic UI
   Eliminates "floaty SaaS" feeling while preserving cosmic aesthetic
   ==================================== */

:root {
    /* ========================================
       SPACING SCALE
       Strict rhythm: 4/8/12/16/24/32/48/64px increments
       ======================================== */
    
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    
    /* ========================================
       MONETIZATION SPACING (Cozy Rhythm)
       ======================================== */
    
    /* Cards: radius-xl (16-20px) */
    --monetization-radius-xl: 20px;
    
    /* Page rhythm: 24/32/48 spacing steps */
    --monetization-rhythm-sm: 1.5rem;  /* 24px */
    --monetization-rhythm-md: 2rem;    /* 32px */
    --monetization-rhythm-lg: 3rem;     /* 48px */
    
    /* Section padding desktop: 72-96 top/bottom */
    --monetization-section-padding-desktop: 4.5rem; /* 72px */
    --monetization-section-padding-desktop-lg: 6rem; /* 96px */
    
    /* Mobile: 40-56 */
    --monetization-section-padding-mobile: 2.5rem; /* 40px */
    --monetization-section-padding-mobile-lg: 3.5rem; /* 56px */
    
    /* Legacy spacing mappings for backward compatibility */
    --space-xs: var(--space-2);
    --space-s: var(--space-3);
    --space-m: var(--space-4);
    --space-l: var(--space-6);
    --space-xl: var(--space-8);
    --space-xxl: var(--space-12);
    
    /* ========================================
       MOTION TOKENS
       Short, physical durations for UI
       ======================================== */
    
    /* UI element transitions (buttons, inputs, cards) - Atmospheric System: slower, more intentional */
    --motion-ui-fast: 200ms;  /* Increased from 120ms */
    --motion-ui-base: 300ms;  /* Increased from 180ms */
    --motion-ui-slow: 400ms;  /* Increased from 220ms */
    
    /* Page sections and major reveals - Atmospheric System: slower, calmer */
    --motion-section-fast: 400ms;  /* Increased from 280ms */
    --motion-section-base: 500ms;  /* Increased from 350ms */
    --motion-section-slow: 600ms;  /* Increased from 420ms */
    
    /* Background/atmosphere (can be slower) */
    --motion-atmosphere: 30s;
    
    /* Easing functions */
    --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-section: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Transform limits */
    --transform-ui-max: 6px;  /* Max translateY for UI elements */
    --transform-section-max: 12px;  /* Max translateY for sections */
    
    /* Legacy transition mappings */
    --transition-base: var(--motion-ui-base);
    --transition-fast: var(--motion-ui-fast);
    
    /* ========================================
       SURFACE TOKENS
       Material layer: warm, paper-like surfaces
       ======================================== */
    
    /* Base surface - warm off-white (not pure white) - Atmospheric System */
    --surface-base: var(--bg-parchment, #faf8f5);
    --surface-base-dark: #0b0f26;
    
    /* Card surfaces - paper-like */
    --surface-card: #ffffff;
    --surface-card-dark: #151829;
    
    /* Soft/muted surfaces */
    --surface-soft: #f5f3ff;
    --surface-soft-dark: #1a1f35;
    
    /* Overlay surfaces */
    --surface-overlay: rgba(255, 255, 255, 0.95);
    --surface-overlay-dark: rgba(11, 15, 38, 0.95);
    
    /* Legacy surface mappings */
    --bg-page: var(--surface-base);
    --bg-surface: var(--surface-card);
    --bg-surface-soft: var(--surface-soft);
    
    /* ========================================
       STROKE TOKENS
       Borders replace excessive shadows
       ======================================== */
    
    --stroke-subtle: rgba(0, 0, 0, 0.08);
    --stroke-subtle-dark: rgba(255, 255, 255, 0.1);
    
    --stroke-base: rgba(0, 0, 0, 0.12);
    --stroke-base-dark: rgba(255, 255, 255, 0.15);
    
    --stroke-strong: rgba(0, 0, 0, 0.2);
    --stroke-strong-dark: rgba(255, 255, 255, 0.25);
    
    /* Legacy border mappings */
    --border-subtle: var(--stroke-subtle);
    --border-strong: var(--stroke-base);
    
    /* ========================================
       SHADOW SCALE
       Max 3 levels: tight, subtle, elevated
       ======================================== */
    
    /* Tight shadow - minimal elevation */
    --shadow-tight: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-tight-dark: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
    
    /* Subtle shadow - standard card elevation */
    --shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-subtle-dark: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.5);
    
    /* Elevated shadow - prominent cards/modals */
    --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.1);
    --shadow-elevated-dark: 0 4px 8px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.6);
    
    /* Legacy shadow mappings */
    --shadow-soft: var(--shadow-subtle);
    --velora-shadow-sm: var(--shadow-tight);
    --velora-shadow-md: var(--shadow-subtle);
    --velora-shadow-lg: var(--shadow-elevated);
    
    /* ========================================
       RADII SCALE
       Consistent border radius values
       ======================================== */
    
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 999px;
    
    /* Legacy radius mappings */
    --radius-card: var(--radius-lg);
    --radius-button: var(--radius-full);
    --radius-input: var(--radius-md);
    
    /* ========================================
       INTERACTION PHYSICS
       Mechanical feedback tokens
       ======================================== */
    
    /* Press states */
    --press-down: translateY(1px);
    --press-down-strong: translateY(2px);
    
    /* Focus ring */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--velora-accent-primary, #6B46C1);
    
    /* Hover contrast change (not scale) */
    --hover-contrast: 0.05;  /* Opacity change for hover backgrounds */
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-theme="dark"] {
    --surface-base: var(--surface-base-dark);
    --surface-card: var(--surface-card-dark);
    --surface-soft: var(--surface-soft-dark);
    --surface-overlay: var(--surface-overlay-dark);
    
    --stroke-subtle: var(--stroke-subtle-dark);
    --stroke-base: var(--stroke-base-dark);
    --stroke-strong: var(--stroke-strong-dark);
    
    --shadow-tight: var(--shadow-tight-dark);
    --shadow-subtle: var(--shadow-subtle-dark);
    --shadow-elevated: var(--shadow-elevated-dark);
}

/* ========================================
   ATMOSPHERE LAYER
   Background effects (non-interactive, can drift)
   ======================================== */

.grounding-atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Grain/noise overlay for organic feel */
.grounding-atmosphere::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

[data-theme="dark"] .grounding-atmosphere::before {
    opacity: 0.02;
}

/* ========================================
   MATERIAL LAYER
   Interactive elements (must feel physical)
   ======================================== */

.grounding-material {
    position: relative;
    z-index: 1;
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-ui-fast: 0ms;
        --motion-ui-base: 0ms;
        --motion-ui-slow: 0ms;
        --motion-section-fast: 0ms;
        --motion-section-base: 0ms;
        --motion-section-slow: 0ms;
    }
    
    .grounding-atmosphere::before {
        animation: none;
    }
}

/* ========================================
   LEGACY COMPATIBILITY
   Map existing variables to grounding tokens
   ======================================== */

:root {
    /* Map existing --velora-* variables to grounding tokens */
    --velora-bg-page: var(--surface-base);
    --velora-bg-surface: var(--surface-card);
    --velora-bg-surface-soft: var(--surface-soft);
    
    /* Ensure existing code continues to work */
    --velora-shadow-sm: var(--shadow-tight);
    --velora-shadow-md: var(--shadow-subtle);
    --velora-shadow-lg: var(--shadow-elevated);
    
    --velora-border-subtle: var(--stroke-subtle);
    --velora-border-strong: var(--stroke-base);
}