@charset "utf-8";
/* ==========================================================================
   VEGAS LUXURY HOTEL - BRAND FOUNDATION
   Shared design tokens for the public website and the admin dashboard.
   Palette is taken from the crest logo: metallic gold on black, cream paper.
   Load this file FIRST, before any theme file.
   ========================================================================== */

:root {
    /* ---- Gold ramp (the crest) ---------------------------------------- */
    --vg-gold-50: #fbf6e7;
    --vg-gold-100: #f6ebc8;
    --vg-gold-200: #efdca0;
    --vg-gold-300: #e7c97a;
    --vg-gold-400: #ddb857;
    --vg-gold-500: #c9a227;
    --vg-gold-600: #ac8a1d;
    --vg-gold-700: #8a6e17;
    --vg-gold-800: #6b5511;
    --vg-gold-900: #4a3a0b;

    /* ---- Ink / black ramp --------------------------------------------- */
    --vg-ink-900: #0b0b0d;
    --vg-ink-800: #131317;
    --vg-ink-700: #1c1c21;
    --vg-ink-600: #26262d;
    --vg-ink-500: #3a3a44;
    --vg-ink-400: #5c5c68;
    --vg-ink-300: #8a8a96;
    --vg-ink-200: #b6b6c0;
    --vg-ink-100: #d9d9e0;

    /* ---- Cream / paper ramp ------------------------------------------- */
    --vg-cream-50: #fffdf8;
    --vg-cream-100: #faf6ec;
    --vg-cream-200: #f3ecdc;
    --vg-cream-300: #e8dec7;
    --vg-cream-400: #d9cbab;

    /* ---- Metallic gold surfaces --------------------------------------- */
    --vg-gold-gradient: linear-gradient(135deg, #f0dca4 0%, #ddb857 26%, #c9a227 52%, #a98a20 76%, #e2c56b 100%);
    --vg-gold-gradient-soft: linear-gradient(135deg, #f6ebc8 0%, #e7c97a 100%);
    --vg-gold-sheen: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%);
    --vg-ink-gradient: linear-gradient(160deg, #1c1c21 0%, #0b0b0d 100%);

    /* ---- Semantic roles ------------------------------------------------ */
    --vg-primary: var(--vg-gold-500);
    --vg-primary-hover: var(--vg-gold-600);
    --vg-primary-soft: var(--vg-gold-100);
    --vg-on-primary: #0b0b0d;

    --vg-bg: var(--vg-cream-100);
    --vg-surface: #ffffff;
    --vg-surface-2: var(--vg-cream-50);
    --vg-surface-inverse: var(--vg-ink-900);

    --vg-text: #16161a;
    --vg-text-soft: #4c4c57;
    --vg-text-muted: #7b7b88;
    --vg-text-on-dark: var(--vg-cream-100);
    --vg-text-on-dark-muted: rgba(250, 246, 236, .62);

    --vg-border: #e7e2d6;
    --vg-border-strong: #d5cdba;
    --vg-border-dark: rgba(233, 201, 122, .18);

    /* ---- Status ------------------------------------------------------- */
    --vg-success: #2e8b57;
    --vg-success-soft: #e6f4ec;
    --vg-info: #2f6f9f;
    --vg-info-soft: #e6eff6;
    --vg-warning: #c98a27;
    --vg-warning-soft: #fbf1dc;
    --vg-danger: #b3261e;
    --vg-danger-soft: #fbe9e7;

    /* ---- Type --------------------------------------------------------- */
    --vg-font-display: 'Playfair Display', 'Times New Roman', serif;
    --vg-font-body: 'Sarabun', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vg-tracking-wide: .14em;
    --vg-tracking-wider: .22em;

    /* ---- Radii (curved, modern) ---------------------------------------- */
    --vg-radius-xs: 6px;
    --vg-radius-sm: 10px;
    --vg-radius: 14px;
    --vg-radius-md: 18px;
    --vg-radius-lg: 24px;
    --vg-radius-xl: 32px;
    --vg-radius-pill: 999px;

    /* ---- Elevation (warm-tinted, never harsh) -------------------------- */
    --vg-shadow-xs: 0 1px 2px rgba(29, 24, 10, .05);
    --vg-shadow-sm: 0 2px 8px rgba(29, 24, 10, .06);
    --vg-shadow: 0 6px 20px rgba(29, 24, 10, .08);
    --vg-shadow-md: 0 12px 32px rgba(29, 24, 10, .10);
    --vg-shadow-lg: 0 22px 55px rgba(29, 24, 10, .14);
    --vg-shadow-gold: 0 10px 28px rgba(201, 162, 39, .30);
    --vg-shadow-gold-lg: 0 16px 44px rgba(201, 162, 39, .38);

    /* ---- Motion -------------------------------------------------------- */
    --vg-ease: cubic-bezier(.4, 0, .2, 1);
    --vg-ease-out: cubic-bezier(.16, 1, .3, 1);
    --vg-transition: 220ms var(--vg-ease);

    /* ---- Layout rhythm -------------------------------------------------- */
    --vg-space-section: 6rem;
    --vg-header-h: 76px;
}

/* ==========================================================================
   Shared primitives - available on both website and dashboard
   ========================================================================== */

.vg-gold-text {
    background: var(--vg-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--vg-gold-600);
}

/* Thin gold rule used under section titles and brand lockups */
.vg-rule {
    display: inline-block;
    width: 64px;
    height: 2px;
    border: 0;
    background: var(--vg-gold-gradient);
    border-radius: var(--vg-radius-pill);
    opacity: .95;
}

.vg-eyebrow {
    display: inline-block;
    font-family: var(--vg-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--vg-tracking-wider);
    text-transform: uppercase;
    color: var(--vg-gold-600);
    margin-bottom: .65rem;
}

/* Developer credit - quiet by default, gold on hover. Used in the website
   sub-footer, the dashboard footer and the admin sign-in screen. */
.vg-credit {
    display: block;
    font-family: var(--vg-font-body);
    font-size: 12.5px;
    letter-spacing: .01em;
    color: var(--vg-text-muted);
}

.vg-credit a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--vg-transition), border-color var(--vg-transition);
}

.vg-credit a:hover,
.vg-credit a:focus-visible {
    color: var(--vg-gold-500);
    border-bottom-color: var(--vg-gold-500);
}

/* Focus ring - consistent everywhere, accessible on light and dark */
.vg-focusable:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--vg-gold-500);
    outline-offset: 2px;
    border-radius: var(--vg-radius-xs);
}

/* Selection */
::selection {
    background: var(--vg-gold-200);
    color: var(--vg-ink-900);
}

/* Scrollbars - slim and on-brand (WebKit) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--vg-gold-400) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--vg-gold-400);
    border-radius: var(--vg-radius-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vg-gold-500);
    background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}