/* ============================================================
   STYLES — Design tokens, reset, base typography, global FX
   ============================================================ */

:root {
    --cream: #f8f6f1;
    --cream-dark: #efeae0;
    --white: #ffffff;
    --charcoal: #4a4543;
    --charcoal-light: #6b6563;
    --muted: #9a9590;
    --border: #e0dbd3;
    --border-light: #ece8e2;
    --gold: #b8960b;
    --gold-hover: #a3850a;
    --gold-light: #c9a84c;
    --gold-pale: #f0e6cc;
    --gold-bg: #faf7f0;
    /* Brand cream-gold for splash / login left-side / branded surfaces */
    --brand-cream-gold: #e8d8b0;
    --brand-cream-soft: #f1e8d2;
    --green: #5a8a5e;
    --green-bg: #eef5ef;
    --red: #c4544a;
    --red-bg: #fdf0ef;
    --amber-bg: #fef8ec;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Outfit', sans-serif; background: #f3f0e8; color: var(--charcoal); min-height: 100vh; }
.font-display { font-family: 'Cormorant Garamond', serif; }

/* HTML5 hidden attribute. Override needed so it wins against ID/class
   selectors that explicitly set display (e.g. #cal-loading { display: flex }). */
[hidden] { display: none !important; }

/* Splash Loader */
.app-loader { position: fixed; inset: 0; z-index: 9999; background: linear-gradient(135deg, var(--cream) 0%, var(--gold-bg) 100%); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; }
.app-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; animation: loaderFadeIn 0.4s ease; }
.app-loader-logo { text-align: center; }
.app-loader-logo .logo-text { font-family: 'Cormorant Garamond', serif; font-size: 44px; font-weight: 400; letter-spacing: 0.3em; color: var(--charcoal); padding-left: 0.3em; }
.app-loader-logo .logo-text span { color: var(--gold); font-style: italic; }
.app-loader-logo .logo-sub { font-size: 10px; letter-spacing: 0.5em; color: var(--muted); text-transform: uppercase; margin-top: 4px; padding-left: 0.5em; }
.app-loader-spinner { width: 38px; height: 38px; border: 2px solid var(--gold-pale); border-top-color: var(--gold); border-radius: 50%; animation: loaderSpin 0.9s linear infinite; }
.app-loader-text { font-size: 12px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 300; }
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Swirl decoration */
.swirl { position: absolute; pointer-events: none; opacity: 0.06; }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.4s ease-out both; }
.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.1s; }
.fade-up-3 { animation-delay: 0.15s; }

/* Utility classes (reusable across components) */
.mt-section { margin-top: 22px; }
.flex-1 { flex: 1; }
.text-muted-sm { font-size: 13px; color: var(--muted); font-weight: 300; }