/* Modern CSS Variables for Tailwind Integration */
/* Generated for cp_id: 1 */
/* This file is auto-generated - do not edit directly */

:root {
    /* Page colors */
    --page-bg: #1c150f;
    --page-text: #ffffff;
    --page-link: #9a4528;

    /* Body/content area colors */
    --body-bg: #ffffff;
    --body-text: #444444;
    --body-link: #632100;

    /* Header/brand colors */
    --primary: #1c150f;
    --primary-light: #322c26;
    --primary-dark: #16100c;
    --primary-text: #9a4528;

    /* Navigation/tab colors */
    --nav-bg: #990000;
    --nav-text: #FFFFFF;

    /* Border color */
    --border: #e5e7eb;

    /* Fonts */
    --font-heading: Trebuchet MS;
    --font-body: Trebuchet MS;
}

/* Utility classes using CSS variables */
.bg-page { background-color: var(--page-bg); }
.text-page { color: var(--page-text); }
.bg-body { background-color: var(--body-bg); }
.text-body { color: var(--body-text); }
.bg-primary { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-primary-dark { background-color: var(--primary-dark); }
.text-primary { color: var(--primary); }
.text-primary-contrast { color: var(--primary-text); }
.bg-nav { background-color: var(--nav-bg); }
.text-nav { color: var(--nav-text); }
.border-theme { border-color: var(--border); }
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

/* Link styling */
a.link-body { color: var(--body-link); }
a.link-body:hover { opacity: 0.8; }
a.link-page { color: var(--page-link); }
a.link-page:hover { opacity: 0.8; }

/* Button styles using theme colors */
.btn-primary {
    background-color: var(--primary);
    color: var(--primary-text);
}
.btn-primary:hover {
    background-color: var(--primary-dark);
}

/* Card/panel with theme colors */
.card-themed {
    background-color: var(--body-bg);
    border: 1px solid var(--border);
}
.card-header-themed {
    background-color: var(--primary);
    color: var(--primary-text);
}

/* Card Style: Shadow */
.card-style {
    background-color: var(--body-bg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
}
.card-style:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Button Style: rounded */
.btn-style {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}
.btn-style-primary {
    border-radius: 0.5rem;
    background-color: var(--primary);
    color: var(--primary-text);
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}
.btn-style-primary:hover {
    background-color: var(--primary-dark);
}
.btn-style-secondary {
    border-radius: 0.5rem;
    background-color: var(--nav-bg);
    color: var(--nav-text);
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}

/* Dark Mode Disabled */
.dark-mode-enabled { display: none; }
.dark-mode-disabled { display: block; }

/* Navigation Position: top */
.nav-position-data::before { content: "top"; }

/* Footer Style: standard */
.footer-style-data::before { content: "standard"; }