@layer mydev-tokens {
  :root {
    --mydev-color-background: #fff;
    --mydev-color-text: #131b2e;
    --mydev-color-heading: #131b2e;
    --mydev-color-muted: #4c5870;
    --mydev-color-accent: #ff6224;
    --mydev-color-accent-strong: #ff6224;
    --mydev-color-on-accent: #0a0f1a;
    --mydev-color-secondary: #131b2e;
    --mydev-color-secondary-strong: #0a0f1a;
    --mydev-color-on-secondary: #fff;
    --mydev-color-link: #b93800;
    --mydev-color-link-hover: #8f2b00;
    --mydev-color-surface: #fff;
    --mydev-color-surface-muted: #f4f6fa;
    --mydev-color-surface-inverse: #0a0f1a;
    --mydev-color-on-inverse: #fff;
    --mydev-color-border: #c9d4e8;
    --mydev-color-focus: #ff6224;
    --mydev-color-positive: #0aa57a;
    --mydev-color-info: #2563eb;
    --mydev-color-warning: #b45309;
    --mydev-color-critical: #c2413a;
    --mydev-color-gradient-start: #ff6224;
    --mydev-color-gradient-end: #ff6224;
    --mydev-gradient-brand: none;
    --mydev-font-body: "Poppins", "Noto Sans Arabic", Arial, Helvetica, sans-serif;
    --mydev-font-heading: "Questrial", "Noto Sans Arabic", Arial, Helvetica, sans-serif;
    --mydev-font-weight-body: 400;
    --mydev-font-weight-heading: 400;
    --mydev-font-size-base: 16px;
    --mydev-font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;
    --mydev-font-size-xs: 0.75rem;
    --mydev-font-size-sm: 0.875rem;
    --mydev-font-size-md: 1rem;
    --mydev-font-size-lg: 1.25rem;
    --mydev-font-size-xl: 1.75rem;
    --mydev-font-size-2xl: 2.5rem;
    --mydev-font-size-3xl: clamp(2.5rem, 7vw, 4.75rem);
    --mydev-letter-spacing-body: 0;
    --mydev-letter-spacing-heading: -0.02em;
    --mydev-line-height-body: 1.65;
    --mydev-line-height-heading: 1.15;
    --mydev-space-1: 0.25rem;
    --mydev-space-2: 0.5rem;
    --mydev-space-3: 0.75rem;
    --mydev-space-4: 1rem;
    --mydev-space-6: 1.5rem;
    --mydev-space-8: 2rem;
    --mydev-space-12: 3rem;
    --mydev-space-16: 4rem;
    --mydev-radius-sm: 4px;
    --mydev-radius-md: 6px;
    --mydev-radius-lg: 8px;
    --mydev-radius-xl: 12px;
    --mydev-radius-pill: 999px;
    --mydev-radius-media: 8px;
    --mydev-shadow-sm: 0 0.25rem 1rem rgb(19 27 46 / 8%);
    --mydev-shadow-md: 0 0.75rem 2rem rgb(19 27 46 / 12%);
    --mydev-shadow-lg: 0 1.25rem 3rem rgb(19 27 46 / 16%);
    --mydev-container-width: 1240px;
    --mydev-container-padding-desktop: 24px;
    --mydev-container-padding-tablet: 20px;
    --mydev-container-padding-mobile: 16px;
    --mydev-container-padding: var(--mydev-container-padding-desktop);
    --mydev-readable-size: min(760px, var(--mydev-container-width));
    /* Compatibility aliases for fallback/client CSS. Elementor containers use native Site Settings. */
    --mydev-page-gutter: var(--mydev-container-padding);
    --mydev-page-gutter-mobile: var(--mydev-container-padding-mobile);
    --mydev-content-size: var(--mydev-readable-size);
    --mydev-wide-size: var(--mydev-container-width);
    --mydev-component-padding: 24px;
    --mydev-component-gap: 16px;
    --mydev-section-space-compact: 48px;
    --mydev-section-space: 80px;
    --mydev-section-space-normal: 80px;
    --mydev-section-space-spacious: 112px;
    --mydev-button-radius: 999px;
    --mydev-button-min-height-sm: 44px;
    --mydev-button-min-height: 48px;
    --mydev-button-min-height-md: 48px;
    --mydev-button-min-height-lg: 56px;
    --mydev-button-padding-block: 11px;
    --mydev-button-padding-inline: 22px;
    --mydev-button-font-size: 16px;
    --mydev-button-font-weight: 600;
    --mydev-card-border-color: var(--mydev-color-border);
    --mydev-card-shadow: none;
    --mydev-card-padding: 24px;
    --mydev-card-gap: 16px;
    --mydev-feature-background: transparent;
    --mydev-feature-border-color: transparent;
    --mydev-feature-padding: 24px;
    --mydev-feature-gap: 16px;
    --mydev-feature-icon-size: 44px;
    --mydev-feature-border-width: 1px;
    --mydev-form-background: var(--mydev-color-surface);
    --mydev-form-border-color: var(--mydev-color-border);
    --mydev-field-height: 48px;
    --mydev-field-padding-block: 12px;
    --mydev-field-padding-inline: 16px;
    --mydev-field-radius: 6px;
    --mydev-field-border-width: 1px;
    --mydev-focus-width: 3px;
    --mydev-focus-offset: 3px;
    --mydev-target-size-min: 44px;
    --mydev-motion-duration-fast: 120ms;
    --mydev-motion-duration-normal: 200ms;
    --mydev-motion-duration-slow: 320ms;
    --mydev-motion-easing: ease;
    --mydev-transition: var(--mydev-motion-duration-normal) var(--mydev-motion-easing);
  }
}


@media (max-width: 1024px) {
  @layer mydev-tokens {
    :root {
      --mydev-container-padding: var(--mydev-container-padding-tablet);
    }
  }
}

@media (max-width: 767px) {
  @layer mydev-tokens {
    :root {
      --mydev-container-padding: var(--mydev-container-padding-mobile);
    }
  }
}