/**
 * DreamFarm design tokens + Elementor bridge.
 *
 * Theme tokens (--df-*) are the source of truth. Elementor globals are mapped
 * onto them so Site Settings widgets inherit the theme palette/type.
 * Loaded after Elementor kit CSS so these values win.
 */

:root {
    /* Layout — base (laptops / up to ~QHD start) */
    --df-container-width: 1200px;
    --df-container-gutter: 1.25rem;
    --df-container: var(--df-container-width);
    --df-gutter: var(--df-container-gutter);

    /* Keep Elementor boxed containers on the same width token. */
    --container-max-width: var(--df-container-width);

    /* Color */
    --df-color-text: #1e1e1e;
    --df-color-bg: #ffffff;
    --df-color-accent: #a107c0;
    --df-color-muted: #6b7280;
    --df-color-secondary: #1e1e1e;

    /* Type */
    --df-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --df-font-heading: var(--df-font-body);
    --df-font-size-base: 16px;

    /* Elementor global colors ← theme tokens */
    --e-global-color-primary: var(--df-color-accent);
    --e-global-color-secondary: var(--df-color-secondary);
    --e-global-color-text: var(--df-color-text);
    --e-global-color-accent: var(--df-color-accent);
}

/* Large desktops — open the boxed layout a bit (~1600–1919 CSS px). */
/*
@media (min-width: 1600px) {
    :root {
        --df-container-width: min(90vw, 1440px);
        --container-max-width: var(--df-container-width);
    }
}
*/

/* 2K / ultrawide — only above FHD so 1920×1080 stays at 1200px. */
@media (min-width: 2200px) {
    :root {
        --df-container-width: min(92vw, 1680px);
        --container-max-width: var(--df-container-width);
    }
}

/* Force Elementor boxed sections/containers onto the theme token. */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--df-container-width);
}

.e-con.e-con-boxed > .e-con-inner {
    max-width: var(--df-container-width);
    margin-inline: auto;
}