/* css/tos.css */

/* ==========================================================================
   1. SMOOTH SCROLL & GLOBAL TRANSITIONS
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    /* Default Dark Mode Cursor */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%235865F2" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="6"/></svg>') 12 12, auto;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Interactive Elements Cursor */
a, button, select, input, textarea {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%235865F2" stroke-width="4"><circle cx="12" cy="12" r="10"/></svg>') 12 12, pointer !important;
}

/* ==========================================================================
   2. LIGHT MODE THEME OVERRIDES
   ========================================================================== */
body.light-mode {
    --bg-color: #f4f4f5;
    --card-bg: rgba(255, 255, 255, 0.9);
    --text-primary: #121214;
    --text-secondary: #4a4a55;
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.05);
    
    background-color: var(--bg-color);
    color: var(--text-primary);
    
    /* Light Mode Cursor */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%235865F2" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="6"/></svg>') 12 12, auto;
}

/* Light Mode Component Overrides */
body.light-mode .info-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px var(--shadow-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Typography Color Overrides for Light Mode */
body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode .legal-title {
    color: var(--text-primary);
}

body.light-mode p,
body.light-mode .subtitle,
body.light-mode .legal-meta,
body.light-mode .legal-section p {
    color: var(--text-secondary);
}

/* Legal Section Box Overrides for Light Mode */
body.light-mode .legal-section {
    background: rgba(0, 0, 0, 0.02);
    border-left: 3px solid #5865F2; /* Retains the Blurple accent */
}

/* ==========================================================================
   3. ANIMATIONS
   ========================================================================== */
/* Smooth Fade-in animation for content */
.info-card {
    animation: smoothFadeIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0; /* Ensures it starts hidden before the animation kicks in */
}

@keyframes smoothFadeIn {
    from { 
        opacity: 0; 
        transform: translateY(25px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}