:root {
    --bg: #07090d;
    --bg-accent: #0f1621;
    --surface: #0f151e;
    --surface-2: #131b26;
    --border: #2a3445;
    --text: #edf3ff;
    --text-muted: #b8c2d6;
    --primary: #f0bc69;
    --primary-strong: #db9f47;
    --primary-highlight: #ffd58b;
    --success: #2fd084;
    --danger: #ff6b6b;
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 20px 44px rgba(0, 0, 0, 0.52);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}

body.app-body {
    font-family: "IBM Plex Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 187, 92, 0.15), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(255, 133, 38, 0.12), transparent 30%),
        linear-gradient(180deg, #07090d 0%, #0b0e14 58%, #090b10 100%);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
}

body.app-body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(125deg, rgba(255, 197, 109, 0.05), transparent 55%),
        radial-gradient(circle at 6% 110%, rgba(255, 170, 67, 0.08), transparent 42%);
    pointer-events: none;
    z-index: 0;
}

.app-main,
.app-header {
    position: relative;
    z-index: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Sora", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    letter-spacing: -0.01em;
}

a {
    color: var(--primary-highlight);
    text-decoration: none;
}

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

.text-muted {
    color: var(--text-muted) !important;
}

body.dark-mode {
    --bg: #04060a;
    --bg-accent: #0a111a;
    --surface: #0b1119;
    --surface-2: #101722;
    --border: #2a3140;
    --text: #f3f7ff;
    --text-muted: #b4bfd4;
    --primary: #ffd08a;
    --primary-strong: #e2aa58;
    --primary-highlight: #ffe2b3;
    --success: #39d98a;
    --danger: #ff7575;
    --shadow-sm: 0 12px 26px rgba(0, 0, 0, 0.44);
    --shadow-md: 0 24px 52px rgba(0, 0, 0, 0.6);
}

body.dark-mode a:hover {
    color: var(--primary);
}

body.dark-mode .bg-light,
body.dark-mode .bg-white {
    background-color: var(--surface) !important;
}