/**
 * ==============================================================================
 * ARLA Theme Palette Dynamic Stylesheet
 * Driven by 3 Root Variables:
 * --color-primary   : Main / Corporate brand color
 * --color-secondary : Secondary / Vibrant accent color
 * --color-accent    : Light secondary / Tertiary soft tint color
 * ==============================================================================
 */

:root {
    --color-primary: #1e335b;
    --color-primary-dark: #02173f;
    --color-primary-light: #41567e;
    --color-primary-rgb: 30, 51, 91;

    --color-secondary: #ec6627;
    --color-secondary-dark: #d34d0e;
    --color-secondary-light: #ff8445;
    --color-secondary-rgb: 236, 102, 39;

    --color-accent: #ff7b00;
    --color-accent-dark: #eb6700;
    --color-accent-light: #ff8f14;
    --color-accent-rgb: 255, 123, 0;

    --color-footer: #1e335b;
    --color-footer-rgb: 30, 51, 91;

    --color-cta-bg: #1e335b;
    --color-cta-rgb: 30, 51, 91;
}

/* ─── Footer & CTA Original Clean Navy Styling ───────────────────────────── */
footer,
.site-footer,
footer.bg-arla-navy,
footer.site-footer {
    background-color: #1e335b !important;
}

.site-cta-banner,
div.site-cta-banner,
.bg-arla-navy.relative.overflow-hidden.py-24,
.bg-arla-navy.relative.overflow-hidden.py-20,
.bg-arla-navy.py-16.text-center {
    background-color: #1e335b !important;
}

/* ─── Semantic Theme Utilities ────────────────────────────────────────────── */
.bg-theme-primary    { background-color: var(--color-primary) !important; }
.bg-theme-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-theme-secondary  { background-color: var(--color-secondary) !important; }
.bg-theme-secondary-dark { background-color: var(--color-secondary-dark) !important; }
.bg-theme-accent     { background-color: var(--color-accent) !important; }
.bg-theme-accent-light { background-color: var(--color-accent-light) !important; }

.text-theme-primary   { color: var(--color-primary) !important; }
.text-theme-secondary { color: var(--color-secondary) !important; }
.text-theme-accent    { color: var(--color-accent) !important; }

.border-theme-primary   { border-color: var(--color-primary) !important; }
.border-theme-secondary { border-color: var(--color-secondary) !important; }
.border-theme-accent    { border-color: var(--color-accent) !important; }

/* ─── Seamless Mapping of Existing Site Classes to Theme Palette ─────────── */

/* 1. Primary Buttons & Brand Elements (Mapped from Arla Navy / Blue-700) */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25) !important;
}

/* Secondary Buttons */
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    color: var(--color-primary) !important;
    border-color: rgba(var(--color-primary-rgb), 0.25) !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
    background-color: var(--color-accent-light) !important;
    color: var(--color-primary-dark) !important;
    border-color: var(--color-primary) !important;
}

/* Existing Brand Navy Classes */
.bg-arla-navy {
    background-color: var(--color-primary) !important;
}

.text-arla-navy {
    color: var(--color-primary) !important;
}

.border-arla-navy {
    border-color: var(--color-primary) !important;
}

.shadow-arla-navy\/20 {
    box-shadow: 0 10px 25px -5px rgba(var(--color-primary-rgb), 0.2) !important;
}

.focus\:ring-arla-navy:focus,
.focus-within\:ring-arla-navy:focus-within {
    --tw-ring-color: var(--color-primary) !important;
}

/* 2. Secondary Brand Classes (Mapped from Arla Orange & Blue-600) */
.bg-arla-orange {
    background-color: var(--color-secondary) !important;
}

.text-arla-orange {
    color: var(--color-secondary) !important;
}

.border-arla-orange {
    border-color: var(--color-secondary) !important;
}

.bg-arla-orange\/10 {
    background-color: rgba(var(--color-secondary-rgb), 0.12) !important;
}

.hover\:bg-arla-orange:hover {
    background-color: var(--color-secondary-dark) !important;
}

.hover\:text-arla-orange:hover {
    color: var(--color-secondary) !important;
}

/* 3. Badge Pills, Subtitles & Highlight Accents */
.bg-blue-50,
.bg-blue-50\/30,
.bg-blue-100\/50,
.bg-blue-100\/60 {
    background-color: rgba(var(--color-secondary-rgb), 0.1) !important;
    color: var(--color-secondary-dark, var(--color-secondary)) !important;
}

.bg-blue-100 {
    background-color: rgba(var(--color-secondary-rgb), 0.16) !important;
}

.border-blue-100,
.border-blue-200 {
    border-color: rgba(var(--color-secondary-rgb), 0.25) !important;
}

.text-blue-600,
.text-blue-700 {
    color: var(--color-secondary) !important;
}

.text-blue-800 {
    color: var(--color-primary-dark) !important;
}

.text-blue-100 {
    color: rgba(255, 255, 255, 0.88) !important;
}

.hover\:text-blue-500:hover,
.hover\:text-blue-600:hover {
    color: var(--color-secondary-dark) !important;
}

/* Dynamic Accent Wave, Badges & Focus Elements */
.theme-badge {
    background-color: rgba(var(--color-secondary-rgb), 0.15);
    color: var(--color-secondary-dark);
    border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
}

.theme-card-accent {
    border-top: 4px solid var(--color-secondary);
}

/* Admin Dashboard Active Items */
.cms-tab-btn.active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary-light) !important;
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), 0.35) !important;
}

.cms-btn-save {
    background: var(--color-secondary) !important;
    box-shadow: 0 2px 12px rgba(var(--color-secondary-rgb), 0.3) !important;
}

.cms-btn-save:hover {
    background: var(--color-secondary-dark) !important;
    box-shadow: 0 4px 16px rgba(var(--color-secondary-rgb), 0.4) !important;
}