/* ============================================================================
   SITE.ROCKS - SHARED STYLES FOR ALL TOOLS
   ============================================================================
   This file contains global styles that apply to all tools on MasteryAce
   Location: /tools/_assets/shared-styles.css
   
   Include in header.php with:
   <link rel="stylesheet" href="/site/tools/_assets/shared-styles.css">
============================================================================ */

/* CSS Variables - Brand Colors */
:root {
    --primary-purple: #0f172a;
    --primary-blue: #1e293b;
    --gradient-angle: 135deg;
}

/* ============================================================================
   GRADIENT BACKGROUND
   ============================================================================ */

/* Main gradient background - fixed position covers entire viewport */
.gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    z-index: -1;
}

/* Fade effect at bottom of gradient */
.gradient-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #f9fafb);
}

/* Alternative: Full viewport gradient (uncomment if you want gradient everywhere) */
/*
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(var(--gradient-angle), var(--primary-purple) 0%, var(--primary-blue) 100%);
    z-index: -1;
    opacity: 0.95;
}
*/

/* ============================================================================
   BODY SETUP
   ============================================================================ */

/* Ensure body has transparent background to show gradient */
body {
    background: transparent !important;
    position: relative;
    min-height: 100vh;
}

/* Optional: Light background color for content area below gradient */
body::after {
    content: '';
    position: fixed;
    top: 400px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f9fafb;
    z-index: -2;
}

/* ============================================================================
   FUTURE SHARED STYLES
   ============================================================================
   Add any other global styles below that should apply to all tools
   Examples: shared buttons, shared cards, shared animations, etc.
============================================================================ */

/* Example: Shared Card Styling (if needed across tools) */
/*
.shared-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(10px);
}
*/

/* Example: Shared Button Styling (if needed across tools) */
/*
.shared-btn-gradient {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-blue) 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.shared-btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
*/