/**
 * Hummingbird Core — Design tokens, layout primitives, and reusable components.
 *
 * Loaded globally on every page (priority 25, before page-specific CSS).
 * Theme files (e.g. charcoal-sage.css) load after this and override tokens.
 *
 * Contents:
 *   1. Color tokens (base — overridden by theme CSS)
 *   2. Typography presets
 *   3. Section layout primitives
 *   4. Section labels & decorative elements
 *   5. Buttons
 *   6. Cards
 *   7. Scroll animations
 *   8. Spacing utilities
 *   9. Mobile overrides
 */

/* ================================================================
   1. COLOR TOKENS (base — theme CSS overrides these)
   ================================================================ */
:root {
    /* ── Brand ── */
    --hb-primary: #A07DF2;              /* Wisteria Velvet */
    --hb-champagne: #D4B896;            /* Aged Champagne */
    --hb-lavender: #C9B5F6;             /* Lavender Mist */
    --hb-plum: #7B5AC9;                 /* Royal Plum (hover/pressed) */

    /* ── Dark surfaces ── */
    --hb-dark: #1E1A2B;                 /* Midnight Aubergine */
    --hb-dark-elevated: #2A2539;        /* Twilight Slate */
    --hb-dark-deep: #151220;            /* Black Orchid */

    /* ── Light surfaces ── */
    --hb-cream: #FAF7F4;                /* Warm Ivory */
    --hb-parchment: #F3EDE6;            /* Parchment */
    --hb-card: #FFFFFF;                 /* Pure White */

    /* ── Text ── */
    --hb-heading: #2C2438;              /* Dusk Charcoal */
    --hb-body: #4A4155;                 /* Dusty Plum Gray */
    --hb-muted: #9890A3;               /* Haze */
    --hb-text-on-dark: #F5F0EB;        /* Warm off-white for headings on dark bg */
    --hb-text-on-dark-sub: rgba(245, 240, 235, 0.7);  /* Body text on dark bg */

    /* ── Borders ── */
    --hb-border: #E5DDD4;              /* Bisque */

    /* ── Derived / alpha variants ── */
    --hb-champagne-60: rgba(212, 184, 150, 0.6);
    --hb-champagne-40: rgba(212, 184, 150, 0.4);
    --hb-champagne-20: rgba(212, 184, 150, 0.2);
    --hb-primary-glow: rgba(160, 125, 242, 0.25);
    --hb-primary-muted: rgba(160, 125, 242, 0.12);
    --hb-glass: rgba(255, 255, 255, 0.05);
    --hb-glass-border: rgba(255, 255, 255, 0.08);

    /* ── Typography ── */
    --hb-font-display: 'Cormorant Garamond', Georgia, serif;
    --hb-font-body: 'Jost', -apple-system, 'Segoe UI', sans-serif;

    /* ── Spacing ── */
    --hb-space-section: 120px;
    --hb-space-section-sm: 80px;
    --hb-space-block: 48px;
    --hb-space-element: 24px;
    --hb-space-tight: 12px;
}

/* ── Chinese typography override ── */
:lang(zh-hans),
:lang(zh),
.lang-zh-hans {
    --hb-font-display: 'PingFang SC', 'Microsoft YaHei', 'DM Sans', sans-serif;
}


/* ================================================================
   2. TYPOGRAPHY PRESETS
   ================================================================ */
.hb-display {
    font-family: var(--hb-font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--hb-heading);
}

.hb-section-heading {
    font-family: var(--hb-font-display);
    font-size: 38px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: var(--hb-heading);
}

.hb-section-heading--light {
    color: var(--hb-text-on-dark);
}

.hb-body {
    font-family: var(--hb-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--hb-body);
}

.hb-muted {
    color: var(--hb-muted);
}


/* ================================================================
   3. SECTION LAYOUT PRIMITIVES
   ================================================================ */
.hb-section {
    padding: calc(var(--hb-space-section) * 0.7) 0 var(--hb-space-section);
}

.hb-section__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.hb-section__heading {
    font-family: var(--hb-font-display);
    font-size: 38px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.25;
    color: var(--hb-heading);
    text-align: center;
    margin-bottom: var(--hb-space-block);
}

.hb-section__heading--light {
    color: var(--hb-text-on-dark);
}


/* ================================================================
   4. SECTION LABELS & DECORATIVE ELEMENTS
   ================================================================ */

/* Section label — champagne uppercase with flanking lines */
.hb-section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: var(--hb-font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hb-champagne);
    margin-bottom: 20px;
}

.hb-section-label::before,
.hb-section-label::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--hb-champagne-60);
}

/* Dark variant — for dark-background sections */
.hb-section-label--dark {
    color: var(--hb-champagne);
}

.hb-section-label--dark::before,
.hb-section-label--dark::after {
    background: rgba(212, 184, 150, 0.3);
}

/* Accent line — thin gradient rule */
.hb-accent-line {
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--hb-primary), var(--hb-lavender));
    border-radius: 1px;
}

.hb-accent-line--center {
    margin-left: auto;
    margin-right: auto;
}

/* Divider — champagne tinted */
.hb-divider {
    border: none;
    height: 1px;
    background: var(--hb-champagne-40);
    margin: 40px 0;
}


/* ================================================================
   5. BUTTONS
   ================================================================ */
.hb-btn {
    display: inline-block;
    font-family: var(--hb-font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 36px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hb-btn:visited,
.hb-btn:active {
    color: inherit;
}

/* Primary: gradient with glow */
.hb-btn--primary {
    background: linear-gradient(135deg, var(--hb-primary), var(--hb-lavender));
    color: var(--hb-text-on-dark);
    border-color: transparent;
    box-shadow: 0 4px 20px var(--hb-primary-glow);
}

.hb-btn--primary:hover {
    box-shadow: 0 8px 32px rgba(160, 125, 242, 0.4);
    transform: translateY(-2px);
}

/* Secondary: champagne outline */
.hb-btn--secondary {
    background: transparent;
    color: var(--hb-champagne);
    border-color: var(--hb-champagne-60);
}

.hb-btn--secondary:hover {
    background: var(--hb-champagne);
    color: var(--hb-dark);
    border-color: var(--hb-champagne);
}

/* Glass: frosted glass on dark backgrounds */
.hb-btn--glass {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--hb-text-on-dark);
}

.hb-btn--glass:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--hb-champagne-40);
}

/* Dark: solid dark button for light backgrounds */
.hb-btn--dark {
    background: var(--hb-dark);
    color: var(--hb-text-on-dark);
    border-color: var(--hb-dark);
}

.hb-btn--dark:hover {
    background: var(--hb-dark-elevated);
    border-color: var(--hb-dark-elevated);
}


/* ================================================================
   6. CARDS — reusable card component
   ================================================================ */
.hb-card {
    background: var(--hb-card);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.hb-card__title {
    font-family: var(--hb-font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--hb-heading);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.hb-card__text {
    font-family: var(--hb-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--hb-body);
    margin: 0;
}


/* ================================================================
   7. SCROLL ANIMATIONS — only when JS is active (.hb-js on <html>)
   ================================================================ */
.hb-js .hb-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                backdrop-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-backdrop-filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hb-js .hb-fade-up.hb-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .hb-js .hb-fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ================================================================
   8. SPACING UTILITIES
   ================================================================ */
.hb-spacer--20 { height: 20px; }
.hb-spacer--50 { height: 50px; }
.hb-spacer--section { height: var(--hb-space-section); }


/* ================================================================
   9. MOBILE OVERRIDES
   ================================================================ */
@media (max-width: 767px) {
    :root {
        --hb-space-section: 72px;
        --hb-space-section-sm: 48px;
        --hb-space-block: 32px;
        --hb-space-element: 16px;
    }

    .hb-section-heading,
    .hb-section__heading {
        font-size: 28px;
    }
}