/**
 * Theme Engine - Global Design Tokens
 * This file defines the core variables used across the entire website.
 * Themes override these variables to change the look and feel.
 */

:root {
    /* --- Base Color System (Defaults to Dark Blue) --- */
    --theme-bg-primary: #0a1e3c;
    --theme-bg-secondary: #142d52;
    --theme-bg-dark: #071631;
    --theme-bg-light: #1e3359;

    --theme-brand-primary: #0a1e3c;
    --theme-brand-secondary: #1a3a6e;
    --theme-brand-accent: #3d5af1;
    --theme-brand-accent-rgb: 61, 90, 241;

    --theme-text-primary: #ffffff;
    --theme-text-secondary: #a8b9d5;
    --theme-text-muted: #6c8ab5;

    --theme-border-color: rgba(255, 255, 255, 0.1);
    --theme-card-bg: var(--theme-bg-secondary);

    /* --- Decoration Variables --- */
    --theme-decoration-image: none;
    --theme-decoration-opacity: 0.05;
    --theme-decoration-item-left: none;
    --theme-decoration-item-right: none;

    /* --- Transitions --- */
    --theme-transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Global Decoration Container --- */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--theme-decoration-image);
    background-repeat: repeat;
    opacity: var(--theme-decoration-opacity);
    pointer-events: none;
    z-index: -1;
    transition: var(--theme-transition-base);
}

/* Base Body Application */
body {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
    transition: var(--theme-transition-base);
}