/* ============================
   VARIABLES (Single Source of Truth)
============================ */
:root {
    /* Brand Palette */
    --brand-blue:    #0881B6;
    --brand-yellow:  #FFDE59;
    --brand-dark:    #211c19;
    --brand-muted:   #748D68;
    --brand-white:   #FFFFFF;
    --brand-light:   #F9F8F6; /* Luxury off-white background */
    
    /* functional Colors */
    --color-error:   #ef4444; 
    --color-border:  #e5e7eb; 
}

/* TYPOGRAPHY UTILITIES 
   (Mirroring the Tailwind config for non-Tailwind elements)
/* Update these utility classes to match the new names */
.font-cormorant { font-family: 'Cormorant Garamond', serif; }
.font-pinyon    { font-family: 'Pinyon Script', cursive; }
.font-vibes     { font-family: 'Great Vibes', cursive; }
.font-tenor     { font-family: 'Tenor Sans', sans-serif; letter-spacing: 0.1em; }
.font-bodoni    { font-family: 'Bodoni Moda', serif; }
.font-noto      { font-family: 'Noto Serif Display', serif; }

/* Keep your existing button and input styles below */


/* ============================
   MASTER TYPOGRAPHY BASE
   This applies fonts to tags automatically
============================ */

body {
    font-family: 'Inter', sans-serif; /* Clean baseline for UI */
    background-color: var(--brand-light);
    color: var(--brand-dark);
    line-height: 1.6;
}

/* High-End Hero Titles */
h1, h2 {
    font-family: 'Bodoni Moda', serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Section Sub-headings */
h3, h4 {
    font-family: 'Noto Serif Display', serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Elegant Editorial Body Text */
/* Using Cormorant for paragraphs makes them look like a luxury magazine */
p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem; /* Serifs need to be slightly larger to read well */
    color: #4a4a4a;
}

/* Navigation, Buttons, and Small Labels */
/* Using Tenor Sans gives that clean "Calgary" look everywhere */
a, button, .nav-link, .label, .btn {
    font-family: 'Tenor Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ============================
   BUTTONS (Updated to use the "Base")
============================ */

.btn-primary {
    background-color: var(--brand-blue);
    color: var(--brand-white);
    padding: 1rem 2.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem; /* Small all-caps look is more premium */
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #066a96;
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -5px rgba(8, 129, 182, 0.3);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--brand-dark);
    color: var(--brand-dark);
    padding: 0.8rem 2rem;
    border-radius: 999px;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--brand-dark);
    color: white;
}



.btn-soft {
    background: var(--brand-yellow);
    color: var(--brand-dark);
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    transition: transform 0.2s;
}

.btn-soft:hover {
    transform: scale(1.03);
    opacity: 0.95;
}

/* ============================
   INPUTS & FORMS
============================ */

.input {
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background-color: var(--brand-white);
    color: var(--brand-dark);
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: all 0.2s ease;
}

.input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(8, 129, 182, 0.08);
}

.input.error {
    border-color: var(--color-error);
    background-color: #fffafb;
}

/* ============================
   STATUS BADGES
============================ */

.badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.7rem;
    font-family: 'Tenor Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    line-height: 1;
}

.badge-confirmed  { background: #ecfdf5; color: #065f46; }
.badge-pending    { background: #fffbeb; color: #92400e; }
.badge-checked-in { background: #eff6ff; color: var(--brand-blue); }
.badge-cancelled  { background: #fef2f2; color: #991b1b; }

/* ============================
   FOOTER SPECIAL EFFECTS
============================ */

.thhp-footer {
    position: relative;
    background: linear-gradient(to bottom, rgba(33, 28, 25, 0) 0%, rgba(33, 28, 25, 1) 40%);
    padding-top: 180px; 
}

.footer-hero-image {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));
}

/* ============================
   UTILITIES
============================ */

::selection {
    background: var(--brand-yellow);
    color: var(--brand-dark);
}

.text-error { color: var(--color-error); }

/* Custom Tracking for Luxury Look */
.tracking-extrawide { letter-spacing: 0.3em; }