/* =========================================================
   Félins & Croquettes — brand utilities & dark-mode remaps.

   CSS variables (the actual color values) live in
   resources/views/partials/brand-head.blade.php because they
   are driven by config/brand.php (PHP). Every other rule —
   semantic utilities, dark-mode overrides, animations — lives
   HERE. Never put hex or CSS-variable references in HTML.
   ========================================================= */

/* ----- Semantic color utilities ---------------------------------- */

/* Text: brand color (dark brown in light, amber in dark) */
.text-brand-text { color: var(--color-brand-text); }

/* Text: always brand brown, regardless of theme (use on light surfaces) */
.text-brand      { color: var(--color-brand); }

/* Text: accent (gold in light, bright amber in dark) */
.text-accent     { color: var(--color-accent); }

/* Backgrounds */
.bg-brand        { background-color: var(--color-brand); }
.bg-accent       { background-color: var(--color-accent); }

/* Hero section: brand gradient background + white text */
.hero-brand {
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
    color: white;
}


/* ----- Dark theme: remap hard-coded Tailwind utilities ----------- */

html[data-theme="dark"] .bg-white     { background: var(--surface) !important; }
html[data-theme="dark"] .bg-gray-100  { background: #2e2114 !important; }

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-t,
html[data-theme="dark"] .border-b,
html[data-theme="dark"] .divide-y > * { border-color: var(--border) !important; }

html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700 { color: var(--color-text) !important; }

html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 { color: var(--muted) !important; }

html[data-theme="dark"] .text-green-700 { color: #5fd07a !important; }
html[data-theme="dark"] .text-red-700   { color: #f08a8a !important; }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #1f160d;
    color: var(--color-text);
    border-color: var(--border);
}


/* ----- Motion / interaction -------------------------------------- */

@keyframes fc-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.fc-reveal   { animation: fc-fade-up .5s ease-out both; }
.fc-reveal-2 { animation: fc-fade-up .5s ease-out .08s both; }

.fc-card { transition: transform .18s ease, box-shadow .18s ease; }
.fc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }

.fc-btn { transition: transform .12s ease, opacity .12s ease; }
.fc-btn:hover  { transform: translateY(-1px); }
.fc-btn:active { transform: translateY(0); opacity: .9; }

@media (prefers-reduced-motion: reduce) {
    .fc-reveal, .fc-reveal-2 { animation: none; }
    .fc-card, .fc-btn { transition: none; }
    .fc-card:hover, .fc-btn:hover { transform: none; }
}