/* ============================================================
   NxGen Addons – Design Tokens
   CSS custom properties shared across widgets.
   Component classes have been removed — each widget carries
   its own scoped styles. This file is only loaded when a
   widget that consumes these tokens is present on the page.
   ============================================================ */

:root {
    /* Surface & Background */
    --mx-bg: #ffffff;
    --mx-surface: #f8f9fa;
    --mx-surface-2: #f1f3f5;

    /* Text */
    --mx-text: #1a1a2e;
    --mx-text-muted: #6c757d;

    /* Borders & Shadows */
    --mx-border: #e0e0e0;
    --mx-border-light: rgba(0, 0, 0, 0.06);
    --mx-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --mx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --mx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

    /* Radius */
    --mx-radius: 8px;
    --mx-radius-lg: 14px;
    --mx-radius-full: 9999px;

    /* Spacing */
    --mx-gap-sm: 8px;
    --mx-gap: 16px;
    --mx-gap-md: 16px;
    --mx-gap-lg: 24px;
    --mx-gap-xl: 32px;
    --mx-padding-sm: 12px;
    --mx-padding: 20px;
    --mx-padding-md: 16px;
    --mx-padding-lg: 28px;

    /* Accent */
    --mx-accent: #3b82f6;
    --mx-accent-hover: #2563eb;
    --mx-accent-contrast: #ffffff;

    /* Focus */
    --mx-focus: 0 0 0 2px rgba(59, 130, 246, 0.35);

    /* Motion */
    --mx-transition: 200ms ease-out;
    --mx-transition-slow: 400ms ease-out;

    /* Typography — Font Family */
    --mx-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Typography — Scale */
    --mx-font-xs: 12px;
    --mx-font-sm: 13px;
    --mx-font-base: 15px;
    --mx-font-md: 17px;
    --mx-font-lg: 22px;
    --mx-font-xl: 28px;
    --mx-font-2xl: 36px;
    --mx-font-3xl: 48px;

    /* Typography — Line Heights */
    --mx-leading-tight: 1.2;
    --mx-leading-normal: 1.5;
    --mx-leading-relaxed: 1.65;

    /* Typography — Weights */
    --mx-weight-normal: 400;
    --mx-weight-medium: 500;
    --mx-weight-semibold: 600;
    --mx-weight-bold: 700;
}


/* ============================================================
   NxGen Global Interaction State Reset
   Eliminates Elementor's default magenta / red focus color
   from every NxGen widget element. Widget-level :focus-visible
   rules with higher specificity override the fallback ring.
   ============================================================ */

/* Strip Elementor's inherited outline-color on any focus event */
[class*="elementor-widget-nxgen_"] *:focus {
    outline: none;
    outline-color: transparent;
}

/* Remove active-state ring / flash artifacts */
[class*="elementor-widget-nxgen_"] *:active {
    outline: none;
}

/* Clean keyboard-focus ring: applies only on keyboard navigation */
[class*="elementor-widget-nxgen_"] a:focus-visible,
[class*="elementor-widget-nxgen_"] button:focus-visible,
[class*="elementor-widget-nxgen_"] [role="button"]:focus-visible,
[class*="elementor-widget-nxgen_"] [tabindex]:focus-visible,
[class*="elementor-widget-nxgen_"] input:focus-visible,
[class*="elementor-widget-nxgen_"] select:focus-visible,
[class*="elementor-widget-nxgen_"] textarea:focus-visible {
    outline: none;
    box-shadow: var(--mx-focus);
}