/* ==========================================
   STAY HATCH - DESIGN SYSTEM
   File: design-system.css
   ========================================== */

:root {
    /* ===== PRIMARY COLOURS ===== */
    --sh-navy: #0B1F3A;           /* Deep Navy - Primary */
    --sh-navy-light: #1A3A5C;     /* Lighter navy */
    --sh-navy-dark: #061428;      /* Darker navy */

    /* ===== ACCENT COLOURS ===== */
    --sh-teal: #21C4B7;           /* Aqua Teal - Accent */
    --sh-teal-light: #4DD4C9;     /* Lighter teal */
    --sh-teal-dark: #17A89C;      /* Darker teal */

    /* ===== NEUTRAL COLOURS ===== */
    --sh-white: #FFFFFF;
    --sh-off-white: #F8FAFC;
    --sh-gray-100: #F1F5F9;
    --sh-gray-200: #E2E8F0;
    --sh-gray-300: #CBD5E1;
    --sh-gray-400: #94A3B8;
    --sh-gray-500: #64748B;
    --sh-gray-600: #475569;
    --sh-gray-700: #334155;
    --sh-gray-800: #1E293B;
    --sh-gray-900: #0F172A;

    /* ===== SEMANTIC COLOURS ===== */
    --sh-success: #16A34A;
    --sh-warning: #F59E0B;
    --sh-error: #DC2626;
    --sh-info: #0284C7;

    /* ===== ACCENT YELLOW (Existing — keep) ===== */
    --sh-yellow: #FBBF24;

    /* ===== GRADIENTS ===== */
    --sh-gradient-primary: linear-gradient(135deg, #0B1F3A 0%, #1A3A5C 100%);
    --sh-gradient-accent: linear-gradient(135deg, #21C4B7 0%, #17A89C 100%);
    --sh-gradient-hero: linear-gradient(135deg, #0B1F3A 0%, #0B1F3A 50%, #17A89C 100%);

    /* ===== SPACING ===== */
    --sh-spacing-xs: 4px;
    --sh-spacing-sm: 8px;
    --sh-spacing-md: 16px;
    --sh-spacing-lg: 24px;
    --sh-spacing-xl: 32px;
    --sh-spacing-2xl: 48px;

    /* ===== BORDER RADIUS ===== */
    --sh-radius-sm: 6px;
    --sh-radius-md: 10px;
    --sh-radius-lg: 16px;
    --sh-radius-xl: 24px;

    /* ===== SHADOWS ===== */
    --sh-shadow-sm: 0 1px 3px rgba(11, 31, 58, 0.08);
    --sh-shadow-md: 0 4px 12px rgba(11, 31, 58, 0.1);
    --sh-shadow-lg: 0 12px 32px rgba(11, 31, 58, 0.15);
    --sh-shadow-xl: 0 25px 60px rgba(11, 31, 58, 0.2);

    /* ===== FONTS ===== */
    --sh-font-primary: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --sh-font-secondary: 'Inter', sans-serif;

    /* ===== TRANSITIONS ===== */
    --sh-transition-fast: 0.15s ease;
    --sh-transition-base: 0.25s ease;
    --sh-transition-slow: 0.4s ease;
}

/* ==========================================
   GLOBAL OVERRIDES
   ========================================== */

/* Navbar */
.navbar {
    background: var(--sh-white) !important;
    box-shadow: var(--sh-shadow-sm) !important;
}

.nav-links a {
    color: var(--sh-navy) !important;
    font-weight: 600;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--sh-teal) !important;
}

/* Buttons */
.btn-primary,
.btn-signin,
.btn-search,
.ota-book-btn,
.btn-book-now {
    background: var(--sh-navy) !important;
    color: var(--sh-white) !important;
    transition: var(--sh-transition-base);
}

.btn-primary:hover,
.btn-signin:hover,
.btn-search:hover,
.ota-book-btn:hover,
.btn-book-now:hover {
    background: var(--sh-teal) !important;
    transform: translateY(-2px);
    box-shadow: var(--sh-shadow-md);
}

/* Accent buttons — teal */
.btn-accent {
    background: var(--sh-teal) !important;
    color: var(--sh-white) !important;
}

.btn-accent:hover {
    background: var(--sh-teal-dark) !important;
}

/* Hero Section */
.hero {
    background: var(--sh-gradient-hero) !important;
}

.hero h1 .highlight {
    color: var(--sh-teal) !important;
}

/* Footer */
.footer {
    background: var(--sh-navy) !important;
}

.footer .logo h2 span {
    color: var(--sh-teal) !important;
}

.footer a:hover {
    color: var(--sh-teal) !important;
}

/* Logo "Hatch" */
.logo span,
.brand span {
    color: var(--sh-teal) !important;
}

/* Links */
a {
    color: var(--sh-navy);
    transition: var(--sh-transition-fast);
}

a:hover {
    color: var(--sh-teal);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--sh-navy);
}

/* Accent Highlights */
.price-amount,
.ota-current-price,
.hotel-price {
    color: var(--sh-navy) !important;
}

/* Rating badge */
.ota-rating,
.rating-badge {
    background: var(--sh-success) !important;
}

/* Pay at Hotel badge */
.ota-pay-badge {
    background: var(--sh-teal-light) !important;
    color: var(--sh-navy) !important;
}