/* ==========================================================================
   DESIGN SYSTEM - EZ2RUN
   ========================================================================== */

/* 
 * TABLE OF CONTENTS
 * ---------------------------
 * 1. VARIABLES
 *    - Colors
 *    - Typography
 *    - Spacing
 *    - Components
 * 2. BASE
 *    - Reset
 *    - Body & Global
 *    - Typography
 * 3. LAYOUT
 *    - Container
 *    - Grid
 * 4. COMPONENTS
 *    - Card
 *    - Button
 *    - Footer
 * 5. UTILITIES
 *    - Text Helpers
 *    - Spacing Helpers
 */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {

    /* Re-introducing our custom color palette */
    --color-primary: #38bdf8;
    --color-secondary: #818cf8;
    --color-surface: rgba(30, 41, 59, 0.7);
    --color-surface-border: rgba(255, 255, 255, 0.1);

    --color-text-base: #f8fafc;
    --color-text-secondary: #cbd5e1; /* The proper intermediate color */
    --color-text-muted: #94a3b8;

    --color-background: #0f172a; /* Keep only the background color for the gradient */

    /* Typography - Core Theme */
    --font-family-sans: 'Inter', sans-serif;
    --font-family-mono: 'Google Sans Code', monospace;

    /* Unique Component Styling */
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
 
/* Apply variables specifically for the dark theme to ensure they override Bootstrap's defaults */
[data-bs-theme="dark"] {
    /* Keep our custom background */
    background-color: var(--color-background);
    background-image:
        radial-gradient(at 0% 0%, hsla(197, 92%, 62%, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(258, 89%, 66%, 0.15) 0px, transparent 50%);

    /* Override Bootstrap's variables with our design tokens */
    --bs-body-font-family: var(--font-family-sans);
    --bs-body-color: var(--color-text-base);
    --bs-body-bg: transparent; /* Make body transparent to show our gradient */
    --bs-link-color: var(--color-primary);
    --bs-primary: var(--color-primary); /* Unify the primary theme color with the link color */
    --bs-link-hover-color: var(--color-primary); /* Use primary color for hover as well */
    --bs-secondary-color: var(--color-text-secondary);
}
/* Use our custom font for the main title */
.page-header__title {
    font-family: var(--font-family-mono);
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* Card */
.card {
    /* Apply our glassmorphism effect */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--transition-base);

    /* Override Bootstrap card variables */
    --bs-card-bg: var(--color-surface);
    --bs-card-border-color: var(--color-surface-border);
}

/* Ensure the clickable card title uses the primary link color */
.card-link-animated .card-title {
    /* color: var(--bs-link-color); */
}

/* Re-create the hover glow and arrow animation for our link cards */
.card-link-animated:hover {
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 12px 30px -10px rgba(56, 189, 248, 0.2);
    /* transform: translateY(-4px); */
}

.card-link-animated .card-title::after {
    content: ">";
    color: var(--color-primary);
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition-base);
    margin-left: 0.25rem; /* Use a static value instead of a removed variable */
    display: inline-block;
}

.card-link-animated:hover .card-title::after {
    opacity: 1;
    transform: translateX(0);
}

/* Footer */
.footer {
    /* Let Bootstrap utilities handle all footer styling, but ensure hover color is correct */
}

/* Unify hover color for all key interactive elements */
.footer a:hover, .card-link-animated:hover .card-title {
    color: var(--color-primary) !important; /* Use primary color for hover to keep it consistent */
}
/* ==========================================================================
   5. UTILITIES
   ========================================================================== */