/**
 * @file style.css
 * @description Global stylesheet for TokenPiazza
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* =========================================
   1. CSS Variables & Theming
   ========================================= */
:root {
    --primary-blue: #1e3a8a;
    --tech-teal: #0d9488;
    --bg-white-gray: #f8fafc;
    --deep-navy: #0f172a;
    --header-bg: rgba(255, 255, 255, 0.85);
    --text-main: #1e293b;
    --text-muted: #64748b;
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
}

[data-theme='dark'] {
    --bg-white-gray: #020617;
    --header-bg: rgba(15, 23, 42, 0.9);
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --card-bg: #1e293b;
    --border-color: #334155;
}

/* =========================================
   2. Global Base Styles
   ========================================= */
body {
    font-family: 'Inter', "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif !important;
    background-color: var(--bg-white-gray);
    color: var(--text-main);
    scroll-behavior: smooth;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.section-container {
    padding-left: 10%;
    padding-right: 10%;
}

@media (min-width: 1024px) {
    .section-container {
        padding-left: 15%;
        padding-right: 15%;
    }
}

.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s ease-out; 
}

.reveal.show { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Mobile Menu Animations (Injected by JS) */
#mobile-menu { transition: transform 0.3s ease-in-out; transform: translateX(100%); }
#mobile-menu.open { transform: translateX(0); }

/* =========================================
   3. Landing Page Specific (index.html)
   ========================================= */
.hero-bg { 
    background-size: cover; 
    background-position: center; 
    min-height: 80vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}
body:not([data-theme='dark']) .hero-bg { 
    background-image: linear-gradient(to right, rgba(255,255,255,0.95) 30%, rgba(255,255,255,0.2) 100%), url('../img/hero background.jpg'); 
}
[data-theme='dark'] .hero-bg { 
    background-image: linear-gradient(to right, rgba(2, 6, 23, 0.9) 30%, rgba(2, 6, 23, 0.3) 100%), url('../img/hero background (dark).jpg'); 
}

.featured-content-box {
    border-radius: 32px;
    background-size: cover;
    background-position: center;
    transition: background 0.3s ease;
}
body:not([data-theme='dark']) .featured-content-box {
    background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('../img/AI map (white).jpg');
}
[data-theme='dark'] .featured-content-box {
    background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url('../img/AI map (white).jpg');
}

.carousel-track { 
    display: flex; 
    gap: 1.5rem; 
    animation: scroll 30s linear infinite; 
    width: max-content; 
}
@keyframes scroll { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

.step-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid var(--border-color);
}
.step-number-circle {
    position: absolute; top: 1.5rem; left: 1.5rem; width: 32px; height: 32px;
    background-color: var(--tech-teal); color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.875rem; z-index: 10;
}

.prop-card i { display: inline-block !important; line-height: 1; }

/* =========================================
   4. Legal Pages (privacy.html & terms.html)
   ========================================= */
.terms-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--tech-teal);
}

.terms-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.back-button:hover {
    transform: translateX(-4px);
}