/* Theme variables
 * These are the default colors. To customize for a specific company,
 * set values in siteConfig.theme (in js/site-config.js).
 * The JS will override these CSS variables at runtime if theme values are provided.
 *
 * Key color roles:
 *   --primary-gold    : Main accent color (headings, highlights)
 *   --secondary-gold  : Secondary accent (links, subtle highlights)
 *   --primary-green   : Action color (buttons, CTAs, links)
 *   --accent-green    : Action hover/overlay color
 */
:root {
    --primary-gold: #1a5276;
    --secondary-gold: #154360;
    --primary-green: #2980b9;
    --accent-green: rgba(41, 128, 185, 0.9);
    --text-color: #1a1a2e;
    --text-muted: rgba(26, 26, 46, 0.7);
    --bg-color: #f8f9fc;
    --card-bg: #ffffff;
    --header-bg: rgba(248, 249, 252, 0.97);
    --footer-bg: #0f1b2d;
    --border-color: rgba(26, 82, 118, 0.2);
    --shadow-color: rgba(26, 82, 118, 0.1);
    --modal-bg: #ffffff;
    --modal-overlay: rgba(15, 27, 45, 0.8);
    --link-color: var(--primary-green);
    --hover-bg: rgba(41, 128, 185, 0.08);
}

[data-theme='dark'] {
    --text-color: #e8edf3;
    --text-muted: rgba(232, 237, 243, 0.72);
    --bg-color: #0d1117;
    --card-bg: #161b22;
    --header-bg: rgba(13, 17, 23, 0.97);
    --footer-bg: #010409;
    --modal-bg: #161b22;
    --modal-overlay: rgba(1, 4, 9, 0.9);
    --hover-bg: rgba(41, 128, 185, 0.12);
    --border-color: rgba(41, 128, 185, 0.2);
    --shadow-color: rgba(26, 82, 118, 0.15);
}