/* ============================================================
   STAYFARE CUSTOM STYLES & TOKENS (STATIC ASSET - NO BUILD STEP)
   ============================================================ */

:root {
    --color-surface: #fcf9f8;
    --color-surface-dim: #dcd9d8;
    --color-surface-bright: #fcf9f8;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f6f3f2;
    --color-surface-container: #f0eded;
    --color-surface-container-high: #eae7e7;
    --color-surface-container-highest: #e4e2e1;
    --color-on-surface: #1b1c1c;
    --color-on-surface-variant: #414844;
    --color-inverse-surface: #303030;
    --color-inverse-on-surface: #f3f0ef;
    --color-outline: #717973;
    --color-outline-variant: #c1c8c2;
    --color-surface-tint: #3f6653;
    --color-primary: #012d1d;
    --color-on-primary: #ffffff;
    --color-primary-container: #1b4332;
    --color-on-primary-container: #86af99;
    --color-inverse-primary: #a5d0b9;
    --color-secondary: #735c00;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #fddd7c;
    --color-on-secondary-container: #776005;
    --color-tertiary: #242625;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #3a3c3b;
    --color-on-tertiary-container: #a5a6a4;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-background: #fcf9f8;
    --color-on-background: #1b1c1b;
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
    background-color: var(--color-background);
    color: var(--color-on-surface);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    border: none;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:hover {
    background-color: var(--color-primary-container);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(231, 198, 48, 0.641);
}

/* ============================================================
   SECTION LABEL / EYEBROW TEXT
   ============================================================ */
.section-label {
    color: var(--color-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    display: block;
}

/* ============================================================
   CARDS
   ============================================================ */
.card-hover {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -16px rgba(26, 41, 51, 0.12);
}

/* ============================================================
   IMAGE HOVER
   ============================================================ */
.image-hover {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.group:hover .image-hover {
    transform: scale(1.06);
}

/* ============================================================
   SCROLLBAR CUSTOM
   ============================================================ */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--color-background);
}

::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 0;
}

/* ============================================================
   UTILITY: LINE CLAMP
   ============================================================ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (max-width: 640px) {
    .btn-primary {
        padding: 0.625rem 1.25rem;
        font-size: 0.75rem;
    }
}