/* Copyright (C) 2026 JSLY
 * SPDX-License-Identifier: AGPL-3.0-or-later */

:root {
    --primary: #66bb6a;
    --primary-light: #a5d6a7;
    --primary-dark: #43a047;
    --secondary: #26a69a;
    --dark: #333;
    --light: #f8f9fa;
    --gray: #6c757d;
    --light-gray: #e9ecef;
    --border: #dee2e6;
    --bg-card: #ffffff;
    --text-color: #333;
    --border-color: #dee2e6;
    --bg-hover: #e9ecef;
    --transition: all 0.3s ease;
    --scrollbar-thumb: #ccc;
    --scrollbar-thumb-hover: #aaa;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', Tahoma, Geneva, Verdana, sans-serif;
}

/* Global scrollbar styles */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

body {
    background-color: var(--light);
    color: var(--dark);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #81c784;
        --primary-light: #a5d6a7;
        --primary-dark: #66bb6a;
        --secondary: #4db6ac;
        --dark: #e0e0e0;
        --light: #1a1a2e;
        --gray: #b0b0b0;
        --light-gray: #2a2a3e;
        --border: #3a3a4e;
        --bg-card: #2a2a3e;
        --text-color: #e0e0e0;
        --border-color: #3a3a4e;
        --bg-hover: #3a3a4e;
        --scrollbar-thumb: #444;
        --scrollbar-thumb-hover: #666;
    }
}

/* .dark-mode class (JS toggle) uses same dark vars — keep in sync with above */
:root.dark-mode {
    --primary: #81c784;
    --primary-light: #a5d6a7;
    --primary-dark: #66bb6a;
    --secondary: #4db6ac;
    --dark: #e0e0e0;
    --light: #1a1a2e;
    --gray: #b0b0b0;
    --light-gray: #2a2a3e;
    --border: #3a3a4e;
    --bg-card: #2a2a3e;
    --text-color: #e0e0e0;
    --border-color: #3a3a4e;
    --bg-hover: #3a3a4e;
    --scrollbar-thumb: #444;
    --scrollbar-thumb-hover: #666;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.btn {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(102, 187, 106, 0.3);
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 10px 20px rgba(102, 187, 106, 0.3);
}

.section {
    padding: 80px 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}