/**
 * La Gritta Elementor — Global Styles
 * Dark mode only. CSS variables used by all custom widgets.
 */

/* ============================================================
   GOOGLE FONTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ============================================================
   CSS VARIABLES — Dark Mode Only
   ============================================================ */

:root {
    /* Namespaced variables (used by custom widgets) */
    --lge-background: #0C0C0C;
    --lge-foreground: #F5F0EB;
    --lge-foreground-rgb: 245, 240, 235;
    --lge-card: #141414;
    --lge-primary: #EF7A23;
    --lge-accent: #C9A96E;
    --lge-muted: #1A1A1A;
    --lge-muted-fg: #8A8A8A;
    --lge-surface: #111111;
    --lge-border: rgba(201, 169, 110, 0.3);
    --lge-input: rgba(201, 169, 110, 0.2);

    /* Legacy aliases (used by HTML widgets in Elementor pages) */
    --background: #0C0C0C;
    --foreground: #F5F0EB;
    --foreground-rgb: 245, 240, 235;
    --card: #141414;
    --accent: #C9A96E;
    --muted-foreground: #8A8A8A;
    --border: rgba(245, 240, 235, 0.1);
}

/* ============================================================
   BASE RESETS (for widget contexts)
   ============================================================ */

.lge-widget {
    font-family: "Inter", sans-serif;
    color: var(--lge-foreground);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lge-widget *,
.lge-widget *::before,
.lge-widget *::after {
    box-sizing: border-box;
}

.lge-widget h1,
.lge-widget h2,
.lge-widget h3,
.lge-widget h4 {
    font-family: "Playfair Display", serif;
    line-height: 1.2;
    margin: 0;
}

.lge-widget a {
    color: inherit;
    text-decoration: none;
}

.lge-widget img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.lge-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.lge-scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lge-scrollbar-hide::-webkit-scrollbar {
    display: none;
}