/*
Theme Name: Deelvesh Desktop
Theme URI: https://deelveshbunjun.com
Author: Deelvesh Bunjun
Author URI: https://deelveshbunjun.com
Description: Branded learning desktop with multiwindow apps, a virtual Files library, original wallpapers, cookie permissions, and administrator-only HTML app, infographic and folder management. Preserves the original CS Quest curriculum tools.
Version: 2.1.0
Tested up to: 7.1.3
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: cs-quest-theme
Tags: education, gamification, dark-mode, responsive-layout, custom-menu, full-width-template
*/

:root {
    /* Notion-Inspired Minimalist Palette */
    --cs-primary: #2563eb;
    --cs-primary-hover: #1d4ed8;
    --cs-accent: #0ea5e9;

    /* Light Theme (Notion Clean White) */
    --cs-bg: #fbfbfa;
    --cs-surface: #ffffff;
    --cs-surface-alt: #f1f1ef;
    --cs-border: #e9e9e7;
    --cs-border-subtle: #f3f3f2;
    --cs-text: #37352f;
    --cs-text-muted: #787774;
    --cs-text-light: #9b9a97;
    --cs-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --cs-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Radii */
    --cs-radius-sm: 6px;
    --cs-radius-md: 10px;
    --cs-radius-lg: 14px;
    --cs-radius-full: 9999px;

    /* Fonts & Typography */
    --cs-font-main: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
    --cs-font-heading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
    --cs-font-mono: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace;
}

/* Dark Theme (Notion Dark Mode) */
[data-theme="dark"] {
    --cs-bg: #191919;
    --cs-surface: #202020;
    --cs-surface-alt: #2c2c2c;
    --cs-border: #333333;
    --cs-border-subtle: #262626;
    --cs-text: #e6e6e5;
    --cs-text-muted: #9b9a97;
    --cs-text-light: #6e6d6a;
    --cs-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --cs-card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* Base Reset & Core Elements */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--cs-font-main);
    background-color: var(--cs-bg);
    color: var(--cs-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: var(--cs-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--cs-primary-hover);
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container */
.cs-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cs-font-heading);
    color: var(--cs-text);
    line-height: 1.25;
    margin-top: 0;
    font-weight: 700;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.35rem; }

@media (min-width: 768px) {
    h1 { font-size: 2.75rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
}

/* Custom Buttons */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--cs-radius-md);
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px; /* Minimum accessible touch target */
}

.cs-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cs-btn:active {
    transform: translateY(0);
}

.cs-btn-primary {
    background: linear-gradient(135deg, var(--cs-primary) 0%, #2563eb 100%);
    color: #ffffff !important;
}

.cs-btn-secondary {
    background: var(--cs-surface);
    color: var(--cs-text) !important;
    border: 1px solid var(--cs-border);
}

.cs-btn-secondary:hover {
    background: var(--cs-surface-alt);
}

.cs-btn-rpg {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.cs-btn-tuition {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}

.cs-btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
    border-radius: var(--cs-radius-sm);
    min-height: 38px;
}